Изображения

Современный формат изображений WebP

Для HTML

<picture>
    <source type="image/webp" srcset="image@1x.webp, image@2x.webp 2x, image@3x.webp 3x" />
    <source type="image/jpeg" srcset="image@1x.jpg, image@2x.jpg 2x, image@3x.jpg 3x" />
    <source type="image/png" srcset="image@1x.png, image@2x.png 2x, image@3x.png 3x" />
    <img src="URL@1x.jpg" alt="" width="" height="" loading="lazy" />
</picture>

<img src="image@1x.png" srcset="image@2x.png 2x, image@3x.png 3x" alt="" width="" height="" loading="lazy" />

Для фоновых картинок

.block {
  background-image: url("image@1x.png");
  @media (min-resolution: 2dppx) {
    background-image: url("image@2x.png");
  }
  @media (min-resolution: 3dppx) {
    background-image: url("image@3x.png");
  }
}

.block {
  background-image: image-set("image@1x.png" 1x, "image@2x.png" 2x, "image@3x.png" 3x);
}

У функции image-set()есть несколько особенностей:

Браузеры на webkit требуют наличия префикса -webkit-image-set()
В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url(), т.е. background-image: (url("platypus.png" 1x));
Пока что не во всех браузерах есть полная поддержка этой функции. Поэтому перед использованием проверьте, поддерживают ли её нужные вам браузеры с помощью сервиса Caniuse.com.

media

Атрибут media позволяет определить медиавыражение, которое веб-браузер будет анализировать для выбора элемента <source>. Если медиавыражение определяется как ложное (false), то элемент <source> пропускается.

media="(min-width: 769px)"
media="(max-width: 1024px)"
media="(min-width: 769px) and (max-width: 1024px)"
media="(prefers-color-scheme: dark)"

type

Атрибут type позволяет вам обозначить MIME-тип данных, указанных в атрибуте srcset элемента <source>. Если браузер не поддерживает данный тип, то элемент <source> опускается.

image/webp
image/jpeg
image/png
image/svg+xml