Responsive image

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Описание изображения"
  loading="lazy"
>

Пояснение

srcset перечисляет варианты файлов с их реальной шириной (w). sizes сообщает браузеру, какую ширину займёт изображение в макете — на основе этого браузер выбирает лучший вариант из srcset.

• Для art direction (разное кадрирование на мобильном и десктопе) используйте <picture> с несколькими <source>.

Похожие инструменты