< H / $ > Хак/Собесов

Перейти на PRO

Какой HTML тег реализовывает поддержку разных форматов изображений

«Какой HTML тег реализовывает поддержку разных форматов изображений» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Разработчик

Ответ

Тег <picture> позволяет адаптировать изображения под разные устройства, предоставляя альтернативные версии в разных форматах. Внутри него используются <source> с атрибутами srcset и type, а также <img> как fallback.

Пример:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Описание">
</picture>

Браузер выберет первый поддерживаемый формат. Если ни один не поддерживается, загрузится <img>. Особенно полезно для современных форматов (WebP, AVIF) с фолбэком на JPEG/PNG.