JPEG, PNG и GIF — боже мой! Большинство веб-разработчиков просто изучают методом проб и ошибок, какой формат использовать. И почти никто не понимает, как эти форматы на самом деле работают.
В этой статье мы рассмотрим алгоритмы сжатия форматов для того, чтобы понять, как различные стратегии делают их более или менее подходящими для различных видов изображений. Затем осуществим экскурсию по нескольким графическим форматам следующего поколения (например, WebP и JPEG-XR) и посмотрим, как можно использовать смарт-серверы, для того, чтобы воспользоваться преимуществами этих мощных (но, увы, не универсально поддерживаемых) форматов уже сегодня.
JPEG
Позвольте уделить немного времени для оценки почтенного и изумительного JPEG. Двадцатипятилетний багаж алгоритмов, который кроется за ISO 10918 (он же стандарт JPEG), выдержал испытание временем.
Итак, как же он работает? И для чего он хорош?
Формат сжатия JPEG вырезает изображение в 8×8-пиксельный блок, затем делает с ним нечто сумасшедшее, с применением огромного количества математики. Он преобразует каждый пиксель блока в список значений R, G и B, отображенных в последовательных точках пространства в список коэффициентов, используемых в уравнениях, описывающих блок в терминах энергетических волн.
С технической точки зрения, алгоритм сжатия JPEG преобразует информацию изображения из пространственной области в область частотную.
Практически это означает, что JPEG очень хорош при сжатии нерастрированных изображений: картинок с огромным количеством цветов и плавных переходов между ними. Другими словами, JPEG предполагает, что ваше изображение будет выглядеть более или менее похожим на фотографию.
С другой стороны, формат JPEG страшен для сжатия изображений с четкими краями или шумными текстурами — он поместит кольца вокруг острых краев и размоет мелкие детали.
Для того чтобы хорошо сжать подобные изображения, нужно использовать другие алгоритмы. Переходим к нашему следующему формату:
GIF
В первые дни развития Интернета, если формат изображение не было JPEG, значит, оно было GIF.
Формат GIF использует алгоритм сжатия LZW, который намного проще, чем математическая модель JPEG. По сути, алгоритм LZW сканирует данные изображения и генерирует очень короткие коды для его частей, которые повторяются. LZW укорачивает повторение. Это означает, что формат GIF хорош для сжатия изображений, имеющих большие куски одинаковых или повторяющихся данных. Это изображения, которые имеют только несколько цветов и широкие линии, и где резкие переходы между ними могут эффективно сохраняться и оставлять изображение без потерь в качестве.
К тому же, GIF имеет ряд фантазийных особенностей: прозрачность и анимацию.
Но … GIF страшен при сжатии вещей, которые имеют даже умеренное количество цветов — его предел 256. Преобразование изображения с числом цветов, большим, чем это, происходит с потерями и выглядит ужасно.
Короче говоря, GIF и JPEG имеют противоположные и дополняющие друг друга сильные стороны. В начале эпихи Интернета они составили убойную команду.
Но, нерешенные патентные вопросы, касающиеся алгоритма LZW, вдохновили некоторых очень умных людей взять второй раунд для разработки формата изображения без потерь для Интернета.
PNG
PNG изощряется с теми же видами изображений, что и GIF, но имеет несколько дополнительных преимуществ:
— нет ограничений в 256 цветов
— прозрачность альфа-канала (так пиксель может быть частично прозрачным, а не просто прозрачным или полностью непрозрачным)
— во всех, кроме нескольких особых случаев, обеспечивает превосходное сжатие
Это изображение из Википедии показывает способность PNG сжимать полноцветное изображение с полупрозрачными пикселями.
Чем же PNG лучше GIF, когда речь заходит о сжатии?
Во-первых, алгоритм PNG пытается уменьшить объем данных, необходимых для хранения, используя пиксели, которые он уже определил как неподходящие. Формат имеет пять различных стратегий прогнозирования, но в основном, PNG предполагает, что пиксели, находящиеся рядом друг с другом будут аналогичными. Если это предположение подтверждается, PNG сохраняет данные, оставляя разницу между предположительными и фактическими значениями — малые числа занимают меньше места, чем большие.
Во-вторых, PNG вырезает повторения, позволяя изображению ссылаться на предыдущие, идентичные последовательности пикселов (вместо того, чтобы хранить одинаковые данные дважды), используя алгоритм, называемый LZ77. LZ77 PNG и GIF LZW достигают одного и того же результата, вырезая повторения, но получают его с помощью средств, которые достаточно различны, чтобы избежать патентных поверенных. Выигрывают все!
И вот, наконец, сделав все это, PNG использует процесс, называемый «кодирование Хаффмана» наваривая остальные значения еще дальше, генерируя наименее возможные коды для наиболее распространенных значений (кстати, формат JPEG тоже использует кодирование Хаффмана, но в качестве последнего шага).
Сочетание всех этих трех методов (без потерь) дает огромные преимущества по сравнению с единой стратегией GIF-изображения. Их сложные инструменты могут обеспечить еще большую степень сжатия, изменяя исходные данные изображения, делая сжатие более удобным.
Возвращаясь из математических дебрей, скажем проще — все, что вам нужно знать, это то, что PNG будет работать хуже, чем JPEG, если речь идет о фотографии, и лучше, чем GIF практически всегда. Таким образом, использовать его целесообразно для изображений с четкими краями, широкими линиями сплошного цвета или точно повторяющимися узорами.
НОВОЕ ПОКОЛЕНИЕ
Рассмотренные три формата — JPEG, GIF, PNG — единственные форматы изображений с универсальной поддержкой, которые разработчики могут реально использовать. Но новые, передовые форматы уже здесь и они впечатляют.
WebP
WebP является ответвлением видео формата WebM от Google. Ядро его стратегии сжатия выводит простую прогностическую стратегию, используемую форматом PNG, на следующий уровень. WebP использует одну из шестнадцати различных предиктивных стратегий для каждого блока изображения и способен без потерь сжимать картинку, учитывая разность между предсказанным и фактическим значениями. Формат очень гибкий: он хорош для самых разнообразных изображений (как для графики, так и для фотографии), при этом он сжимает изображение лучше, чем любой PNG или JPEG.
Но, это формат Google, и он поддерживается на данный момент только в Chrome.
JPEG-XR
Еще один формат поколения NEXT от компании Micosoft, JPEG-XR имеет кучу новых передовых методов сжатия, что позволяет ему:
— осуществлять сжатие без потерь
— обеспечивать более эффективное сжатие с потерями
— имеет полупрозрачный альфа-канал
Как и WebP, JPEG-XR является гораздо более сложным, более производительным и менее поддерживаемым, чем его предшественники. Сейчас, формат поддерживается только в Internet Explorer и Edge.
КАК ИСПОЛЬЗОВАТЬ ФОРМАТЫ БУДУЩЕГО СЕГОДНЯ
Есть ли способ использовать форматы поколения NEXT прямо сейчас? Конечно, есть!
Новая разметка позволяет разработчикам выставлять одно и то же изображение в разных форматах, позволяя браузеру решить, какой из них использовать для загрузки. К сожалению, эта разметка получается немного комплексной и сложной:
К счастью, есть еще один способ. Разработчики внешнего интерфейса могут отнести эту сложность к фоновым задачам с использованием смарт-серверов, которые способны отправлять разных пользователей к различным ресурсам из одного и того же URL.
К примеру, используя услугу Cloudinary, можно развертывать динамические, адаптивно-сжатые изображения, добавляя несколько простых символов в их URL. В результате вы получите адаптивность без добавления какой-либо сложности. Посмотрите на пример ниже:
Как это работает? Оказывается, во время запрашивания ресурсов изображений с серверов, клиент дает команду серверу, какие форматы он поддерживает. Смарт-сервер способен пересылать различным клиентам разные ресурсы, основанные на информации, содержащейся в запросах.
И это еще не все, что умеет делать смарт-сервер. Когда вы берете курс на q_auto, тот же Cloudinary автоматически выясняет не только какой формат будет лучше всего работать для каждого клиента, но и какие конкретные параметры сжатия подходят для вашего конкретного изображения, защищая вас от необходимости вспоминать что-либо вообще о сложных внутренних разработках других форматов.
Так что, прекращайте читать, просто подпишитесь на бесплатный аккаунт уже сегодня.
