HTML5: picture

Элемент picture позволяет более гибко подходит к оформлению сайтов при помощи нескольких изображений. В зависимости от размеров экрана и ориентации можно выводить подходящее изображение, а не пытаться растягивать или сжимать одно изображение. При этом браузер загружает только одно нужно изображение, а не все.

Потренируемя на кошках.

<style>
  img {display: block; margin: 0 auto;}
</style>

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

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

Сам элемент picture не имеет атрибутов. Вся работа сосредоточена в source. В обязательном атрибуте srcset указываем путь к файлу. Также можно указать сразу несколько файлов через запятую с указанием коэффициента разрешния (srcset="kitten.png, [email protected] 2x"). Браузер просматривает source сверху вниз, считывая первый подходящий и игнорируя остальные.

Необязательный атрибут media позволяет указать нужный размер в формате селектора CSS @media.

Необязательный атрибут sizes позволяет задать описатель ширины (sizes="100vw") или медиа-запрос (sizes="(max-width: 30em) 100vw").

Также можно указать список запросов (sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"), в котором последний элемент используется как значение по умолчанию.

Необязательный атрибут type позволяет указать MIME-тип (type="image/webp" или type="image/vnd.ms-photo").

Элемент img выводится в том случае, если не оказалось подходящего изображения в source. Фактически это изображение по умолчанию. Размещайте его всегда последним.

Источник. Там же есть дополнительные примеры.

Реклама