Аудит 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 для оптимизации изображений, который сжимает изображения, сохраняя при этом их качество.