Picture VS Img srcset

1️⃣ srcset

Атрибут (чаще всего у <img>), который даёт браузеру несколько вариантов одной и той же картинки.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 90vw, 800px"
  alt="Описание">

Что делает srcset:

Позволяет браузеру выбрать подходящий размер

Учитывает:

• размер экрана
• плотность пикселей (retina)

Используется для адаптивных изображений

📌 Важно: это один и тот же контент, просто разные размеры.

a) srcset — какие варианты вообще есть

srcset="
  photo-400.jpg 400w,
  photo-800.jpg 800w,
  photo-1600.jpg 1600w"

Здесь ты говоришь браузеру:

«Вот одна и та же картинка, но в трёх размерах:

400px, 800px и 1600px по ширине»

w = реальная ширина файла в пикселях

sizes — какого размера картинка будет на странице

sizes=“(max-width: 600px) 90vw, 800px”

Читается слева направо:

🔹 Условие 1

(max-width: 600px) → 90vw

Если ширина окна ≤ 600px

→ картинка занимает 90% ширины окна

📱 Например:

экран 360px

90vw ≈ 324px

🔹 Условие 2 (fallback)

800px

Если первое условие не подошло

→ считаем, что картинка 800px шириной

💻 Обычно это десктоп

b) Браузер всё складывает вместе

Пример 1: 📱 мобильный

viewport = 360px

sizes → 90vw ≈ 324px

devicePixelRatio = 2 (retina)

👉 нужная реальная ширина:

324 × 2 = 648px

👉 браузер смотрит srcset:

400 ❌ (мало)

800 ✅ (подходит)

1600 ❌ (слишком жирно)

📦 Загружается photo-800.jpg

Пример 2: 💻 обычный ноут

viewport = 1200px

sizes → 800px

DPR = 1

👉 нужно ~800px

📦 photo-800.jpg

Пример 3: 💻 Retina дисплей

viewport = 1200px

sizes → 800px

DPR = 2

👉 нужно:

800 × 2 = 1600px

📦 photo-1600.jpg

c) А зачем тогда src=“photo-800.jpg”?

Он нужен:

• как fallback для старых браузеров
• как запасной вариант, если srcset не поддерживается
• как дефолт до выбора (иногда)

🔥 Ключевая идея (очень важно)

👉 Браузер сам выбирает, ты лишь:

• описываешь варианты
• объясняешь какого размера картинка будет на странице

❌ Ты не контролируешь напрямую, какой файл загрузится

✅ Ты создаёшь условия, чтобы браузер выбрал оптимальный

🧠 Ментальная модель (коротко)

• sizes → какой размер на странице
• умножает на DPR
• srcset → ищет ближайший подходящий файл
• грузит минимально достаточный

2️⃣ <picture>

Используется, когда нужно менять изображение по условиям, а не только размер.

<picture>
  <source srcset="photo.webp" type="image/webp">
  <source srcset="photo.jpg" type="image/jpeg">
  <img src="photo.jpg" alt="Описание">
</picture>

Или, например, под разные экраны:

<picture>
  <source srcset="photo-mobile.jpg" media="(max-width: 600px)">
  <source srcset="photo-desktop.jpg" media="(min-width: 601px)">
  <img src="photo-desktop.jpg" alt="Описание">
</picture>

🔹 Что умеет <picture>:

• Разные форматы (WebP / AVIF / JPEG)
• Разные кадры (кроп под мобильный/десктоп)
• Разные изображения под media queries

📌 <img> внутри — обязательный fallback.

🧠 Короткое сравнение

Anastasiia Berest

Senior Web UI Engineer

I'm a web development passionate about creating meaningful digital experiences.