Используйте современные форматы изображений
Published on • Updated on
В разделе Opportunities (Возможности) отчета Lighthouse перечислены все изображения в более старых форматах и показана потенциальная экономия, полученная при использовании AVIF-версий этих изображений.
Зачем использовать изображения в формате WebP
AVIF и WebP — это форматы изображений, которые обладают превосходными характеристиками сжатия и качества по сравнению со своими более старыми аналогами JPEG и PNG. Если использовать для кодирования изображений новые форматы, а не JPEG или PNG, это приведет к тому, что изображения будут загружаться быстрее и потреблять меньше мобильного трафика.
AVIF поддерживается в Chrome, Firefox и Opera и обеспечивает меньший размер файлов по сравнению с другими форматами при одинаковых настройках качества. Подробнее об AVIF см. Codelab по использованию изображений в формате AVIF.
Формат WebP поддерживается в последних версиях Chrome, Firefox, Safari, Edge и Opera и обеспечивает лучшее сжатие с потерями и без потерь для изображений в Интернете. Подробнее о WebP см. в статье «Новый формат изображений для Интернета».
Как Lighthouse рассчитывает потенциальную экономию
Lighthouse собирает каждое изображение BMP, JPEG и PNG на странице, а затем конвертирует их в WebP, сообщая о потенциальной экономии на основе коэффициентов конвертации.
Lighthouse исключает изображение из отчета, если потенциальная экономия составляет менее 8 КБ.
Совместимость с браузером
Не все браузеры поддерживают WebP, но аналогичная возможность экономии доступна в большинстве основных браузеров при использовании альтернативного формата нового поколения. Для браузеров, где поддержка ещё не реализована, рекомендуется использовать резервные изображение PNG или JPEG. См. материал «Как определить, поддерживает ли браузер WebP?», чтобы ознакомиться с альтернативными методами. См. также приведенный ниже список поддержки браузерами форматов изображений.
Чтобы узнать о текущей поддержке браузерами каждого формата нового поколения, перейдите по приведенным ниже ссылкам.
Рекомендации по стекам
AMP
Рассмотрите возможность отображения всех amp-img в формате WebP, указав соответствующий резервный вариант для других браузеров.
Drupal
Рассмотрите возможность установки и настройки модуля для использования форматов изображений WebP на вашем сайте. Такие модули автоматически генерируют WebP-версию загруженных изображений для оптимизации времени загрузки.
Joomla
Подумайте об использовании плагина или сервиса, который автоматически конвертирует загруженные вами изображения в оптимальные форматы.
Magento
Рассмотрите возможность поиска на Magento Marketplace различных сторонних расширений, чтобы использовать новые форматы изображений.
WordPress
Подумайте об использовании плагина или сервиса, который автоматически конвертирует загруженные вами изображения в оптимальные форматы.
Ресурсы
Updated on • Improve article