Показ оптимизированных декоративных изображений

Веб-функции: image-set()

Оптимизация декоративных изображений, загружаемых с помощью CSS, позволяет улучшить воспринимаемую производительность без ущерба для качества. С помощью функции CSS image-set() вы можете предоставить браузеру несколько вариантов одного фонового изображения или маски. Вы можете указать современные форматы (например, AVIF или WebP) и разные разрешения (например, 1x и 2x). Браузер динамически выберет наименьшее совместимое изображение, которое обеспечивает подходящую плотность пикселей для устройства пользователя.

ВНИМАНИЕ! Если изображение, скорее всего, является элементом Largest Contentful Paint (LCP), например большим баннером, помните, что изображения, на которые ссылается CSS через image-set(), не обнаруживаются сканером предварительной загрузки браузера. Это может значительно замедлить загрузку изображений и ухудшить показатель LCP. Для кандидатов на LCP рекомендуется использовать стандартный HTML-тег <img> или <picture>. Также можно предварительно загрузить изображение, используя параметр <link rel=preload> с атрибутом media.

Реализация

Функция image-set() используется везде, где CSS ожидает значение <image>, чаще всего в background-image, content или mask-image. Обратите внимание, что хотя указание как графического формата с помощью type(), так и разрешения (например, 1x или 2x) дает наилучшие результаты, оба этих аргумента являются необязательными. 

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

Резервные стратегии

Для старых браузеров, которые не поддерживают функцию image-set(), НЕОБХОДИМО предоставить стандартное объявление изображения перед правилом image-set(). Эта стратегия прогрессивного улучшения основана на каскадном характере CSS: неподдерживаемые правила игнорируются.

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}