Как указать несколько форматов для одной картинки?

Указание нескольких форматов для одной картинки

В современной веб-разработке поддержка нескольких форматов изображений — это ключевая техника для оптимизации производительности и обеспечения кросс-браузерной совместимости. Основной механизм для этого — использование HTML-элемента <picture> в сочетании с тегами <source> и <img>.

Основной синтаксис с использованием <picture>

Элемент <picture> служит контейнером для нескольких источников изображения. Браузер анализирует <source> элементы по порядку и выбирает первый подходящий вариант, используя <img> как фолбэк.

<picture>
  <!-- Предоставление изображения в формате WebP для поддерживающих браузеров -->
  <source srcset="image.webp" type="image/webp">
  <!-- Предоставление изображения в формате AVIF (еще более современный формат) -->
  <source srcset="image.avif" type="image/avif">
  <!-- Фолбэк для старых браузеров (JPEG или PNG) -->
  <img src="image.jpg" alt="Описание изображения">
</picture>

Расширенные возможности: адаптивность и ретинизация

Часто необходимо комбинировать поддержку форматов с адаптивным дизайном (разные размеры для разных экранов) и ретинизацией (изображения для экранов с высокой плотностью пикселей).

<picture>
  <!-- Для экранов с шириной минимум 1024px, поддерживающих WebP -->
  <source 
    media="(min-width: 1024px)"
    srcset="large.webp 1x, large@2x.webp 2x"
    type="image/webp">
  <!-- Для экранов с шириной минимум 1024px, фолбэк -->
  <source 
    media="(min-width: 1024px)"
    srcset="large.jpg 1x, large@2x.jpg 2x"
    type="image/jpeg">
  <!-- Для мобильных устройств, WebP -->
  <source 
    srcset="mobile.webp 1x, mobile@2x.webp 2x"
    type="image/webp">
  <!-- Универсальный фолбэк -->
  <img 
    src="mobile.jpg" 
    srcset="mobile.jpg 1x, mobile@2x.jpg 2x"
    alt="Адаптивное изображение"
    loading="lazy">
</picture>

Ключевые атрибуты и их назначение

• srcset (в <source> и <img>): Определяет набор изображений и их плотность (1x, 2x) или ширину (например, 800w).
• type (в <source>): Указывает MIME-тип формата изображения (например, image/webp, image/avif, image/jpeg). Браузер использует этот атрибут для проверки поддержки формата.
• media (в <source>): Содержит медиа-запрос. Позволяет показывать разные изображения (как по формату, так и по композиции) в зависимости от условий (ширина экрана, ориентация).
• sizes (в <img>): Сообщает браузеру, какую ширину будет занимать изображение при разных условиях макета, чтобы он мог выбрать наиболее подходящий вариант из srcset. Часто используется в сочетании с w-дескрипторами.
• loading="lazy" (в <img>): Включает отложенную загрузку изображения, что улучшает производительность начальной загрузки страницы.

Практический пример с sizes

<picture>
  <source 
    srcset="photo-800.avif 800w, photo-1200.avif 1200w, photo-1600.avif 1600w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/avif">
  <source 
    srcset="photo-800.webp 800w, photo-1200.webp 1200w, photo-1600.webp 1600w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/webp">
  <img 
    src="photo-800.jpg"
    srcset="photo-800.jpg 800w, photo-1200.jpg 1200w, photo-1600.jpg 1600w"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Пример с размерами"
    width="800"
    height="450">
</picture>

В этом примере:

• Браузер сначала попытается загрузить AVIF-формат.
• Если AVIF не поддерживается, выберет WebP.
• В крайнем случае загрузит JPEG.
• Атрибут sizes указывает, что на экранах уже 768px изображение занимает 100% ширины вьюпорта (100vw), а на более широких — только 50% (50vw).
• На основе этого расчета и информации из srcset (где 800w означает, что изображение имеет ширину 800px) браузер выберет наиболее подходящий по размеру файл для текущих условий, избегая загрузки избыточно больших изображений на мобильные устройства.

Важные замечания

• Порядок имеет значение: Располагайте <source> от самого желательного (например, AVIF) к наименее желательному (JPEG/PNG).
• Обязательный <img>: Элемент <img> внутри <picture> обязателен. Он обеспечивает фолбэк и является элементом, который фактически отображается и содержит атрибуты alt, width, height.
• Оптимизация на сервере: Для эффективного использования этой техники необходима предварительная генерация изображений в нескольких форматах и размерах. Это часто делается с помощью сборщиков (Webpack, Vite), CMS или облачных сервисов (Cloudinary, Imgix).
• Баланс качества и скорости: Предоставление современных форматов (AVIF, WebP) может значительно сократить вес страницы (иногда на 25-50% по сравнению с JPEG), что напрямую влияет на Core Web Vitals, особенно на Largest Contentful Paint (LCP).

Использование <picture> для предоставления нескольких форматов — это стандартный, семантически верный и наиболее контролируемый способ обеспечить оптимальную доставку изображений в современном вебе.