По данным HTTP Archive изображения составляют более 60% данных, загружаемых на сайт. Большие изображения замедляют работу вашего веб-сайта, что создает далеко не оптимальное взаимодействие с пользователем. В этом посте я предложу предложения по оптимизации изображений на вашем сайте.
Ленивая загрузка с атрибутом loading
Ленивая загрузка — это метод, который откладывает загрузку некритических ресурсов во время загрузки страницы. Вместо этого эти некритические ресурсы загружаются в момент необходимости. Chrome и Firefox поддерживают ленивую загрузку с атрибутом loading
. Этот атрибут можно добавить к <img>
элементам, а также к <iframe>
элементам. Значение lazy
указывает браузеру немедленно загрузить изображение, если оно находится в области просмотра, и загружать другие изображения, когда пользователь прокручивает их рядом.
<img src="cat.jpg" loading="lazy"/>
Асинхронное декодирование
Тег <img>
может включать в себя атрибут decoding
, с помощью которого мы можем указать браузеру, следует ли декодировать изображение синхронно или асинхронно. Атрибут async
будет декодировать изображение асинхронно. Рендеринг страницы и декодирование изображения будут выполняться параллельно. Это, очевидно, ускоряет отображение страницы.
<img src="cat.jpg" decoding="async"/>
Совокупный сдвиг макета (CLS)
Кумулятивное смещение макета (CLS) — это метрика Core Web Vitals, измеряющая нестабильность контента путем суммирования оценок сдвига по сменам макета, которые не происходят в течение 500 мс после ввода пользователем. Он смотрит, насколько видимый контент сместился в области просмотра, а также на расстояние, на которое были смещены затронутые элементы.
Одной из наиболее частых причин плохого CLS являются изображения без размеров. Всегда включайте атрибуты размера width
и height
в изображения и видеоэлементы. В качестве альтернативы зарезервируйте необходимое пространство с помощью полей соотношения сторон CSS. Такой подход гарантирует, что браузер сможет выделить правильное количество места в документе во время загрузки изображения.
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<!-- 16:9 aspect ratio -->
<img src="cat.jpg" width="640" height="360"/>
Адаптивные изображения
С srcset
браузер сам определяет, какое изображение лучше. Определяет несколько размеров одного и того же изображения, позволяя браузеру выбрать соответствующий источник изображения.
<!-- density descriptor --> <img src="cat.jpg" srcset="cat.jpg, cat_2x.jpg 2x" />
<!-- or width descriptor --> <img src="cat.jpg" srcset="cat-small.jpg 300w, cat-medium.jpg 600w, cat-large.jpg 900w" />
WebP-изображения
WebP — это формат изображений, разработанный и впервые выпущенный Google в 2010 году. Изображения WebP меньше, чем их аналоги JPEG и PNG — обычно на величину уменьшения размера файла на 25–35%. Это уменьшает размер страницы и повышает производительность. Люди обычно используют один из следующих подходов для преобразования своих изображений в WebP: инструмент командной строки cwebp или плагин Imagemin WebP (пакет npm). Плагин Imagemin WebP, как правило, является лучшим выбором, если в вашем проекте используются сценарии сборки или инструменты сборки (например, Webpack или Gulp), тогда как CLI — хороший выбор для простых проектов или если вам нужно преобразовать изображения только один раз.
<img src="cat.webp" />
Однако, поскольку он не всегда поддерживается (см. http://caniuse.com/#feat=webp), вы можете использовать его для установки запасного варианта:
<picture>
<source srcset="cat.webp" type="image/webp">
<source srcset="cat.jpg" type="image/jpeg">
<img src="cat.jpg">
</picture>
CDN для доставки изображений
Сеть доставки контента (CDN) — это глобальная сеть серверов, оптимизирующая производительность сети за счет использования ближайшего к пользователю узла для более быстрой доставки ресурсов. Image CDN добавляет обнаружение устройств и оптимизацию изображений перед доставкой изображений из CDN. Image CDN уменьшает полезную нагрузку изображений, доставляет изображения, адаптированные точно для каждого запрашивающего устройства, и мгновенно отправляет изображения с границы сети. Результатом является более быстрая загрузка страниц, что повышает рейтинг SEO и улучшает взаимодействие с пользователем.
Некоторые CDN для оптимизации изображений: Imgix, Cloudinary, Akamai Image Manager, ImageEngine. И API: Kraken.io, Imagify, ShortPixel, Fastly Image Optimizer, TinyPNG.