Адаптивные изображения в HTML: <picture> vs <img> c srcsetответы на ваши частые вопросы и все нюансы работы с изображениями в HTML

Привет, коллеги! Меня постоянно спрашивают, как правильно оптимизировать изображения для разных устройств. Давайте разберемся раз и навсегда, чтобы вы больше не теряли время на пробросы писем. Я собрал все ваши вопросы — вот подробный гайд.


1. Зачем вообще нужны эти теги и в чём их отличие?

Современные устройства имеют экраны с разными разрешениями, плотностью пикселей (например, Retina) и размерами. Если грузить огромное изображение с ПК на мобильный, вы потратите трафик пользователя и замедлите загрузку. Решение — адаптивные изображения:

  • srcset для выбора версии изображения под разрешение экрана.
  • <picture> для кардинальной смены изображения (например, обрезанной версии на мобильных).

Пример проблемы: на десктопе показывается широкий пейзаж, а на телефоне важная деталь (лицо человека) теряется. Здесь нужен <picture>.


2. <img> с srcset и sizes — база

Когда использовать:

  • Если нужно одно изображение, но в разных размерах (например, image-800w.jpg для больших экранов и image-400w.jpg для мобильных).

Как работает:

<img 
  srcset="image-400w.jpg 400w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="image-800w.jpg"
  alt="Пример"
>
  • srcset — список изображений с их реальной шириной (например, 400w = 400px).
  • sizes — правила, какую ширину займет изображение в разных условиях.
    Пример: На экранах ≤600px картинка займет 100% ширины окна, на больших — 50%.

Плюсы:

  • Браузер сам выбирает оптимальное изображение, учитывая DPR (плотность пикселей). Например, для Retina (2x) загрузит версию в 2 раза больше.

3. <picture> — полный контроль

Когда использовать:

  • Арт-дирекшн: разные изображения для разных условий (например, обрезанная версия на мобильных).
  • Поддержка новых форматов (WebP, AVIF) с фолбэком на JPEG.
  • Изменение изображения при темной теме.

Пример:

<picture>
  <source 
    media="(min-width: 1200px)" 
    srcset="desktop.jpg"
  >
  <source 
    media="(min-width: 768px)" 
    srcset="tablet.jpg"
  >
  <img 
    src="mobile.jpg" 
    alt="Адаптивное изображение"
  >
</picture>
  • Браузер проверяет <source> сверху вниз и выбирает первый подходящий вариант.
  • Важно: Всегда добавляйте <img> как фолбэк.

Параметры <source>:

  • media — медиа-запросы (как в CSS).
  • type — MIME-тип (например, image/webp).

4. Частые вопросы

Q: Что будет, если забыть <img> внутри <picture>?
A: Изображение не отобразится. <img> обязателен — он рендерит картинку и работает как фолбэк.

Q: Как проверить, какое изображение загрузилось?
A: Используйте DevTools → Вкладка Network (фильтр Img). Например, в Chrome можно отключить кеш (Disable cache).

Q: Почему srcset не работает в Safari?
A: Некоторые старые версии Safari могут некорректно обрабатывать srcset. В таких случаях <picture> надежнее.

Q: Как комбинировать srcset и <picture>?
A: Внутри <source> можно использовать srcset для разных разрешений:

<source 
  srcset="image-400w.jpg 400w, image-800w.jpg 800w"
  media="(min-width: 600px)"
>

5. Итоги: когда что выбирать

Критерий<img> с srcset<picture>
ЦельОптимизация размераСмена изображения (арт-дирекшн)
Поддержка форматовНетДа (WebP, AVIF)
Контроль загрузкиБраузер решает самВы задаете условия через media
СложностьПрощеТребует точных медиа-запросов

Совет: Начинайте с srcset для базовой оптимизации. Если нужно кардинально менять изображение — переходите на <picture>.


Надеюсь, эта статья сэкономила вам часы гугления. Если остались вопросы — пишите в комментариях! Удачи в верстке! 🚀

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Пролистать наверх