Developer

Изображения и медиа: srcset, picture, lazy loading

↑ 1.2 HTML · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Изображения — основной вес страницы: важно уметь отдавать нужный размер и формат.

Объяснение

<!-- Адаптивные размеры: браузер выбирает подходящий файл -->
<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="1600" height="900" alt="Описание" loading="lazy" decoding="async">
 
<!-- Разные форматы и «арт-дирекшн» -->
<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <img src="hero.jpg" alt="Описание" width="1600" height="900">
</picture>
ПриёмЭффект
srcset + sizesнужный размер под экран и плотность пикселей
<picture>выбор формата (AVIF/WebP) и разные кадры
loading="lazy"отложенная загрузка вне экрана (не для LCP-изображения)
width/heightрезервирует место, нет сдвигов (CLS)
decoding="async", fetchpriorityприоритеты для главного изображения
SVGвекторные иконки, стили через CSS
<video>, <audio>controls, preload, poster, playsinline, несколько source
CDN и трансформацииресайз, сжатие, форматы «на лету»

Форматы: JPEG (фото), PNG (прозрачность), WebP/AVIF (лучше сжатие), SVG (иконки), GIF → видео mp4/webm.

Нюансы и подводные камни

  • loading="lazy" на главном изображении ухудшает LCP.
  • Без размеров изображение сдвигает вёрстку при загрузке.
  • alt обязателен: осмысленный для контента, пустой (alt="") для декоративных.
  • Огромные оригиналы на маленьких экранах — лишний трафик.
  • Автовоспроизведение видео со звуком блокируется браузерами.

Практика

  1. Подготовьте три размера и форматы AVIF/WebP для изображения и подключите через picture.
  2. Измерьте LCP до и после оптимизации.
  3. Настройте lazy loading для галереи.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки