Каким образом можно указать различные форматы изображений?

Для указания различных форматов изображений в веб-разработке используются следующие подходы:

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

   <picture>
     <source srcset="image.webp" type="image/webp"> // Предлагаем WebP
     <img src="image.jpg" alt="Описание изображения"> // Фоллбэк для старых браузеров
   </picture>
   

2. Атрибут srcset элемента <img>: Используется для указания списка источников изображений с различными размерами или плотностями пикселей, а также для предложения разных форматов.

   <img src="image.jpg"
        srcset="image.webp 1x, image@2x.webp 2x"
        alt="Описание изображения">
   

   В данном случае srcset предлагает image.webp для обычных дисплеев и image@2x.webp для ретина-дисплеев, при этом браузер может выбрать WebP, если поддерживает.

3. Заголовки HTTP: Сервер может использовать заголовок Accept из запроса клиента, чтобы понять, какие форматы изображений поддерживает браузер, и отправить наиболее оптимальный формат в ответе с заголовком Content-Type.

4. CSS: С помощью медиа-запросов @media можно использовать разные фоновые изображения для разных контекстов (например, для экранов с поддержкой высокого DPI). Хотя это не прямой способ указать разные форматы, в сочетании с серверной логикой или элементами <picture> может использоваться для адаптивной загрурки изображений.

Какой метод использовать, зависит от конкретной задачи, поддерживаемых браузеров и инфраструктуры. <picture> и srcset являются стандартными HTML-подходами для клиента, тогда как управление форматами на сервере через HTTP-заголовки обеспечивает большую гибкость.