Современные форматы: требования Lighthouse
Этот аудит требует использования WebP или AVIF. Вот разметка, которая удовлетворит его требованиям и сохранит работоспособность в старых браузерах.
Предупреждение Lighthouse означает, что вам нужно конвертировать файлы JPEG и PNG в WebP или AVIF, а затем выводить их через элемент picture с оригиналом в качестве резервного варианта. Этот аудит — один из самых простых для прохождения, поскольку исправление носит скорее механический, чем архитектурный характер.
Lighthouse выдает предупреждение, когда находит изображения, размер которых, по его мнению, был бы существенно меньше в современном формате. Оценка основана на загруженном им файле, поэтому сообщаемая экономия обычно вполне достижима, а иногда даже консервативна.
Что измеряет Lighthouse
Lighthouse внутренне перекодирует каждое изображение в WebP и сообщает о разнице, если экономия превышает определенный порог. Число в отчете — это реальная оценка, а не общая рекомендация.
Изображения ниже порогового значения игнорируются, поэтому на странице с 30 изображениями в аудите могут отображаться только 4. Перечисленные файлы — это те, которые стоит исправить в первую очередь. Их устранение обычно полностью убирает предупреждение, даже если другие изображения на странице остаются в старых форматах.
Разметка, которая удовлетворяет требованиям аудита
Используйте элемент picture с AVIF на первом месте, WebP на втором и оригинальным JPEG в теге img. Браузер выбирает первый понятный ему источник, поэтому новые браузеры получают маленький файл, а старые все равно увидят изображение.
Тег img должен оставаться, так как он содержит альтернативный текст, размеры и резервный вариант. Отсутствие атрибутов width и height вызывает сдвиг макета при загрузке изображений, что ухудшает другой показатель Core Web Vitals при исправлении этого. Установите оба атрибута в соответствии с исходным размером резервного изображения в пикселях.
Как пройти аудит
Чтобы правильно устранить предупреждение, выполните следующие 6 шагов.
- Откройте отчет Lighthouse и выпишите изображения, которые в нем указаны — именно они дают измеримую экономию.
- Проверьте отображаемый размер каждого изображения, так как многие из них не только имеют неподходящий формат, но и избыточно велики.
- Измените размер каждого изображения до его реальной ширины отображения, удвоенной для экранов с высокой плотностью пикселей.
- Конвертируйте в WebP с качеством 80, а для самых больших изображений на странице — в AVIF с качеством 65.
- Выводите результаты через элемент picture с оригиналом в качестве резервного варианта в img.
- Повторно запустите Lighthouse, чтобы убедиться, что предупреждение исчезло, а сдвиг макета не появился.
Шаг 3 важнее шага 4. Размеры определяют большую часть размера файла, и слишком большой WebP все равно остается слишком большим изображением. Пакетная конвертация занимает пару минут, в то время как написание разметки обычно требует больше времени.
Какой формат для какого изображения
| Изображение | Рекомендуемый формат | Качество | Причина |
|---|---|---|---|
| Главный баннер (Hero) | AVIF с резервным WebP | от 60 до 70 | Самый большой файл, наибольшая экономия |
| Фотография в статье | WebP | от 75 до 80 | Быстро кодируется, хорошо поддерживается |
| Фотография товара | WebP | 80 | Детализация важна для покупателей |
| Логотип или иконка с прозрачностью | WebP без потерь | Без потерь | Превосходит PNG на 20–30 процентов |
| Иконка менее 5 KB | PNG или SVG | Не применяется | Современные форматы добавляют накладные расходы |
Делает ли это уже ваша платформа
Многие системы управления контентом и хостинги конвертируют изображения автоматически, поэтому проверьте это перед тем, как делать что-то вручную. Выполнение одной и той же работы дважды — распространенная и неэффективная практика.
Проверьте это за 2 минуты. Откройте опубликованную страницу, кликните правой кнопкой мыши по изображению и откройте его в новой вкладке, затем посмотрите на расширение файла в адресной строке. Расширение .webp у файла, который вы загружали как JPEG, означает, что платформа уже выполняет конвертацию. Shopify, большинство управляемых хостингов WordPress и некоторые конструкторы сайтов делают это по умолчанию.
Почему предупреждение иногда возвращается
Новые загрузки снова создают проблему, если процесс конвертации выполняется вручную, а не автоматически. На сайте, приведенном в порядок в январе, к июню снова появится предупреждение, если редакторы будут загружать изображения напрямую с камеры.
Настройте процесс, а не только файлы. Либо включите автоматическую конвертацию на уровне платформы, либо согласуйте простое правило: изображения должны масштабироваться и конвертироваться перед загрузкой. Письменное закрепление этого правила важно для любого сайта, где публикуется более одного человека, поскольку аудит оценивает худшее изображение, а не среднее.
Стоит ли использовать AVIF, WebP или оба формата
На большинстве сайтов используйте только WebP, а AVIF добавляйте только для самых больших изображений на странице. Поддержка обоих форматов удваивает количество файлов, которые нужно создавать, хранить и синхронизировать, ради экономии, которая на обычных изображениях невелика.
Расчет меняется для сайтов с большим количеством фотографий, где AVIF экономит еще 20–30 процентов на файлах, размер которых уже измеряется сотнями килобайт. На странице с главным изображением размером 600 KB это существенное сокращение. На странице с миниатюрами по 40 KB создание дополнительной цепочки обработки требует больше усилий, чем приносит пользы, и одного WebP будет достаточно для прохождения аудита.
Как правильно проверить результат
Запустите Lighthouse повторно в режиме инкогнито с отключенными расширениями, так как расширения браузера искажают результаты измерений. Показатели также меняются от запуска к запуску, поэтому сравните результаты 3 тестов, а не доверяйте одной цифре.
Убедитесь, что браузер действительно получает новый формат, а не просто предполагайте это. Откройте инструменты разработчика, перейдите на вкладку Network, отфильтруйте по изображениям и перезагрузите страницу. В колонке Type будет показано, что именно было отдано. Если после конвертации страница все еще отдает JPEG, это обычно означает, что разметка элемента picture неверна или кэширующий слой отдает предыдущую версию.
Связанные аудиты, которые появляются рядом
- Настройте подходящий размер изображений. Изображение больше, чем область, в которой оно отображается. Измените размер, а не просто сжимайте.
- Эффективно кодируйте изображения. Сжатие слишком слабое. Снизьте настройки качества.
- Отложите загрузку скрытых изображений. Добавьте ленивую загрузку (lazy loading) для изображений ниже первого экрана.
- Элемент Largest Contentful Paint. Обычно это ваше главное изображение, которое требует внимания в первую очередь.
- Элементы изображений не имеют явных значений width и height. Добавьте оба атрибута, чтобы предотвратить сдвиги макета.
Эти 5 аудитов обычно появляются вместе, и изменение размера в сочетании с конвертацией указанных в отчете изображений устраняет большинство из них за один раз.
Насколько это действительно улучшает страницу
Конвертация в современные форматы обычно снижает вес изображений на 25–35 процентов, а предварительное изменение размера часто дает гораздо больше. На страницах с большим количеством графики совокупный эффект часто составляет 70–80 процентов.
Улучшение отражается на показателе Largest Contentful Paint, который измеряет, насколько быстро появляется основной контент. Этот показатель обычно определяется одним изображением, поэтому оптимизация главного файла дает эффект, несоразмерный его доле на странице. Уменьшение 20 маленьких изображений имеет меньшее значение, чем уменьшение 1 большого.
Чего делать не стоит
Не удаляйте резервный вариант JPEG и не конвертируйте изображения, которые пользователи будут скачивать. Обе ошибки меняют реальное удобство использования на незначительное улучшение показателей.
Пресс-киты, руководства для печати, скачиваемые шаблоны и файлы поставщиков должны оставаться в JPEG или PNG, так как WebP плохо поддерживается за пределами браузеров. Предоставление их в современных форматах приведет к обращениям в службу поддержки от людей, которые не могут их открыть, что обойдется дороже сэкономленного трафика.
Конвертация изображений, указанных в отчете
Конвертируйте из оригинальных файлов, а не из уже опубликованных версий, так как сжатый JPEG переносит дефекты сжатия в новый файл. Кодировщик не может отличить существующие артефакты от реальных деталей и тратит биты на их сохранение.
Загрузите до 500 файлов за раз или перетащите ZIP-архив целиком, и весь набор конвертируется за один проход. Все процессы выполняются внутри вашего браузера на вашем собственном процессоре, поэтому клиентские сайты, ресурсы для разработки и неопубликованные страницы никогда не попадут на сервер. Полная конвертация сайта завершается за несколько минут без передачи файлов по сети.
Храните конвертированные файлы рядом с оригиналами под совпадающими именами, чтобы разметку элемента picture можно было генерировать по предсказуемому шаблону, а не редактировать вручную для каждого изображения. Папку, содержащую hero.jpg, hero.webp и hero.avif, легко использовать в шаблонах, и это превратит следующий переход на новый формат в пакетную конвертацию, а не в переписывание каждой страницы.