Поиск
  • AdQuantum

Четкость до последнего байта: как правильно сжимать изображения и чем для этого пользоваться

Этот материал — перевод статьи из блога Evil Martians (авторы: Полина Гуртова, Рита Клубочкина и Энди Барнова). Статья полезна фронтендерам, ПМ-мам, контентщикам и вообще всем, кто имеет дело с изображениями в интернете.

Средняя веб-страница для десктопа в 2019 занимала 2 МБ трафика, и половина всего, что веб-сервер отправляет браузеру пользователя, — это графика. JPEG, PNG, SVG, GIF и некоторые другие аббревиатуры известны каждому, кто когда-либо создавал хоть что-либо в «цифре». Может показаться, что всё отображаемое на странице касается только фронтенд-разработки, но на самом деле понимание специфики веб-изображений важно для всех членов продуктовой группы: от тех, кто отвечает за серверную часть, до дизайнеров, менеджеров и специалистов техподдержки клиентов.


Экономя ваше время, мы предоставляем вам эту инфографику:

А если время все же есть, поехали!


Что такое сжатие изображений


У нас есть изображение размером 1000 × 1000 пикселей. Мы можем представить каждый пиксель четырьмя числами: три для цвета и одно для прозрачности. Каждое число — это один байт. Итого: 4 * 1000 * 1000 * 1 байт — это 4 Мбайт необработанных данных изображения (довольно много). Нам нужно сжать изображение перед отправкой в браузер, а браузер должен декодировать его обратно.


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


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


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


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

Разные энкодеры в действии:


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


Вот инструменты в вашем распоряжении:


Любой графический редактор (Adobe Photoshop, GIMP, Figma, Sketch) имеет просто космическую панель параметров для сжатия. Но если у вас много изображений, обработка каждого из них отдельно в (чаще всего) дорогостоящем ПО не слишком оптимальна.


Если вы пользователь Mac, преспокойно остановитесь на ImageOptim (бесплатно, с открытым исходным кодом), который также доступен в онлайне (платно). Он имеет простой интерфейс drag-n-drop, не перегружает вас кнопками и ползунками и идет вместе с плагином Sketch. К сожалению, ImageOptim вообще не поддерживает прогрессивный JPEG.


ImageMagick может не только оптимизировать, но и обрезать, изменять размеры, вращать, корректировать цвета, применять специальные эффекты к изображениям всех возможных форматов, создавать прогрессивные JPEG-файлы и многое другое.

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


Если вы разработчик веб-интерфейса, работаете в экосистеме Node.js и используете упаковщики ресурсов вроде Webpack, проверьте эти библиотеки: sharp (использует молниеносную libvips-библиотеку обработки изображений) и imagemin.


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


Некоторые CDN автоматически оптимизируют изображения, распознают современные форматы изображений и конвертируют между поддерживаемыми браузерами: Cloudinary, Cloudflare, Cloudimage.


JPEG


Формат JPEG существует с 1992 года — тогда отображение 16 миллионов цветов было большой проблемой. Он использует алгоритм сжатия с потерями и хранит метаданные: размеры, цветовой профиль, EXIF (информацию о настройках камеры) и данные геолокации.


Одна проблема: JPEG так и не научился обращаться с прозрачностью. Артефакты сжатия JPEG настолько заметны, что практически породили новую форму искусства (глитч).


Давайте разберем сжатие JPEG на примере:

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


Но нам все еще нужно сжать его (примерно до 80%), чтобы избежать потери качества. Нам также нужна прогрессивность для улучшения UX. Оценим варианты:


​Сжатие JPEG до 80% с помощью различных инструментов

Но если подобное изображение используется в качестве фона, можно сжать качество до 25% — внимание пользователя всё равно будет на тексте переднего плана.



​Фото на фоне — можно сжать сильнее



Squoosh и ImageMin имеют схожие отличные результаты (потому что они оба используют MozJPEG для сжатия и ImageMagick для квантования). ImageOptim действительно полезен, если вы не хотите добавлять прогрессивности своему изображению, но мы не видим причин, чтобы этого не делать.

Подводя итог, JPEG хорош для использования:


фона;

— больших фото с профессиональной камеры: аватары, баннеры;

изображений, когда сверхточное качество не нужно.


PNG


Формат более гибкий, чем JPEG или GIF, и поддерживает значительно больше параметров сжатия, эффективно сохраняя изображения в зависимости от количества используемых ими цветов. Основные преимущества перед JPEG — поддержка прозрачности и гораздо более высокая четкость, что делает PNG идеальным для отображения компьютерной графики вроде диаграмм и схем. Растрированный текст в PNG тоже выглядит лучше.


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




Чересстрочная развертка здесь не улучшает UX, так как изображение становится больше (и, следовательно, загрузка занимает больше времени). Явный победитель — ImageOptim. Так что PNG идеально подходит:


для изображений, которые должны быть прозрачными;

диаграмм, схем, очень подробных карт, где детали имеют значение;

изображений, содержащих текст.


WebP


WebP — самый молодой статический формат, который поддерживается большинством веб-браузеров (в 2010 году его представила Google). Возможно, единственная причина не переходить на него прямо сейчас — Safari его не поддерживает, поэтому всё ещё нужны запасные варианты PNG или JPEG для такого случая.


Преимущества перевешивают проблемы совместимости. Результаты сжатия WebP без потерь превосходят PNG — сохраняется четкость и прозрачность изображений.


Если вам нужно лучшее от обоих способов, формат WebP может обрабатывать цвета с потерями, обеспечивая при этом альфа-канал без потерь. Он также поддерживает анимацию. Момент триумфа WebP — это сжатие с минимально возможным качеством. WebP с качеством 0% все еще воспринимается вашими глазами намного лучше, чем JPEG с качеством 10%.



​JPEG со сжатием до 10% весь в артефактах и весит 128 КБ, а сжатый до 0% WebP выглядит более плавным и весит 107 КБ.


С качеством 80% изображения визуально неразличимы, но WebP значительно выигрывает в размерах на фоне JPEG. Конвертировать изображение в WebP можно всеми инструментами, кроме ImageOptim.


Для теста с потерями мы проверим картинку с лимонадами JPEG в WebP и проверим:



Конвертирование JPEG в WebP​


Для теста без потерь исходным изображением будет изображение PNG с зелеными овощами выше:



Конвертирование PNG в WebP​


Цифры говорят сами за себя: экономия за счет преобразования в WebP достигает 90% от исходного размера файла. Но, несмотря на все технические достижения WebP, JPEG и PNG никуда не уходят, так как WebP работает только в браузерных средах: если вы сохраните такое изображение на диск, то, скорее всего, не сможете открыть его с помощью ПО для просмотра изображений по умолчанию в вашей системе.


Хаки с видео


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


<video src="path_to_your_one_frame_video" autoplay="true" muted>


Обратите внимание на атрибут muted — в противном случае некоторые браузеры откажутся показывать видео без дополнительной команды пользователя. Если этот экстравагантный подход для вас, взгляните на кодек AV1. Но сначала проверьте, а точно ли можете его использовать.


Анимации в сети


Причина мирового господства GIF — у мира, честно говоря, не было выбора: интернет-браузеры поддерживали GIF с первого дня. Но использование гифок для анимации на странице в 2019 году — невероятно плохая идея.


GIF действительно плохо справляется с межкадровым сжатием, которое поддерживают все современные форматы движущихся изображений. Альтернативой для GIF могут быть APNG (анимированная версия PNG, разработанная в 2008 году) или анимированный WebP, созданный в 2010-м. APNG показывает лучшие результаты как по сжатию, так и по качеству, а WebP все еще может выглядеть немного размытым.


APNG и WebP, хотя и технически более продвинутые, имеют ту же проблему, что и GIF, когда речь идет о межкадровом сжатии. Даже Giphy, любимый сервис анимированных мемов, обычно предлагает альтернативу — видео HTML5. Так что лучше публиковать анимационный контент в виде видеофайлов: либо MP4, либо WebM.


HTML5, MP4 и WebM видеофайлы на самом деле просто контейнеры, в которых хранятся видеоданные, сжатые с помощью множества различных кодеков, таких как H.264 / AVC, H.265 / HEVC или AV1.


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


Проведем тест — конвертируем GIF-картинку в WebP, APNG, AV1 в MP4, H.264 в MP4 и WebM, чтобы определить победителя. Мы будем использовать gif2webp и gif2apng, а также ffmpeg, а GIMP — в качестве альтернативного способа преобразования GIF в WebP.



​Трансформирование гифки в другие форматы


Размер GIF уменьшается на 90% при использовании видеокодеков и на 67% при использовании сжатого WebP от GIMP. Поэтому, если вы хотите сделать интернет быстрее (и лучше), подумайте о том, чтобы всегда использовать MP4 в качестве анимированного изображения вместо GIF. Ведь вам не нужно быть инженером, чтобы уменьшить размер картинок в десять раз!


Спасибо, что прочитали этот материал. Он делает вас гуру веб-дизайна и поясняет все о том, как стоит сжимать изображения и каких именно форматов. Оставайтесь на связи с AdQuantum Design!


Просмотров: 0
logo_small.png