у какого формата изображения лучше качество изображения

Сравнение новых и проверенных форматов изображений

В данной статье мы рассмотрим новые форматы графических файлов, проведем их сравнение. Мы также рассмотрим методы оптимизации, которые помогут ускорить загрузку изображений на сайт.

Зачем нужны новые форматы изображений?

Новые графические форматы используют более эффективные алгоритмы сжатия, поэтому размеры файлов получаются намного меньше. Что означает меньшее время загрузки сайта.

Эффект от новых форматов изображений будет постепенным, поскольку браузеры не сразу принимают свежие стандарты.

Новые форматы

Вот несколько кандидатов, которыми можно заменять существующие форматы.

WebP был разработан Google как альтернатива JPG. Файл в этом формате может быть на 80 % меньше, чем JPEG.

Opera и Google Chrome в настоящее время уже поддерживают его. Firefox объявил о планах по реализации поддержки этого графического формата.

Google и Facebook в настоящее время экспериментируют с этим графическим форматом. WebP уже используют около 95 % изображений на главной странице eBay. YouTube применяет формат для отображения больших миниатюр.

Для CMS существуют расширения, которые помогут добавить поддержку WebP на сайт. Например, Optimus и Cache Enabler для WordPress. Это не нарушит отображение сайта в браузерах, которые не поддерживают WebP, если предоставить резервные варианты в формате PNG или JPG.

High efficiency image files имеет расширение HEIC (.heic). Ранее корпорация Apple объявила о том, что ее линейка продуктов будет поддерживать формат HEIF по умолчанию.

Помимо файлов меньшего размера HEIF обеспечивает большую гибкость, чем другие форматы. Он поддерживает неподвижные изображения и последовательности картинок. Следовательно, в одном файле можно хранить серийные снимки, кадры из видео и другие коллекции изображений. HEIF также поддерживает прозрачность, 3D и 4K.

Также файлы HEIF могут содержать свойства изображения, миниатюры, метаданные и вспомогательные данные. Измененные изображения могут быть восстановлены благодаря неразрушающим операциям редактирования. Это означает, что обрезка, повороты и другие изменения могут быть отменены в любое время.

На момент написания этой статьи формат HEIF не поддерживался браузерами.

Free Lossless Image Format (или FLIF) использует алгоритм, который на 14-74 % эффективнее по сравнению с устаревшими форматами. Поэтому FLIF отлично подходит для любого типа изображений или анимации. Файлы, сохраненные в этом формате, в среднем на 43% меньше, чем в PNG.

При тестировании FLIF часто оказывался наиболее эффективным форматом.

FLIF использует один из алгоритмов на основе арифметического кодирования. Он также поддерживает прогрессивное чередование. Поэтому изображения отображаются целиком, как только они начинают загружаться.

Традиционные форматы

В некоторых случаях стоит придерживаться проверенных графических форматов. Поэтому давайте рассмотрим их.

Формат был разработан еще в 1992 году и предназначен для облегчения сжатия растровых изображений с потерей качества. Сжатие с потерями — необратимый процесс, основанный на неточных приближениях. Идея состояла в том, чтобы позволить разработчикам регулировать коэффициент сжатия для достижения желаемого баланса между размером файла и качеством изображения.

JPG отлично подходит для фотографий. Но сжатие с потерями сопровождается снижением качества изображения. Качество ухудшается каждый раз, когда изображение редактируется и повторно сохраняется.

GIF (graphics interchange format) использует алгоритм сжатия LZW, который не ухудшает качество изображения. В формате GIF отсутствует поддержка цветов (которая есть в JPG и PNG). Тем не менее, формат популярностью благодаря возможности визуализировать анимацию путем объединения нескольких изображений в один файл. Изображения, хранящиеся в файле GIF, могут последовательно отображаться для создания короткого эффекта, похожего на фильм. GIF-файлы могут быть сконфигурированы для отображения последовательности изображений заданное количество раз.

Формат PNG был первоначально задуман как преемник GIF. Он был разработан специально для представления изображений в интернете. По популярности, PNG занимает второе место после JPG.

При этом PNG позволяет сжимать данные без потери качества. Формат также поддерживает прозрачность и непрозрачность. PNG обычно используется для несложной графики и иллюстраций.

Сравнение поддержки прозрачности JPG (слева) и PNG (справа).

Способы улучшения оптимизации и доставки изображений

Оптимизация изображения считается незаменимой для повышения производительности сайта. В Google Dev Guide есть исчерпывающая статья на эту тему, поэтому далее будет приведен лишь краткий список советов по ускорению загрузки изображений.

Реализация поддержки новых форматов изображений

Новые графические форматы еще не поддерживаются повсеместно. Поэтому сайт должен определять, какие форматы поддерживает клиент, и предоставить ему лучший вариант.

Использование CDN

Сеть доставки контента (CDN) ускоряет загрузку изображений, кэшируя их в своей сети распределенных серверов. Это может повысить скорость работы сайта. Особенно если ваши пользователи находятся далеко от исходного сервера.

Использование CSS вместо изображений

Устаревшие браузеры не поддерживают тени изображений и закругленные углы. Поэтому веб-разработчики привыкли отображать определенные элементы, такие как кнопки, в виде изображений. Вместо них необходимо использовать CSS, когда это возможно.

Проверьте настройки кэша изображений

Для изображений, которые меняются не часто, можно использовать кэширования HTTP, чтобы сократить время загрузки для постоянных посетителей.

Когда пользователь посещает ваш сайт в первый раз, его браузер кэширует изображение, чтобы его не нужно было загружать снова при последующих сеансах. Эта также снизит затраты на пропускную способность сервера.

Изменение размера изображений для разных устройств

Используйте атрибут srcset, чтобы браузер определял, какой размер изображения он должен предоставлять, исходя из размеров и разрешения клиентского устройства.

Тесты сжатия изображения

Выбор между форматами изображений без потерь и с потерями должен основываться на том, насколько интенсивно работает сайт. Например, в интернет-магазине лучше использовать изображения в худшем качестве в обмен на более быструю загрузку. Для сайта фотографа, скорее всего, все будет наоборот.

Результаты сжатия изображений с помощью первых трех форматов, рассмотренных в статье.

Приведенные ниже результаты значительно различаются из-за форматов изображений без потерь / с потерями.

Изображения в формате HEIF оказались меньше, чем в любом другом формате. Но из-за отсутствия поддержки в настоящее время невозможно интегрировать формат HEIF в веб-приложения.

Формат WebP показал близкие результаты и при этом обеспечивает поддержку браузерами. Для пользователей Chrome или Opera изображения в формате WebP, несомненно, помогут ускорить загрузку.

PNG значительно больше, чем его аналог JPG с потерями. При оптимизации с использованием FLIF экономия составила около 50%. Это делает FLIF отличной альтернативой для тех, кому нужны высококачественные изображения с меньшим размером файла. Но формат еще не поддерживается браузерами.

Заключение

Устаревшие форматы изображений, вероятно, будут существовать еще много лет. Но все больше разработчиков будут использовать новые, как только осознают их преимущества.

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!

Источник

Форматы изображений для веба

Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.

Растровые форматы

Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP. Подробнее о растровой графике можно прочитать в статье «Растровая и векторная графика».

Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.

GIF (Graphics Interchange Format)

Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.

Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.

Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.

Пример изображения в формате GIF (источник изображения: giphy.com)

Таким образом, формат GIF подходит если:

JPEG (Joint Photographic Experts Group)

Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.

Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).

Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.

Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.

Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.

Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.

Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.

Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.

Таким образом, формат JPEG лучше подходит для:

PNG (Portable Network Graphics)

PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.

PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.

Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.

Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.

Пример изображения в формате PNG (источник изображения: Wikimedia Commons)

Итак, формат PNG подходит для:

WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.

Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.

Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.

Иногда WebP сжимает изображение даже лучше, чем заявляет Google.

JPEG: 44 килобайт WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.

Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.

Векторные форматы

GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.

Примеры SVG (источники изображений: Roundicons Freebies www.flaticon.com/authors/roundicons-freebies и HTML Academy)

Источник

На всех этапах создания фотографии необходимо выбирать формат для сохранения. До момента выхода снимка в «свет» он 4 раза подвергается сохранениям:

Какие бывают графические форматы

На сегодняшний день известно десятки разнообразных форматов для фотографии, среди них популярные и наиболее часто используемые:

Кроме перечисленных, имеются еще более десятка различных форматов, чаще всего узкоспециализированных, заточенных под определенную задачу, не подходящие для работы фотографа.

Особенности JPEG-формата

Огромным и главным плюсом формата JPEG является его универсальность – абсолютно все редакторы и программы способны читать его. Сохраненные снимки в сети или на ПК не исключение. На этом и стоит его популярность, в 80% случаев передачи графических данных между пользователями происходят с использованием формата JPEG. Многие фотографы даже применяют его для съемки, когда нужно значительно сэкономить время на сохранение одного кадра и место на карте памяти. Но у JPEG есть и существенные недостатки, заставляющие выбирать RAW или TIFF.

Плюсы формата JPEG

Главная задача создателей формата была сжать снимки до оптимального уровня без потери качества. Судя по распространению изображения в jpeg у них получилось. Какие основные преимущества имеет формат:

Минусы формата JPEG

Но без минусов или неудобств в цифровом мире невозможно обойтись. Есть и существенные недостатки:

Особенности RAW-формата

Для уточнения терминологии, RAW – не расширение, не формат, а общее название форматов, имеющих одну сущность и цель – сохранить максимальное количество информации о каждом пикселей. Каждый производитель назвал его по-своему. Какие же есть преимущества у такого способа хранения информации:

Все преимущества формата RAW находятся в области редактирования снимков, что очень важно для фотографов, но не существенно для простых обывателей. Таким образом, можно выделить и минусы формата:

Все недостатки относятся к процессу сохранения и использования фотографий, что весьма неудобно «неспециалистам». Делая вывод из плюсов и минусов, можно сказать, что RAW-формат – вариант для профессионалов, для художественной обработки и последующей работы со снимками.

10 причин снимать в RAW

Подводя итоги плюсов и минусов двух основных популярных форматов, можно сделать вывод: если вы – фотограф, то RAW-формат является скорее необходимостью, чем привычкой или прихотью. Некоторые источники называют несколько причин остановить выбор на нем:

Какой же формат выбрать?

Сравнив основные форматы для сохранения графических файлов, можно сделать вывод, что для разных задач нужно выбирать отдельный формат. У каждого есть плюсы и минусы, преимущества и неудобства.

Для редактирования и оформления – PSD, RAW, TIFF на выбор, кому как удобно.

Для хранения на ПК – JPEG пока уверенно держит пальму первенства, позволяет компактно складывать снимки, не теряя в качестве. То же самое и для сохранения фото в аккаунты в социальных сетях. Формата JPEG хватит в полной мере.

Для передачи данных – JPEG, опять-таки, и GIF. Они сжимают снимок до приемлемых размеров, не сильно портят при этом изображение.

В каком формате снимать и хранить – дело сугубо личное, привычку, приоритеты, личные предпочтения никто не отменяет. Настоящему фотографу и мастеру неправильные форматы не помешают создать шедевр.

Источник

RAW или JPEG — какой формат изображений лучше и почему

Тема формата изображений RAW или JPEG является одной из бесконечных дискуссий в фотографии. Некоторые фотографы говорят, что снимают в RAW, а другие говорят, что снимают в JPEG.

Что такое формат RAW в цифровой фотографии и каковы его преимущества и недостатки по сравнению с JPEG? Наличие глубокого понимания форматов файлов и их различий очень важно для фотографов, чтобы они могли правильно выбирать настройки камеры.

Но когда я наткнулся на формат изображений RAW, я хотел выяснить, как он сразу влияет на изображения, так как само слово «сырье» звучало для меня интригующе (raw в переводе с английского — сырой, необработанный). Поэтому я пошел дальше и изменил настройки камеры на RAW и попытался сделать снимок. Первое, что я заметил, было то, как внезапно стала моей маленькая карта памяти.

«Подожди секунду, почему число фотографий сократилось с нескольких тысяч до менее чем 500?» это то, что сразу пришло в мою голову. На ЖК-дисплее изображение выглядело точно так же, но при этом оно занимало в три раза больше места. Облом. Затем я взял карту памяти и вставил ее в свой ноутбук. К моему удивлению, я даже не мог увидеть или открыть проклятую вещь! «Бесполезно», воскликнул я, а затем изменил настройки камеры на JPEG.

Звучит знакомо? Если вы находитесь в подобной ситуации, не совершайте ошибку, отказавшись от RAW, как я однажды сделал, и читайте дальше. Вам действительно нужно понять все преимущества и недостатки обоих форматов, прежде чем принимать это важное решение, потому что вы, возможно, пожалеете, что не сделали этого позже.

1. Что такое RAW формат

В отличие от файлов JPEG, которые могут быть легко открыты, просмотрены и распечатаны большинством программ для просмотра и редактирования изображений, RAW является проприетарным форматом, привязанным к конкретной модели камеры. Поэтому, чтобы программное обеспечение могло работать с файлом RAW, оно должно быть совместимо с конкретной камерой, с которой было снято изображение RAW. Постобработка изображений RAW может дать больший динамический диапазон (с лучшими вариантами восстановления светлых участков и теней), превосходные цвета и в некоторых случаях даже может предоставить больше деталей по сравнению с изображениями JPEG.

Файлы RAW обычно состоят из трех основных частей: фактические данные RAW от датчика изображения, полноразмерный предварительный просмотр JPEG + миниатюра, обработанная камерой, и вся соответствующая информация о заголовке и метаданных. Чтобы камеры могли отображать записанное изображение на заднем ЖК-дисплее или в электронном видоискателе, используется обработанный камерой предварительный просмотр JPEG.

Заголовок изображения, а также части метаданных используются для интерпретации данных изображения датчика программным обеспечением для преобразования RAW, тогда как другая информация метаданных, такая как настройки экспозиции, модель камеры и объектива, дата / время и т.д., может использоваться для фильтрации, сортировки и каталогизация изображений.

1.1. Преимущества формата RAW

1.2. Недостатки формата RAW

2. Что такое формат JPEG

Различные уровни качества (обычно в процентах) могут применяться для сжатия изображений JPEG, что влияет на общее качество и конечный размер изображения. Низкое качество преобразования приводит к более высоким степеням сжатия, меньшим файлам и к увеличению артефактов сжатия, в то время как изображения, сохраненные с настройкой более высокого качества, уменьшат вероятность появления артефактов сжатия за счет увеличения объема занимаемой памяти.

2.1. Преимущества формата JPEG

2.2. Недостатки формата JPEG

3. Вы должны использовать RAW или JPEG?

Для меня съемка в RAW намного перевешивает преимущества использования JPEG. Память в наши дни дешевая, и размер файла меня не беспокоит даже для резервных копий. Поскольку я уже трачу значительное количество времени на фотографирование, я не против потратить немного больше времени и усилий на их работу в цифровой темной комнате. Правда, если бы мне потребовалось пост-обработка каждого изображения по одному, я бы, конечно, вообще отказался от RAW, потому что у меня не было бы времени, чтобы просмотреть десятки тысяч изображений.

Тем не менее, благодаря всему программному обеспечению для отбора, каталогизации и постобработки изображений, которое позволяет мне выбирать и редактировать то, что нужно редактировать, с возможностью просмотра изображений в пакетном режиме, мне не нужно беспокоиться о том, чтобы тратить время, а только сконцентрировать свои усилия на важных фотографиях.

Если бы я снимал только в формате JPEG, я не смог бы многое сделать для исправления изображений. Но благодаря RAW и его потенциалу восстановления ошибки экспозиции и баланса белого относительно легко исправить (если ошибки экспозиции не слишком велики). RAW может иметь огромное значение в таких ситуациях, особенно при фотографировании редких, особых моментов, которые невозможно воспроизвести никогда.

3.1. RAW против JPEG: пример недодержанного изображения

Какая разница при попытке восстановить данные из RAW-изображения по сравнению с JPEG? Давайте посмотрим на первый пример:

Скорость затвора камеры была по-прежнему прежней, когда освещение стало намного ярче, и я не заметил этой проблемы до истечения срока. К счастью, я снимал в RAW и смог почти полностью восстановить детали, которые в противном случае были бы потеряны. Это был первый взгляд и лучшее изображение лица жениха, которое я не хотел потерять. Посмотрите на изображение внизу верхнее изображение слева, которое было восстановлено из файла RAW, а нижнее изображение было восстановлено таким же образом из изображения JPEG:

Как видите, разница между ними очень заметна и значительна. Восстановление изображения с помощью Lightroom в этом случае было немного экстремальным, и я, конечно же, получал больше шума в результирующем изображении, но оно все еще было вполне пригодным для использования. Теперь, если бы я снял то же изображение в формате JPEG и недоэкспонировал его, я бы не смог восстановить все эти данные, и я бы не смог доставить это изображение своим клиентам.

Трудно поверить, что такое восстановление возможно с RAW-изображением, пока вы сами не попробуете. Установите камеру на RAW + JPEG, затем недоэкспонируйте изображение на несколько ступеней и посмотрите, насколько больше у вас есть потенциал восстановления с изображением RAW по сравнению с JPEG. Вы будете поражены тем, что видите, и испытаете результат, аналогичный приведенному выше.

3.2. RAW против JPEG: восстановление изображения с большой выдержкой

Теперь давайте взглянем на еще одно недодержанное изображение, которое я сделал ночью, используя очень длинную выдержку в 262 секунды. Аккумулятор моей камеры вот-вот мог разрядится, поэтому я остановил экспозицию, чтобы заменить батарею и запустил еще одну:

К сожалению, моя следующая экспозиция вообще не сработала, потому что на рассвете стало намного ярче, а звезды исчезли с неба. Я думал, что не смогу восстановить изображение, но набрав +4,5 на слайдере экспозиции в Lightroom, я смог выделить все детали изображения, что было невероятно! Затем я настроил несколько параметров изображения, таких как «Подсветка», «Тени», «Белое» и «Контрастность», и вот что я смог получить в результате:

Теперь, если вам интересно, что бы я мог сделать с изображением, если бы я снял его в формате JPEG, вот результат:

Я не смог сделать оба изображения так, чтобы они выглядели одинаково. Как видите, изображение совершенно непригодно для использования!

3.3. RAW против JPEG: постобработка изображений RAW против JPEG

Следующий пример включает изображение с переэкспонированным небом. Вот исходное изображение RAW без какой-либо последующей обработки:

Изображение ниже прошло точно такие же шаги пост-обработки, но оригинал был JPEG:

Как видите, исходное изображение JPEG почти не содержало данных, чтобы можно было восстановить блики на небе, поэтому оно выглядит серым. Большая часть облаков в правом верхнем углу, а также все облака слева также были переэкспонированы, и я не смог найти ни одного из этих бликов. В дополнение ко всему этому, если вы посмотрите внимательно, вы также обнаружите тонкие различия в других областях изображения, где изменения баланса белого не идут в пользу изображения JPEG.

Источник