В чем разница между img и picture?

Разница между img и picture

img и picture — это два способа вставить изображение в HTML, но они решают разные задачи. Если img — это просто элемент для отображения картинки, то picture — это контейнер с логикой для выбора нужного изображения.

img элемент

img — это базовый, самый простой способ вставить изображение. Элемент загружает одну картинку и отображает её.

<img src="photo.jpg" alt="My photo" width="800" height="600">

Характеристики

• Один источник (src)
• Простой и понятный синтаксис
• Браузер сам выбирает как отобразить изображение
• Автоматическое масштабирование на разных устройствах (если используется CSS)

Недостатки

• Нельзя выбрать разные изображения для разных устройств
• Нельзя загрузить разные форматы (WebP для современных браузеров, JPG для старых)
• На мобильных устройствах загружается полное изображение (неэффективно для мобильного трафика)

picture элемент

picture — это контейнер, который содержит несколько источников и позволяет браузеру выбрать подходящий в зависимости от:

• Размера экрана (responsive images)
• Типа устройства (portrait/landscape)
• Поддерживаемого формата (WebP, JPEG, AVIF)
• Плотности пикселей (retina дисплеи)

<picture>
  <!-- Для современных браузеров (WebP формат) -->
  <source srcset="photo-800w.webp 800w, photo-1200w.webp 1200w" 
          type="image/webp"
          media="(min-width: 768px)">
  
  <!-- Для старых браузеров (JPEG формат) -->
  <source srcset="photo-800w.jpg 800w, photo-1200w.jpg 1200w" 
          type="image/jpeg"
          media="(min-width: 768px)">
  
  <!-- Для мобильных -->
  <source srcset="photo-400w.jpg" 
          media="(max-width: 767px)">
  
  <!-- Fallback для очень старых браузеров -->
  <img src="photo-800w.jpg" alt="My photo" width="800" height="600">
</picture>

Характеристики

• Несколько источников (source элементы)
• Браузер автоматически выбирает подходящее изображение
• Поддержка разных форматов
• Оптимизация для мобильных устройств
• img элемент всегда находится внутри как fallback

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

• Разные изображения для разных размеров экрана
• Поддержка новых форматов (WebP, AVIF) со старым fallback (JPEG)
• Оптимизация трафика (не грузить большие картинки на мобильных)
• Art direction (разные кадры для разных устройств)

Практическое сравнение

Сценарий 1: Одно изображение на всех устройствах

<!-- img — идеально подходит -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

Сценарий 2: Разные размеры картинки для разных устройств

<!-- picture — правильный выбор -->
<picture>
  <source media="(min-width: 1024px)" srcset="photo-1200.jpg">
  <source media="(min-width: 768px)" srcset="photo-800.jpg">
  <img src="photo-400.jpg" alt="Photo">
</picture>

Сценарий 3: Разные форматы для разных браузеров

<!-- picture для оптимизации формата -->
<picture>
  <!-- WebP для современных браузеров (меньший размер) -->
  <source srcset="photo.webp" type="image/webp">
  <!-- AVIF для самых современных браузеров (ещё меньше) -->
  <source srcset="photo.avif" type="image/avif">
  <!-- JPEG fallback для старых браузеров -->
  <img src="photo.jpg" alt="Photo">
</picture>

Важные атрибуты picture

<picture>
  <!-- srcset с дескрипторами плотности (retina) -->
  <source srcset="photo.jpg 1x, photo@2x.jpg 2x" type="image/jpeg">
  
  <!-- srcset с дескрипторами ширины (responsive) -->
  <source srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
          type="image/jpeg">
  
  <!-- media для media queries -->
  <source srcset="photo-mobile.jpg" media="(max-width: 768px)">
  <source srcset="photo-desktop.jpg" media="(min-width: 768px)">
  
  <!-- Fallback -->
  <img src="photo.jpg" alt="Photo">
</picture>

Таблица сравнения

Best Practices для production

<!-- Оптимальная структура picture для modern web -->
<picture>
  <!-- Самый новый и компактный формат -->
  <source srcset="hero-desktop.avif, hero-desktop@2x.avif 2x" 
          type="image/avif"
          media="(min-width: 768px)">
  
  <!-- Хороший компромисс между качеством и размером -->
  <source srcset="hero-desktop.webp, hero-desktop@2x.webp 2x" 
          type="image/webp"
          media="(min-width: 768px)">
  
  <!-- Мобильная версия WebP -->
  <source srcset="hero-mobile.webp" 
          type="image/webp"
          media="(max-width: 767px)">
  
  <!-- JPEG fallback для старых браузеров (мобильная версия) -->
  <source srcset="hero-mobile.jpg" 
          media="(max-width: 767px)">
  
  <!-- Финальный fallback -->
  <img src="hero-desktop.jpg" alt="Hero image" width="1200" height="600" loading="lazy">
</picture>

Вывод

• img — для простых случаев, когда одно изображение для всех
• picture — когда нужна оптимизация: разные размеры, форматы, devices
• picture экономит мобильный трафик и улучшает Core Web Vitals
• Всегда добавляйте img как fallback внутри picture
• Используйте WebP/AVIF для современных браузеров, JPEG как fallback