Елемент <picture>
Елемент <picture> використовується для виведення зображень на сторінці і дозволяє надавати декілька варіантів зображень залежно від різних умов, таких як розмір вьюпорту, щільність пікселів та інші характеристики пристрою.
Основна ідея використання <picture> полягає в тому, що можна вкладати в нього елементи <source>, кожен з яких може вказувати своє власне зображення та умови його відображення, а також елемент <img>, який виведе зображення за замовчуванням, якщо жодна з умов не була задоволена.
Але не завжди потрібно використовувати елемент <picture>, інокри просто достатньо респонсивного <img>.
Синтаксис
Елемент <picture> - це контейнер для одного або більше елементів <source>. У елементах <source> перераховують можливі варіанти зображення. Також усередині йде один обов'язковий елемент <img>.
<picture>
<source srcset="" media="" sizes="" type="" />
<source srcset="" media="" sizes="" type="" />
<img src="" alt="" />
</picture>picture - контейнер в якому описують можливі варіанти зображення.
source - браузер перевіряє кожен такий елемент і вибирає той, який найбільше підходить. Браузер для цього аналізує його атрибути srcset, media, sizes і type.
img - застосується це зображення, якщо жоден варіант source не підійде.
Кінцеве зображення завантадиться в полотні, яке займає елемент <img>.
Різні формати зображень
У елементі <picture> можна використовувати зображення сучасних форматів, наприклад webp. Для браузерів, які не підтримують сучасні формати вказують альтернативні формати, наприклад jpg або png. Атрибут type вказує MIME-тип зображення. Застосується той елемент <source>, який найкраще підходить.
У прикладі показано, як вказати браузеру завантажити сучасний формат зображення webp, або його альтернативу в png, якщо формат webp не підтримується.
Всі можливі варіанти зображень перераховують у елементах <source>. Браузер їх послідовно обробляє.
<picture>
<source srcset="picture.webp 1x, picture@2x.webp 2x" type="image/webp" />
<source srcset="picture.jpg 1x, picture@2x.jpg 2x" type="image/jpeg" />
<img src="picture.jpg" alt="Опис зображення" />
</picture>Кадрування (art direction)
Кадрування використовують, коли необхіжно завантажувати різні зображення в залежності від щирини екрану. Наприклад, завантажувати альбомну (landscape) або книжкову (portrait) версію зображення в залежності від орієнтації або роздільної здатності пристрою.
За допомогою атрибуту media можна визначити медіа-запит, який браузер буде аналізувати для вибору елемента <source>. Обиратиметься той елемент, який задовольняє умову.
<picture>
<!-- Зображення для ширини вьюпорту менше або рівне 767px -->
<source media="(max-width: 767px)" srcset="small-image.jpg">
<!-- Зображення для ширини вьюпорту більше 767px та щільністю пікселів 2x -->
<source media="(min-width: 768px) and (min-resolution: 192dpi)" srcset="large-image-2x.jpg">
<!-- Зображення для ширини вьюпорту більше 767px -->
<source media="(min-width: 768px)" srcset="large-image.jpg">
<!-- За замовчуванням виводимо зображення для ширини вьюпорту менше 768px -->
<img src="small-image.jpg" alt="Опис зображення">
</picture><picture>
<source media="(max-width: 600px)" srcset="eifel-400-600.jpg">
<source media="(min-width: 601px)" srcset="eifel-800-500.jpg">
<img src="eifel-800-500.jpg" alt="Опис зображення">
</picture>У цьому прикладі:
При вьюпорті до 600px буде завантажено портретне зображення 400x600.
Для екранів шириною від 601px і ширше, буде завантажено ландшафтне зображення 800x500.
Для підтримки екранів з високою щільністю пікселів, кожному елементу <source> необхідно додати набір зображень з дескрипторами в атрибут srcset, і не забути задати атрибут sizes.
<picture>
<source
media="(max-width: 600px)"
srcset="./eifel-400-600.jpg 400w, ./eifel-800-1200.jpg 800w"
sizes="400px"
/>
<source
media="(min-width: 601px)"
srcset="./eifel-800-500.jpg 800w, ./eifel-1600-1000.jpg 1600w"
sizes="800px"
/>
<img src="./eifel-800-500.jpg" alt="Опис зображення" />
</picture>Покликання:
Last updated