По данным 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.