Аудит Efficiently encode images

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

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

Снимок экрана с результатами работы аудита Efficiently encode images в Lighthouse

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

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

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

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

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

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

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

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

Drupal

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

Joomla

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

Magento

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

WordPress

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

Ресурсы

Last updated: Improve article

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