Привет, коллеги! Меня постоянно спрашивают, как правильно оптимизировать изображения для разных устройств. Давайте разберемся раз и навсегда, чтобы вы больше не теряли время на пробросы писем. Я собрал все ваши вопросы — вот подробный гайд.
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>.
Надеюсь, эта статья сэкономила вам часы гугления. Если остались вопросы — пишите в комментариях! Удачи в верстке! 🚀