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