HTML-тег `picture`

Откройте для себя основы работы с изображениями и HTMLpictureтег, и как сделать их адаптивными

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

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

Наилучший вариант использования, который я обнаружил, - это обслуживание изображения WebP, который до сих пор широко не поддерживается. вpictureвы указываете список изображений, и они будут использоваться по порядку, поэтому в следующем примере браузеры, поддерживающие WebP, будут использовать первое изображение, а в противном случае вернутся к JPG:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

Вsourceтег определяет один (или несколько) форматов изображений. Вimgтег является запасным вариантом на случай, если браузер очень старый и не поддерживаетpictureтег.

вsourceтег внутриpictureвы можете добавитьmediaатрибут для установки медиа-запросов.

Следующий пример похож на предыдущий пример сsrcset:

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

Но это не его вариант использования, потому что, как видите, он намного более подробный.

Вpictureтег недавний, но сейчасподдержанныйвсеми основными браузерами, кроме Opera Mini и IE (все версии).

Скачать мою бесплатнуюСправочник по HTML


Дополнительные руководства по HTML:


Tech Wiki Online!