Є контейнер для зберігання декількох елементів <source>, які підтримують елемент <img>. Це дозволяє вказувати різні зображення з урахуванням розміру екрана, щільності пікселів, формату зображення та інших параметрів. Ось кілька сфер застосування <picture> (від англ. picture — картинка, зображення):
- для екранів ретина можна показувати зображення більшого розміру;
- виводити зображення різного розміру для мобільних та настільних пристроїв;
- відображати зображення різних пропорцій, що враховують орієнтацію пристрою;
- виводити зображення у векторному форматі SVG, а для браузерів , його не підтримують, показувати PNG.
Синтаксис
<picture> ; <source> <img> </picture>
Всередині <picture> міститься нуль або кілька елементів < ;source>, які йдуть перед одним елементом <img>.
Закриває тег
Обов'язковий.
Атрибути
Для цього елемента доступні універсальні атрибути та події.
При заходів
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>picture</title> </head> <body> <picture> <source srcset="image/html5-logo.svg"> <img src="image/html5-logo.png" width="256" height="256" alt="HTML5"> </picture> </body> </html>
У цьому прикладі використовується два зображення: одне у форматі SVG, а друге у звичному PNG. Браузери, які підтримують елемент <picture>, відобразять зображення у векторному вигляді (мал. 1). Браузер IE покаже зображення у форматі PNG (мал. 2). Для наочності логотип дано розміром 128х128 пікселів і збільшено до 256х256. /p>
Мал. 1. Картинка у форматі SVG
Мал. 2. Картинка у форматі PNG
Специфікація
| Специфікація | Статус |
|---|---|
| WHATWG HTML Living Standard | Живий стандарт |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Особняком стоїть живий стандарт HTML (Living) — він не дотримується традиційної нумерації версій, оскільки перебуває в постійній розробці та оновлюється регулярно.
Браузери
| 13 | 38 | 25 | 9.1 | 38 |
| 38 | 35 | 9.3 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — елемент повністю підтримується браузером;
- — елемент браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок , або елемент підтримується із застереженнями.
Число вказує версію браузреа, починаючи з якої елемент підтримується.