Почти всегда изображения являются самыми большими файлами на сайте, которые могут значительно замедлять загрузку сайта, особенно на мобильных устройствах. Поэтому выбор формата изображений очень важен. Но это не простой выбор, ведь нельзя сказать, что какой-то формат всегда будет лучше другого. Все форматы имеют место на современном сайте, если понимать их особенности и применять там, где это нужно. В то же время, использование даже самого современного формата вслепую может повредить вашему сайту.
В этой статье мы разберем особенности форматов, проведем исследования по сравнению форматов и дадим практические советы по использованию изображений.
Для того чтобы понять смысл и особенности современных форматов, нужно сначала понять особенности классических форматов.
GIF (Graphics Interchange Format)
GIF – это первый формат, который можно назвать именно web-форматом. Ведь он появился в далеком 1987 году как прорыв, позволяющий передавать цветные изображения по очень медленным телефонным линиям.
Этот формат внутри содержит палитру всего из 256 цветов. GIF поддерживает прозрачность, но не полупрозрачность, то есть пиксель либо окрашен (и окрашен в один из 256 цветов, без градиентов), либо нет, что приводит к пикселизированным краям округлых элементов изображения.
Формат использует эффективный (в свое время) алгоритм сжатия без потерь, который очень хорошо работает с большими однотонными областями.
Поэтому этот формат хорошо подходил для простых плоских иконок и логотипов для сайта. Поддержка анимации у него появилась позже.
Сегодня этот формат используют в основном для анимированных изображений. Но время этого формата ушло и сегодня даже полноценное видео может занимать меньше места, чем та же анимация в формате GIF. Поэтому использовать этот формат на сайте можно только в очень специфических ситуациях, когда альтернатива по каким-то причинам будет неприемлемой.
Почему GIF все еще жив?
Все очень просто, это формат, который запустится даже на вашей стиральной машине, благодаря этому он стал идеальным носителем мемов.
JPEG (Joint Photographic Experts Group)
Если GIF был создан для искусственной графики, то JPEG был создан в 1992 году специально для фотографий.
Основной особенностью формата стало сжатие с потерями. Авторы формата решили выбросить все излишнее, учитывая особенности человеческого глаза и того, как наш мозг обрабатывает изображение. Наш глаз гораздо отчетливее видит разницу в яркости, чем в оттенках цветов. Идея в том, чтобы буквально выбросить мелкие нюансы цвета, которые мы все равно не способны различить, оставляя основу картинки четкой.
Алгоритм сжатия использует дискретное косинусное преобразование. Изображение разбивается на блоки 8х8 пикселей и алгоритм анализирует эти блоки и решает какие детали являются шумом, а какие важными объектами.
JPEG не любит текст и логотипы, поскольку он размывает резкие цветовые переходы, чтобы сделать фото плавным.
Каждое сохранение файла JPEG приводит к потерям, поскольку запускается процесс оптимизации. Даже если вы выбираете качество сохранения выше, чем было у исходного файла. Изображение от этого не только не станет лучше, оно обязательно потеряет немного в качестве.
Актуален ли сейчас JPEG?
Однозначно – да. Несмотря на то, что уже давно есть более эффективные форматы, JPEG имеет максимальную поддержку, существует множество инструментов для разноплановой работы с JPEG, этот формат надежен и предсказуем. Он почти безальтернативный для проектов с большим массивом изображений, требующих пакетной обработки.
PNG (Portable Network Graphics)
Если JPEG - это о компромиссах ради веса, то появившийся в 1996 году PNG стал ему полной противоположностью. Его создали как свободный от патентов ответ формату GIF, но он быстро превзошел своего предшественника.
Главная черта PNG - сжатие без потерь. Когда вы сохраняете картинку в PNG, вы можете быть уверены: каждый пиксель останется на своем месте, а цвета не изменятся.
Ключевой особенностью формата стала поддержка альфа-канала (полупрозрачности). Это позволяет создавать мягкие тени, эффекты стекла и идеально гладкие края плавно сливающихся объектов с любым фоном сайта. Никаких зубчатых краев или белой бахрамы, как это было у GIF.
PNG не боится текста, тонких линий и логотипов. Там, где JPEG создает грязные пиксели вокруг букв, PNG оставляет картинку кристально чистой. Но за такое качество приходится платить размером файла. И в случае применения на сайте, нужно осознанно принимать решение об использовании PNG.
Где и когда использовать PNG?
Исторически этот формат часто использовался для логотипов и иконок. Но при появлении формата SVG, PNG для этого применяют редко. Поскольку SVG плохо работает с градиентами, уместно использовать PNG в таких случаях.
Также уместно использовать PNG там, где вы хотите сохранить максимальную четкость и цветопередачу. Например, для изображений ювелирных товаров или портфолио фотографа.
Немного познакомившись с классическими форматами, мы можем перейти к обзору форматов этого тысячелетия.
SVG (Scalable Vector Graphics)
SVG находится в стороне от всех других форматов. Если JPEG и PNG – это сетка из цветных точек, то SVG – это язык геометрии, описывающий линии и кривые.
Первая версия формата SVG появилась в 2001 году как попытка объединить наработки Microsoft и Adobe в открытый стандарт. Тем не менее, формат едва не погиб в тени популярного тогда Flash. Только после того, как iPhone похоронил Flash, и выпустил Retina-дисплеи в 2010-х годах SVG стал применяться на большинстве сайтов.
Главная особенность формата – векторность, а значит бесконечная масштабируемость. Поскольку SVG не знает, что такое пиксель, вы можете растянуть иконку до любого размера и она останется идеально четкой. При этом файл будет весить всего несколько килобайт, потому что для математики не важно, какого размера круг - она просто описывает его радиус и центр.
Также код этого формата можно вставлять прямо в html-документ, что лишает браузер необходимости делать лишние запросы к серверу. А также, на такие иконки можно влиять через css, изменяя цвет при наведении или настраивая анимацию.
WebP (Web Picture)
В 2010 году формат WebP стал первой серьезной попыткой Google переосмыслить стандарты интернета, не сменявшиеся десятилетиями. Цель заключалась в том, чтобы заменить JPEG, PNG и GIF одним универсальным форматом.
Google не создал формат с нуля. Они купили компанию On2 Technologies, разрабатывавшую видеокодеки. В основе WebP лежит технология внутрикадрового сжатия из видеокодека VP8.
Фактически, изображение WebP – это один кадр из видео. Поскольку видеокодеки намного эффективнее фотоформатов, этот подход дал потрясающий результат в весе файлов.
В отличие от JPEG, который просто выбрасывает детали, WebP использует предиктивное сжатие. Алгоритм анализирует соседние блоки пикселей и пытается угадать, что будет дальше. Он записывает не сам пиксель, а разницу между реальным изображением и своим прогнозом. Поскольку эта разница обычно очень мала, данные сжимаются гораздо плотнее.
Итак, что мы имеем? WebP поддерживает анимацию и при этом на 64% эффективнее GIF. WebP поддерживает сжатие без потерь и при этом на 26% эффективнее PNG. WebP поддерживает сжатие с потерями и при этом на 25-34% эффективнее JPEG.
Но есть и минусы. Алгоритм VP8 иногда слишком агрессивно сглаживает текстуру. Там, где в JPEG вы видели зернистость кожи или ткани, WebP может сделать "пластиковую" поверхность.
AVIF (AV1 Image File Format)
AVIF – это самый современный формат, представленный в 2019 году. Он использует сверхмощный видеокодек AV1, над которым работали Google, Apple, Netflix и Amazon.
Как и WebP, AVIF – это один кадр из видео. Он также поддерживает анимацию, сжатие без потерь и с потерями. Но делает он это значительно эффективнее WebP.
AVIF может быть на 50% легче JPEG и на 20-30% легче WebP при визуально одинаковом качестве. Это формат для тех, кто борется за каждый килобайт для идеальных показателей LCP.
В отличие от JPEG, поддерживающего только 8-битный цвет, AVIF может передавать миллиарды оттенков. Это означает, что сложные градиенты будут выглядеть идеально гладкими, без каких-либо "ступенек" цветов.
AVIF гораздо умнее в сложных зонах. Там, где WebP может "замылить" текстуру кожи или ткани, AVIF сохраняет естественную детализацию даже при сильном сжатии.
Но за такой прогресс приходится платить. Сжатие картинки в AVIF требует значительно большего времени и мощности сервера или ПК.
Подводные камни использования новых форматов
Когда знакомишься с теорией новых форматов, все выглядит настолько хорошо, что хочется немедленно перейти на них, но действительно ли вы получите все эти преимущества?
В первую очередь следует иметь в виду, что указанная эффективность актуальна при конвертации из качественного исходного файла. Если вы будете конвертировать уже сжатый файл, то ваш новый файл может занимать больше места, чем исходный или потерять в качестве.
Почему это возможно?
Отсутствие развитых инструментов для работы с WebP и AVIF.
Новые форматы слабо поддерживаются на уровне графических редакторов и инструментов сайта. В подавляющем большинстве случаев у вас будет исходное изображение в классическом формате. Вам его предоставит фотограф либо дизайнер, либо поставщик, либо приобретете на фотостоках и вам нужно будет конвертировать эти изображения. Даже если вам предоставят сразу нужный формат, то вероятно уже конвертированный из классического формата.
В этом случае у нас появляется куча вопросов к конвертору, потому что у большинства конверторов нет никаких настроек. А мы помним, что формат поддерживает сжатие как с потерями, так и без. Так с какими настройками сжатия нам выдаст изображение конвертер? И это мы говорим только о сжатии, а если посмотреть на инструменты, в которых есть настройки формата, то мы увидим по меньшей мере десяток настроек, которые нужно понимать.
Итак, при неконтролируемой конвертации мы можем получить или увеличенные файлы или ухудшенные, но оптимальная конвертация крайне маловероятна.
Суть сжатия с потерями
Сжатие с потерями предполагает, что файл будет содержать меньше информации о пикселе или группе пикселей. Это не обязательно связано с тем, как выглядит ваше изображение. Например, если вы сохраните изображение на 20% качества и оно станет размытым, а затем пересохраните (с конвертацией или без) на 100% качества, то изображение останется таким же размытым, но будет занимать больше места. Просто файл будет содержать много информации о размытых пикселях.
Демонстрация вариантов сжатия и конвертации
Для наглядного понимания давайте попробуем сравнить эффективность обработки изображений разными инструментами. Для этого я возьму три качественных изображения и конвертирую их в фотошопе, нескольких простых web-конверторах и инструментом squoosh.app.
Скачать архив со всеми результатами
Скачать архив со всеми результатами
Скачать архив со всеми результатами
А теперь давайте проведем ту же процедуру, но исходным файлом для нас будет jpg, сохраненный с 60% качества.
Скачать архив со всеми результатами
Скачать архив со всеми результатами
Скачать архив со всеми результатами
На основе проведенных тестов можно сделать ключевой вывод: современные форматы не магическая таблетка, а их эффективность критически зависит от исходного изображения и настроек. Наибольшей ошибкой является конвертация уже сжатых файлов в режиме без потерь (Lossless) - в таком случае алгоритмы пытаются идеально сохранить артефакты предыдущего сжатия, что приводит к парадоксальному росту веса файла до 700%.
Также стоит отметить, что JPEG, хоть и проигрывает в большинстве случаев, он все еще выглядит по меньшей мере приемлемым или даже конкурентоспособным. Главный инсайт состоит в том, что контроль над сжатием и выбор эффективного инструмента важнее названия формата. Автоматические плагины, особенно на стороне CMS, проигрывают ручному контролируемому сжатию. Поэтому слепое желание соответствовать рекомендациям Google и интернет-маркетологов может увеличить вам файлы, и это может быть еще не самое плохое побочное действие.
Как на практике использовать современные форматы AVIF и WebP?
Для использования новых форматов нужно в первую очередь подумать о поддержке этих форматов.
Поддержка форматов устройствами пользователей
Можно ли пользователи воспроизводить новые форматы?
Да, современные устройства и браузеры уже умеют с ними работать, но iPhone с ios 15 и более старые не могут воспроизвести AVIF. Хотя таких пользователей и немного, если вы рассчитываете на эту аудиторию, то не используйте этот формат.
Поддержка форматов на стороне CMS
Что означает поддержка формата движком сайта?
Чтобы не трогать код, мы можем свести поддержку к трем функциям CMS:
- Файл-менеджер движка знает эти форматы, он может показать их на сервере и правильно вставить на сайт.
- Текстовый редактор сайта не должен воспринимать эти форматы как ошибочные или опасные файлы и должен воспроизводить их непосредственно в окне оедактора.
- Если CMS делает ресайзы изображений (например, изображений товаров), то он должен уметь работать с алгоритмом этого формата.
Если ваш сайт имеет такую поддержку, вы можете подготовить файлы в новых форматах и загрузить их на сайт. Если вы будете готовить изображение в других форматах, то формат изображения на сайте должен соответствовать тому, который вы загрузили.
Если ваш сайт не поддерживает работу с новым форматом, можно установить инструменты конвертации. То есть, ваш движок будет фактически работать с классическими форматами, но сторонний плагин будет создавать копию изображения в новом формате и отображать его на сайте.
Где именно на сайте следует применять новые форматы изображений (WebP и AVIF)
Банеры
Банеры — обычно самые большие изображения на странице, которые сильно влияют на показатель LCP. Поскольку они готовятся вручную, это одно из лучших мест для использования AVIF или WebP. Здесь можно добиться существенного уменьшения веса при сохранении высокого качества.
Фоновые изображения
Большие фоновые изображения часто очень тяжелые. Их тоже следует переводить в новые форматы, но делать это нужно осторожно. Не конвертируйте «в лоб» уже сильно сжатые JPEG-файлы – иногда после конвертации размер только растет. Всегда проверяйте результат: новый файл должен быть заметно легче.
Изображения для статей и новостей
В статьях и новостях количество изображений обычно невелико, и на их подготовку есть время. Здесь хорошо работает использование AVIF. Даже если на странице 5–10 иллюстраций, при правильной оптимизации страница будет все равно загружаться быстро.
Изображение товаров в интернет-магазинах
Для товарных изображений новые форматы часто оказываются менее эффективными. Причин несколько:
- Большинство фото приходит от поставщиков уже в сжатом JPEG. Повторная конвертация в WebP или AVIF во многих случаях не дает выигрыша в размере, а иногда даже увеличивает вес файла.
- При тысячах товаров очень трудно контролировать качество конвертации каждого изображения.
- Если у вас есть собственная студийная съемка в хорошем качестве (хороший JPEG или PNG), тогда имеет смысл настраивать массовую конвертацию в современные форматы.
Риски автоматической конвертации изображений на сайте
Риск увеличения файлов
Даже если вы проверите вручную несколько файлов и увидите, что конвертируемые изображения в новых форматах занимают меньше места, не со всеми изображениями может получиться так же и в общем размер может значительно увеличиться.
Риск потери визуального качества
С одними и теми же настройками конвертация может выдать файлы как в хорошем визуальном состоянии, так и с сильными артефактами. При автоматической конвертации большого количества файлов вы теряете над этим контроль.
Увеличение объема файлов на диске
Обычно при конвертации файлов на сайте сохраняется и исходный файл в классическом формате. В результате вы по меньшей мере вдвое увеличиваете объем файлов на сервере.
Лимиты inode
Если вы используете shared hosting, то у вас есть лимиты inode. Inode – это как ячейка памяти. Даже если файл занимает 0 байт, или у вас есть пустая папка, они занимают 1 inode. Если вы увеличили количество файлов за счет конвертированных, рискуете превысить свои лимиты.
Эффективность против нагрузки
Для конвертации изображений прямо на сайте необходимы вычислительные ресурсы процессора. Чем эффективнее будет сжатие, тем больше нагрузка на процессор. Так что, по сути, вы стоите перед выбором: либо не эффективное сжатие, либо рискнуть положить сайт.
Что в заключении?
Любая оптимизация должна действительно что-то оптимизировать, а не просто изменять название файла.
Как и с классическими форматами нужно понимать когда и где их использовать, так и с новыми. Но с новыми надо гораздо больше внимания, потому что они значительно более сложны и гибки. AVIF и WebP дают нам невероятные возможности, но ими нужно уметь воспользоваться.