Выбирайте размер изображений правильно
Published on • Updated on
В разделе Opportunities (Возможности) отчета Lighthouse перечисляются все изображения на проверяемой странице, размер которых не соответствует требованиям, а также потенциальная экономия в кибибайтах (КиБ). Измените размер этих изображений, чтобы сэкономить данные и сократить время загрузки страницы:
Как Lighthouse определяет изображения слишком большого размера
Lighthouse сравнивает размер каждого отрисованного изображения на странице с размером фактического изображения. При отрисовке изображения также учитывается соотношение сторон в пикселях на устройстве. Если размер отрисованного изображения меньше размера фактического изображения как минимум на 4 КиБ, то изображение не проходит проверку.
Стратегии правильного выбора размера изображений
В идеале ваша страница не должна содержать изображения, размер которых превышает размер изображений, отображаемых на экране пользователя. Это приводит к напрасной трате байтов и замедляет время загрузки страницы.
Современный подход к предоставлению изображений правильного размера получил название «отзывчивые изображения». При использовании отзывчивых изображений вы создаете несколько версий каждого изображения, а затем с помощью медиа-запросов указываете, какую версию применять в HTML или CSS, а также прописываете размеры области просмотра и так далее. Дополнительные сведения см. в статье «Предоставляйте отзывчивые изображения».
CDN для изображений — это ещё один современный подход к предоставлению изображений подходящего размера. CDN для изображений можно рассматривать в качестве веб-API для преобразования изображений.
Другой подход заключается в применении векторных форматов изображений, таких как SVG. Изображения в формате SVG можно масштабировать до любого размера с помощью небольшого объема кода. Дополнительные сведения см. в разделе «Замените сложные значки на SVG-иконки».
Такие инструменты, как gulp-responseive или response-images-generator, помогут автоматизировать процесс преобразования изображения в несколько форматов. Существуют также CDN для изображений, которые позволяют генерировать несколько версий изображения либо при его загрузке, либо при его запросе со страницы.
Рекомендации по стекам
AMP
Применяйте атрибут srcset для компонента amp-img, чтобы указать, какие файлы изображений использовать в зависимости от размера экрана. См. также статью «Создание отзывчивых изображений с помощью атрибутов srcset, sizes и heights».
Angular
Подумайте об использовании утилиты BreakpointObserver из Component Dev Kit (CDK) для управления точками останова.
Drupal
Используйте встроенный модуль Responsive Image (доступный в Drupal 8 и выше) при рендеринге изображений в зависимости от области просмотра, а также для изображений, загружаемых через WYSIWYG-редактор.
Gatsby
Используйте плагин gatsby-image, чтобы создать несколько изображений меньшего размера для смартфонов и планшетов. С помощью плагина также можно создавать заполнители для изображений на основе SVG для эффективной отложенной загрузки.
Joomla
Подумайте об использовании плагина для отзывчивых изображений.
WordPress
Загружайте изображения непосредственно в Media Library, чтобы убедиться в наличии изображений требуемых размеров. Затем вставляйте их из Media Library или используйте виджет изображений, чтобы обеспечить использование изображений оптимальных размеров (в том числе для точек останова отзывчивости). Избегайте использовать полноразмерные изображения, кроме случаев, когда такой вариант обоснован. См. статью «Вставка изображений в публикации и на страницы».
Ресурсы
Updated on • Improve article