Перейти к основному содержимому
Об авторе
Проекты
Знания
Знания/HTML/picture-source

Как работает <picture> и <source>?

СобеседованиеМедиа контентПроизводительность
  • <picture> — контейнер для адаптивных изображений
  • <source> — определяет разные версии изображения
  • Атрибуты <source>: srcset (набор изображений), media (медиа-запросы), type (MIME-тип изображения), sizes (размеры для разных экранов)
  • Использование: адаптивные изображения, поддержка современных форматов (WebP, AVIF), разные изображения для разных устройств
  • Главная
  • Об авторе
  • Проекты
  • Знания
Логотип nKolmykov