<img srcset>

srcset - декілька зображеннь різного розміру.

Синтаксис:

<img srcset="URL1 DENSITYx, URL2 DENSITYx, ..., URLn DENSITYx"> <img srcset="URL1 WIDTHw, URL2 WIDTHw, ..., URLn WIDTHw">

Параметри:

<img> - тег <img>.

URL1, URL2, URLn - URL адреса файлу зображення.

DENSITYx - щільність пікселів. Позамовчуванню 1x.

WIDTHw - ширина у пікселях. Наприклад 100px: 100w.

Опис:

srcset атрибут тегу <img> який вказує декілька файлів зображення різного розміру.

Використовується для адаптивного зображення, щоб браузер вибирав оптимальне зображення відповідно до розміру екрану, розміру вікна браузера.

У атрибуті srcset вказується декіль параметів адаптивності зображення розділених комою. Кожен параметр містить:

URL адресу зображення
додатковий дескриптор, який може вказувати:
- дексриптор ширини w
- дексриптор щільності пікселів x

Можливо використовувати тільки атрибут srcset, або атрибут srcset з sizes.

Якщо браузер не підтримує атрибут srcset або вказані параметри не підходять то зображення буде завантажено з URL адреси атрибута src.

HTML5 vs HTML4

Атрибут srcset входить у специфікацію HTML5.

Приклад:

Приклад з вказуванням ширини:

<img src="/_images/textura_2048x1365.png" srcset="/_images/textura_300x204.png 300w, /_images/textura_768x524.png 768w, /_images/textura_1024x796.png 1024w, /_imsges/textura_2048x1365.png 2048w">

Приклад з вказуванням щільності:

<img src="/_images/textura_1024x796.png" srcset="/_images/textura_300x204.png 1x, /_images/textura_768x524.png 2x, /_images/textura_1024x796.png 3x, /_images/textura_2048x1365.png 4x">