На большинстве веб-сайтов изображения занимают самую большую долю общего веса страницы, значительно опережая код или шрифты. Выбранный для этих изображений формат поэтому напрямую влияет на скорость загрузки, а следовательно и на впечатления посетителей, а также на показатели Core Web Vitals, которые отслеживает Google. Два современных формата, AVIF и WebP, постепенно заменили классический JPEG на хорошо оптимизированных сайтах, но выбор между ними зависит от контекста, а не от универсального ответа.
Что реально даёт каждый формат
JPEG, исторический формат фотографического веба, остаётся универсально совместимым, но создаёт заметно более тяжёлые файлы, чем новые форматы при эквивалентном визуальном качестве. WebP, разработанный Google, значительно снижает вес файлов по сравнению с JPEG, сохраняя при этом почти универсальную совместимость с современными браузерами. AVIF, более новый формат, идёт ещё дальше в сжатии, обычно давая файлы легче, чем эквивалентные им WebP при схожем воспринимаемом качестве, а также поддерживает возможности, недоступные WebP, такие как широкая цветовая гамма, полезная для профессиональной фотографии.
Компромисс между сжатием и совместимостью
AVIF сегодня демонстрирует высокий уровень совместимости с современными браузерами, но по-прежнему хуже поддерживается, чем WebP, в некоторых настольных приложениях, таких как отдельные программы просмотра изображений или офисные пакеты, что может стать проблемой, если изображения сайта также предназначены для скачивания и локального открытия посетителями. Кодирование изображения в AVIF также требует больше вычислительной мощности, чем WebP, что может замедлить автоматизированную обработку изображений на сайте с большим каталогом товаров.
Рекомендуемая стратегия для большинства сайтов
Для сайта-визитки или обычного блога самая надёжная практика — не привязываться окончательно к одному формату, а использовать HTML-элемент picture, который позволяет предложить несколько версий одного изображения и дать браузеру посетителя автоматически выбрать версию, наиболее подходящую его возможностям, с порядком предпочтения от AVIF к WebP и затем к JPEG как к последнему варианту. Такой подход гарантирует полную совместимость, включая посетителей со старым или менее распространённым браузером, не жертвуя приростом производительности для большинства посетителей с современными браузерами.
Особый случай WordPress
Уже несколько версий подряд WordPress автоматически конвертирует некоторые изображения в WebP при загрузке, без ручного вмешательства. Чтобы пойти дальше с AVIF и более тонким управлением резервными форматами, специализированные плагины оптимизации изображений берут на себя эту автоматическую конвертацию и генерацию соответствующих тегов picture, избавляя от утомительной ручной работы над каждым изображением сайта.
Случаи, где JPEG или PNG остаются актуальными
PNG сохраняет свою полезность для изображений, требующих прозрачности в сочетании с идеальной точностью цвета, а также для скриншотов и графики с чётким текстом — случай, когда форматы со сжатием с потерями могут создавать заметные артефакты. JPEG также сохраняет своё место там, где универсальная совместимость важнее всего, например для вложений, предназначенных для открытия в старом настольном программном обеспечении, или для печатных потоков — двух контекстов, совершенно отличных от веб-отображения.
Выбор, зависящий от контента, а не от единого правила
Сайт, ориентированный на профессиональную фотографию, или каталог товаров с очень детализированными изображениями получает больше пользы от продвинутых возможностей AVIF, чем средний сайт-визитка. И наоборот, сайт с ограниченным объёмом изображений и предпочтением технической простоты может обойтись одним WebP, получив уже весьма заметный прирост производительности по сравнению с сайтом, всё ещё полностью использующим неоптимизированный JPEG.
Что стоит проверить перед публикацией: подтвердить на момент публикации текущие показатели совместимости браузеров с AVIF и WebP, поскольку эти цифры меняются с обновлениями браузеров, и проверить, что описание нативного поведения WordPress в отношении автоматической конвертации изображений остаётся точным для текущей версии.