Используйте современные форматы изображений

Published on Updated on

Translated to: English, Português

В разделе Opportunities (Возможности) отчета Lighthouse перечислены все изображения в более старых форматах и показана потенциальная экономия, полученная при использовании AVIF-версий этих изображений.

Скриншот проверки Lighthouse «Используйте современные форматы изображений»

Зачем использовать изображения в формате 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

Подумайте об использовании плагина или сервиса, который автоматически конвертирует загруженные вами изображения в оптимальные форматы.

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.