Аудит Efficiently encode images

В разделе «Возможности» отчета Lighthouse перечислены все неоптимизированные изображения, а также указано, на сколько кибибайтов (КиБ) можно уменьшить их размер. Оптимизируйте такие изображения, чтобы страница загружалась быстрее и на ее передачу уходило меньше трафика:

# Как Lighthouse определяет изображения, которые можно оптимизировать

Lighthouse находит все изображения в формате JPEG или BMP на странице, задает для каждого изображения уровень сжатия 85, а затем сравнивает исходную версию со сжатой. Если потенциальная экономия составляет 4 КиБ или больше, Lighthouse делает пометку, что изображение можно оптимизировать.

# Как оптимизировать изображения

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

• Использование сетей доставки контента (CDN) для изображений
• Сжатие изображений
• Замена анимированных GIF-файлов видеофайлами
• Отложенная загрузка изображений
• Передача адаптивных изображений
• Передача изображений с правильными размерами
• Использование изображений WebP

# Оптимизация изображений с помощью средств с графическим пользовательским интерфейсом

Еще один подход — обрабатывать изображения оптимизатором, который можно установить на компьютер и использовать с помощью графического интерфейса. Например, работая с ImageOptim, можно перетаскивать изображения в пользовательский интерфейс этого средства, и оно будет автоматически сжимать изображения без заметного ухудшения качества. Если у вас небольшой сайт и вы можете вручную оптимизировать все изображения, этого варианта, вероятно, будет достаточно.

Еще один вариант — Squoosh. Это средство поддерживается командой разработчиков Google Web DevRel.

# Рекомендации для разных стеков

# Drupal

Используйте модуль, который автоматически оптимизирует изображения, отправляемые через сайт, уменьшает их размер и не ухудшает их качество. Кроме того, используйте встроенные в Drupal стили адаптивных изображений (доступные в Drupal 8 и более поздних версий) для всех изображений, отображаемых на сайте.

# Joomla

Используйте подключаемый модуль оптимизации изображений, который сжимает изображения, сохраняя при этом их качество.

# Magento

Используйте стороннее расширение Magento, оптимизирующее изображения.

# WordPress

Используйте подключаемый модуль WordPress для оптимизации изображений, который сжимает изображения, сохраняя при этом их качество.

# Ресурсы

• Исходный код аудита Efficiently encode images