<img>: Елемент вбудовування зображень
Елемент HTML <img>
вбудовує в документ зображення.
Спробуйте його в дії
Приклад вище демонструє використання елемента <img>
:
- Атрибут
src
є required (обов'язковим) і містить шлях до зображення, котре має бути вбудоване. - Атрибут
alt
зберігає текстову заміну для зображення, яка є обов'язковою та приголомшливо корисною для доступності: читачі з екрана зачитують своїм користувачам значення атрибута, щоб вони знали, що означає зображення. Альтернативний текст також виводиться на сторінці, якщо зображення з якоїсь причини не може бути завантажене: наприклад, через мережеві помилки, блокування вмісту чи гниття посилань.
Є чимало інших атрибутів для досягнення різних цілей:
- Контроль посилача/CORS для безпеки й приватності: дивіться
crossorigin
йreferrerpolicy
. - Щоб задати зображенню його природний розмір, слід задати й атрибут
width
, і атрибутheight
: це дасть змогу зарезервувати для зображення місце й уникнути зсувів компонування вмісту. - Підказки чуйності зображень за допомогою
sizes
іsrcset
(також дивіться елемент<picture>
і наш підручник Чуйні зображення).
Підтримувані формати зображень
Стандарт HTML не перелічує, які формати зображень слід підтримувати, тому користувацькі агенти можуть підтримувати різні формати.
[!NOTE]
Настанови з типів файлів та форматів надають всебічну інформацію про формати зображень та їх підтримку веббраузерами. Цей розділ – лишень стислий конспект!
Формати файлів зображень, що найбільш поширені у Вебі:
- APNG (анімована переносна мережева графіка) — Добрий вибір для послідовностей анімації без втрат (GIF має меншу ефективність)
- AVIF (формат файлів зображень AV1) — У зв'язку з високою ефективністю є добрим вибором і для простих, і для анімованих зображень.
- GIF (формат обміну графікою) — Добрий вибір для простих зображень та анімацій.
- JPEG (зображення Об'єднаної експертної групи з фотографій) — Добрий вибір для стиснення зі втратами нерухомих зображень (наразі найпопулярніший).
- PNG (переносна мережева графіка) — Добрий вибір для стиснення без втрат нерухомих зображень (дещо краща якість, ніж в JPEG).
- SVG (масштабована векторна графіка) — Векторний формат зображень. Його слід використовувати для зображень, що повинні бути точно відтворені в різних розмірах.
- WebP (формат вебзображень) — Чудовий варіант як для простих, так і анімованих зображень
Формати штибу WebP та AVIF є рекомендованими, адже вони мають набагато кращу ефективність, ніж PNG, JPEG, GIF, як для нерухомих, так для анімованих зображень.
SVG залишається рекомендованим форматом для зображень, що повинні бути точно відтворені в різних розмірах.
Помилки завантаження зображень
Якщо помилка трапляється при завантаженні чи візуалізації зображення, і якщо був встановлений обробник помилки onerror
для події error
, то такий обробник помилки буде викликаний. Це може статися в декількох ситуаціях, в тому числі:
- Коли атрибут
src
є порожнім (""
) або має значенняnull
. - Коли URL в атрибуті
src
дорівнює URL сторінки, на котрій знаходиться користувач. - Коли зображення якимсь чином зіпсовано, через що не може бути завантажене.
- Коли метадані зображення зіпсовані в такий спосіб, що неможливо отримати його розміри, і – жодні розміри не вказані в атрибутах елемента
<img>
. - Коли зображення має формат, що не підтримується користувацьким агентом.
Атрибути
Цей елемент включає глобальні атрибути.
alt
Визначає текст, що може замінити зображення на сторінці.
[!NOTE] Браузери показують зображення не завжди. Є низка ситуацій, в яких браузер може не показувати зображення, наприклад:
- Коли браузер є невізуальним (штибу тих, котрими користуються люди з розладами зору)
- Коли користувач вирішує не виводити зображень (для економії пропускної здатності, з міркувань приватності)
- Коли зображення є недійсним чи має непідтримуваний тип
В таких випадках браузер може замінити зображення текстом з атрибута
alt
елемента. З цих та інших міркувань, слід надавати змістовне значенняalt
завжди, коли це можливо.Надання цьому атрибутові порожнього рядка (
alt=""
) вказує на те, що це зображення не є ключовою частиною вмісту (є прикрасою чи пікселем стеження) і що невізуальні браузери можуть упустити його при візуалізації. Візуальні браузери також приховають піктограму зламаного зображення, якщо атрибутalt
є порожнім і зображення не вийшло відтворити.Цей атрибут також використовується при копіюванні й вставленні зображення в текст, а також збереженні пов'язаного зображення в закладку.
attributionsrc
задає те, що браузер повинен надіслати вкупі з запитом на зображення заголовок
Attribution-Reporting-Eligible
.На серверному боці такий заголовок використовується для запуску надсилання у відповіді заголовка
Attribution-Reporting-Register-Source
абоAttribution-Reporting-Register-Trigger
, щоб зареєструвати засноване на JavaScript джерело атрибуції або пускача атрибуції відповідно. Те, який заголовок відповіді слід надсилати у відповідь, залежить від значення заголовкаAttribution-Reporting-Eligible
, що спричинив реєстрацію.Відповідне джерело або пускач подій створюється тоді, коли браузер отримує відповідь, що містить файл зображення.
[!NOTE] Дивіться подробиці в API звітування атрибуції. Є дві версії цього атрибуту:
- Булева, тобто просто запис
attributionsrc
. Це задає те, щоб заголовокAttribution-Reporting-Eligible
надсилався тому самому серверу, на який посилається атрибутsrc
. Це годиться, коли джерело атрибуції чи реєстрація пускача обробляється на тому самому сервері. Під час реєстрації пускача атрибуції ця властивість не обов'язкова, і за її опущення використовується значення пустого рядка. - Значення, що вміщає один або кілька URL, наприклад:
<img src="image-file.png" alt="Опис мого файлу зображення" attributionsrc="https://a.example/register-source https://b.example/register-source" />
Це корисно в тих випадках, коли запитаний ресурс не перебуває на сервері під вашим контролем або просто хочеться обробляти реєстрацію джерела атрибуції на іншому сервері. Тоді можна задати одну або більше адрес URL як значення
attributionsrc
. Коли відбувається запит на ресурс, заголовокAttribution-Reporting-Eligible
надсилається на адреси URL, задані вattributionSrc
, а не лише за походженням ресурсу. Ці адреси URL потім можуть відповісти заголовкомAttribution-Reporting-Register-Source
абоAttribution-Reporting-Register-Trigger
відповідно для завершення реєстрації.[!NOTE] Задання кількох адрес URL означає те, що на один елемент можна зареєструвати кілька джерел атрибуції. Можна, наприклад, мати різні кампанії, для вимірювання успішності яких потрібно генерувати різні звіти щодо різних даних.
- Булева, тобто просто запис
crossorigin
Вказує, що отримання зображення повинно виконуватися за допомогою запиту із CORS. Дані зображення із CORS, повернені з запиту CORS, можуть бути повторно використані в елементі
<canvas>
, не бувши позначеними як "ославлені".Якщо атрибут
crossorigin
– не вказаний, то надсилається запит без CORS (без заголовка запитуOrigin
), і браузер позначає зображення як ославлене й обмежує доступ до його даних, запобігаючи його використанню в елементах<canvas>
.Якщо атрибут
crossorigin
присутній, то надсилається запит із CORS (з заголовком запитуOrigin
); але якщо сервер не погоджується дозволити доступ до даних зображення для стороннього походження (не надсилаючи жодного заголовка відповідіAccess-Control-Allow-Origin
, або ж не включивши походження сайту в жодному надісланому заголовку відповідіAccess-Control-Allow-Origin
), то браузер блокує завантаження зображення і виводить помилку CORS в консоль інструментів розробника.Дозволені значення:
anonymous
(анонімний)Запит із CORS надсилається без авторизації (тобто без реп'яшків, сертифікатів X.509 і заголовка запиту
Authorization
).use-credentials
Запит із CORS надсилається із будь-якою активною авторизацією (тобто з реп'яшками, сертифікатами X.509 та заголовком запиту
Authorization
). Якщо сервер не погоджується поділитися авторизацією з сайтом походження (надіславши назад заголовок відповідіAccess-Control-Allow-Credentials: true
), то браузер позначає зображення як ославлене й обмежує доступ до його даних.
Якщо цей атрибут має недійсне значення, то браузери обробляють його так, ніби використано значення
anonymous
. Дивіться Атрибути налаштувань CORS для отримання додаткової інформації.decoding
Цей атрибут дає браузеру підказку щодо того, чи повинен він виконувати декодування зображення при візуалізації іншого вмісту DOM в одному кроці відображення, що виглядає більш "правильно" (
sync
), чи візуалізувати та відображати інший вміст DOM спочатку, а потім декодувати зображення і відобразити його пізніше (async
). На практиціasync
означає, що наступне малювання не чекає, поки зображення декодується.Нерідко складно помітити який-небудь суттєвий ефект, коли
decoding
використовується на статичних елементах<img>
. Ймовірно, вони спершу візуалізуються як порожні зображення, поки отримуються файли зображень (або з мережі, або з кешу), а потім так чи інакше обробляються незалежно, тож "синхронізація" оновлень вмісту – менш помітна. Однак блокування візуалізації під час декодування, хоча й невелике, може бути виміряне – навіть якщо важко помітити його людським зором. Дивіться більш докладний аналіз у Що насправді робить атрибут image decoding? (tunetheweb.com, 2023).Використання різних типів
decoding
може призвести до більш помітної різниці при динамічному вставлянні елементів<img>
у DOM засобами JavaScript – дивіться подробиці вHTMLImageElement.decoding
.Дозволені значення:
sync
Декодувати зображення синхронно, вкупі з візуалізацією решти вмісту DOM, та показати все разом.
async
Декодувати зображення асинхронно, після візуалізації, а показати інший вміст DOM.
auto
Немає побажань щодо режиму декодування; браузер вирішує, що найкраще для користувача. Це усталене значення.
elementtiming
Позначає зображення для відстеження з боку API
PerformanceElementTiming
. Задане значення стає ідентифікатором відстежуваного елемента зображення. Дивіться також сторінку атрибутаelementtiming
.fetchpriority
Надає підказку щодо відносного пріоритету при отриманні зображення. Дозволені значення:
high
Сигналізує про високий пріоритет отримання відносно інших зображень.
low
Сигналізує про низький пріоритет отримання відносно інших зображень.
auto
Усталене значення: сигналізує про автоматичне визначення пріоритету отримання відносно інших зображень.
height
Природна висота зображення, в пікселях. Мусить бути цілим числом без одиниць вимірювання.
[!NOTE] Задання
height
іwidth
дає браузерові змогу обчислити співвідношення сторін зображення до того, як воно завантажене. Це співвідношення використовується для резервування простору, необхідного для виведення зображення, частково або навіть повністю запобігаючи зсувові компонування сторінки при завершенні завантаження й візуалізації зображення. Зменшення зсуву компонування – важлива деталь доброго користувацького досвіду й швидкодії вебсторінки.ismap
Цей булів атрибут вказує, що зображення є частиною серверної карти. Якщо це так, то координати, в яких користувач клацнув на зображення, надсилаються на сервер.
[!NOTE] Цей атрибут дозволений лише тоді, коли елемент
<img>
є нащадком елемента<a>
з дійсним атрибутомhref
. Це надає користувачам без вказівних пристроїв запасний напрям переходу.loading
Вказує, як браузер повинен завантажувати зображення:
eager
:Завантажує зображення негайно, незалежно від того, чи знаходиться зображення наразі в межах області перегляду (це значення – усталене).
lazy
:Відкладає завантаження зображення, поки воно не досягне обчисленої відстані від області перегляду, визначеної браузером. Задумом є уникнення використання мережевого з'єднання й пропускної здатності сховища, необхідних для обробки зображення, поки не настане певність, що воно знадобиться. Це загалом покращує швидкодію вмісту в найтиповіших ситуаціях.
[!NOTE] Завантаження відкладається лише тоді, коли ввімкнений JavaScript. Така особливість є заходом запобігання стеженню, тому що якби користувацький агент підтримував ледаче завантаження при вимкнених сценаріях, то було й надалі можливо відстежити приблизну позицію прокрутки користувача протягом сесії, стратегічно розташовуючи зображення в розмітці сторінки, щоб сервер міг відстежувати, скільки зображень завантажувалися й коли. [!NOTE] Зображення, чий атрибут
loading
має значенняlazy
, не завантажуються, якщо не перетинаються з видимою частиною елемента, навіть якщо їх завантаження змінило б це, оскільки незавантажені зображення маютьwidth
іheight
, що дорівнюють0
. Заданняwidth
іheight
на зображеннях з ледачим завантаженням виправляє цю проблему та є доброю практикою, яку рекомендує специфікація. Також це допомагає запобігти зсувам компонування.referrerpolicy
Рядок, що вказує, якого посилача слід використовувати при отриманні ресурсу:
no-referrer
: ЗаголовокReferer
не буде надісланий.no-referrer-when-downgrade
: ЗаголовокReferer
не буде надісланий на ті походження, що не мають TLS (HTTPS).origin
: Надісланий посилач буде обмежений походженням сторінки, що містить посилання: її схемою, хостом та портом.origin-when-cross-origin
: Посилач, надісланий іншим походженням, буде обмежений схемою, хостом та портом. Переходи в межах того самого походження включатимуть увесь шлях.same-origin
: Посилач буде надісланий, якщо збігається походження, натомість запити між різними походженнями не міститимуть інформації про посилача.strict-origin
: Надсилати як посилач походження документа, коли рівень протоколу захисту залишається сталим (HTTPS→HTTPS), але не надсилати його за менш захищеною адресою (HTTPS→HTTP).strict-origin-when-cross-origin
(усталене значення): Надсилати увесь URL при виконанні запиту за тим само походженням, надсилати лише походження, коли рівень протоколу захисту залишається сталим (HTTPS→HTTPS), і не надсилати заголовка за менш захищеною адресою (HTTPS→HTTP).unsafe-url
: Посилач включатиме походження та шлях (але не фрагмент, пароль чи ім'я користувача). Це значення є небезпечним, тому що воно пропускає походження та шляхи з захищених TLS ресурсів до незахищених походжень.
sizes
Один чи більше рядків, розділених комами, що вказують набір розмірів джерела. Кожен розмір джерела складається із:
- Умови медіа. Повинна бути опущена для останнього елемента списку.
- Значення розміру джерела.
Умови медіа описують властивості області перегляду, а не зображення. Наприклад,
(max-height: 500px) 1000px
пропонує використати джерело ширини 1000px, якщо область перегляду не вища за 500px.Значення розмірів джерела вказують бажаний виведений розмір зображення. Користувацькі агенти використовують розмір джерела, щоб обрати одне з джерел, наданих в атрибуті
srcset
, коли ці джерела описані за допомогою дескрипторів (w
). Обраний розмір джерела впливає на intrinsic size зображення (розмір виведення зображення, коли не застосовується оформлення CSS). Якщо немає атрибутаsrcset
, або якщо в ньому немає значень з дескриптором ширини, то атрибутsizes
ні на що не впливає.src
URL зображення. Обов'язковий для елемента
<img>
атрибут. В браузерах, що підтримуютьsrcset
,src
враховується як зображення-кандидат з дескриптором піксельної щільності1x
, якщоsrcset
зображення з таким дескриптором піксельної щільності не визначене вsrcset
і якщоsrcset
не містить дескрипторівw
.srcset
Один чи більше рядків, розділених комами, що вказують можливі джерела зображення для використання користувацьким агентом. Кожен рядок складається із:
-
URL зображення
-
(Необов'язково) пробілу, після якого – один з двох варіантів:
- Дескриптор ширини (додатне ціле число, після котрого зразу стоїть літера
w
). Дескриптор ширини ділиться на розмір джерела, наданий атрибутомsizes
, для обчислення активної піксельної щільності. - Дескриптор піксельної щільності (додатне число з рухомою комою, після котрого зразу стоїть літера
x
).
- Дескриптор ширини (додатне ціле число, після котрого зразу стоїть літера
Якщо дескриптор не вказаний, то джерело отримує усталений дескриптор –
1x
.Некоректно змішувати дескриптори ширини й дескриптори піксельної щільності в одному атрибуті
srcset
. Повторювані дескриптори (наприклад, два джерела з однаковимsrcset
, що обидва описані як2x
) – також недійсні.Якщо атрибут
srcset
використовує дескриптори ширини, то атрибутsizes
також повинен бути присутній, інакше –srcset
буде ігноруватися.Користувацький агент обирає будь-яке з доступних джерел на свій розсуд. Це дає йому значну свободу дій, щоб адаптувати свій вибір на основі речей штибу користувацьких налаштувань чи умов пропускної здатності. Дивіться наш підручник Чуйні зображення для отримання прикладів.
-
width
Природна ширина зображення в пікселях. Повинна бути цілим числом без одиниць вимірювання.
usemap
Частковий URL (починається з
#
) карти зображення, пов'язаної з елементом.[!NOTE] Не можна використовувати цей атрибут, якщо елемент
<img>
знаходиться всередині елемента<a>
чи<button>
.
Нерекомендовані атрибути
align
Шикує зображення відносно контексту навколо. Натомість слід використовувати властивості CSS
float
іvertical-align
. Дозволені значення атрибута:top
Еквівалентно щодо
vertical-align: top
чиvertical-align: text-top
middle
Еквівалентно щодо
vertical-align: -moz-middle-with-baseline
bottom
Усталене значення, еквівалентно щодо
vertical-align: unset
чиvertical-align: initial
left
Еквівалентно щодо
float: left
right
Еквівалентно щодо
float: right
border
Ширина меж навколо зображення. Натомість слід використовувати властивість CSS
border
.hspace
Кількість пікселів відступу зліва і справа зображення. Натомість слід використовувати властивість CSS
margin
.longdesc
Посилання на більш докладний опис зображення. Прийнятними значеннями є URL і
id
елемента.[!NOTE] Цей атрибут згадується в останній версії W3C, HTML 5.2, але був прибраний з Живого стандарту HTML WHATWG. Він має непевне майбутнє; авторам слід використовувати альтернативи WAI-ARIA, наприклад,
aria-describedby
чиaria-details
.name
Ім'я елемента. Натомість слід використовувати атрибут
id
.vspace
Кількість пікселів відступу згори та знизу зображення. Натомість слід використовувати властивість CSS
margin
.
Оформлення засобами CSS
<img>
є заміщеним елементом; його властивість display
має усталене значення inline
, але його усталені розміри визначаються природними розмірами його зображення, як ніби значення було б inline-block
. На зображенні можна встановлювати властивості штибу border
/border-radius
, padding
/margin
, width
, height
тощо.
<img>
не має базової лінії, тож коли зображення використовуються в рядковому контексті форматування із vertical-align: baseline
, то низ зображення розміщується на базовій лінії тексту.
Для розташування зображення всередині рамок елемента можна використовувати властивість object-position
, а властивість object-fit
– для припасування розмірів зображення всередині рамок (наприклад, щодо того, чи повинно зображення повністю вміщатися в рамках чи повністю їх заповнювати навіть тоді, коли це призведе до обрізання).
Залежно від свого типу, зображення може мати природні ширину й висоту. Для певних типів зображень, утім, природні розміри – необов'язкові. Наприклад, зображення SVG не мають природних розмірів, якщо їх кореневий елемент <svg>
не має встановлених width
і height
.
Доступність
Створення змістовних альтернативних описів
Значення атрибута alt
повинно надавати ясну та стислу текстову заміну для вмісту зображення. Воно не повинно описувати присутність самого зображення чи ім'я файлу зображення. Якщо атрибут alt
навмисно упущений через те, що зображення не має текстового еквівалента, слід розглянути варіанти представлення того, що зображення намагається повідомити, в інший спосіб.
Так робити не варто
<img alt="зображення" src="penguin.jpg" />
А так – варто
<img alt="Пінгвін чубатий стоїть на узбережжі." src="penguin.jpg" />
Коли атрибут alt
не присутній на зображенні, певні читачі з екрана можуть оголосити натомість ім'я файлу зображення. Це може плутати, якщо ім'я файлу не відповідає вмістові зображення.
- Дерево рішення alt • Зображення • Підручники з вебдоступності WAI
- Альтернативний текст: Повний посібник — Axess Lab
- Як створити чудовий альтернативний текст | Deque
- MDN Розуміння WCAG, пояснення Настанов 1.1
- Розуміння критерію успіху 1.1.1 | W3C Розуміння WCAG 2.0
Впізнання SVG як зображення
У зв'язку з вадою VoiceOver VoiceOver не оголошував коректно зображення SVG як зображення. Слід додавати role="img"
до всіх елементів <img>
з SVG файлами, щоб пересвідчитися, що допоміжні технології коректно оголошують SVG як вміст-зображення.
<img src="webdoky.svg" alt="ВебДоки" role="img" />
Атрибут title
Атрибут title
не є прийнятною заміною атрибута alt
. Крім того, слід уникати дублювання значення атрибута alt
в атрибуті title
, оголошеному на тому самому зображенні. Це призвело б до того, що певні читачі з екрана оголосили б один і той же текст двічі, спантеличуючи користувачів.
Атрибут title
також не слід використовувати як додатковий підпис, що супроводжує опис зображення в alt
. Якщо зображення потребує підпису, слід використовувати елементи figure
і figcaption
.
Значення атрибута title
зазвичай представляють користувачеві як спливну підказку, котра з'являється невдовзі після того, як курсор зупиняється над зображенням. Хоч це може надати користувачеві додаткову інформацію, не слід виходити з припущення, що користувач таку підказку побачить: користувач може мати лише клавіатуру або лише сенсорний екран. Якщо певна інформація точно є важливою чи цінною для користувача, її слід вбудувати за допомогою одного зі способів, перелічених вище, а не атрибута title
.
Приклади
Альтернативний текст
Наступний приклад вбудовує в сторінку зображення і включає альтернативний текст для потреб доступності.
<img src="favicon144.png" alt="ВебДоки" />
Посилання-зображення
Цей приклад заснований на попередньому, він показує, як перетворити зображення на посилання. Щоб це зробити, слід помітити тег <img>
всередину <a>
. Слід описати в альтернативному тексті ресурс, на котрий вказує посилання, так, як це було б зроблено із текстовим посиланням.
<a href="https://webdoky.org">
<img src="favicon144.png" alt="Відвідайте ВебДоки" />
</a>
Використання атрибута srcset
В цьому прикладі є атрибут srcset
із вказівкою на версію логотипа з високою роздільністю; вона буде завантажена замість зображення src
на пристроях з високою роздільною здатністю. Зображення src
рахується як кандидат 1x
на тих користувацьких агентах, що підтримують srcset
.
<img src="favicon72.png" alt="ВебДоки" srcset="favicon144.png 2x" />
Використання атрибутів srcset і sizes
Атрибут src
ігнорується користувацькими агентами, що підтримують srcset
, коли включені дескриптори w
. Коли дає збіг умова медіа (max-width: 600px)
, то завантажується зображення ширини 200 (це те зображення, що найближче до умови 200px
), інакше – завантажується інше зображення.
<img
src="clock-demo-200px.png"
alt="Поточний час – 12:45."
srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw" />
[!NOTE] Щоб побачити зміну розміру в дії, перегляньте приклад на окремій сторінці, щоб мати змогу справді змінити розмір області вмісту.
Занепокоєння щодо безпеки та приватності
Хоч елементи <img>
мають безневинні застосування, вони можуть мати небажані наслідки для безпеки й приватності користувачів. Дивіться Заголовок посилача: занепокоєння щодо приватності й безпеки для отримання докладнішої інформації й шляхів до залагодження.
Технічний підсумок
Категорії вмісту |
Потоковий вміст,
оповідальний вміст,
вбудований вміст,
дотиковий вміст. Якщо елемент має атрибут usemap , то він також є частиною категорії інтерактивного вмісту.
|
---|---|
Дозволений вміст | Жодного; це пустий елемент. |
Упускання тегів | Мусить починатися з початкового тега і не мати кінцевого тега. |
Дозволені батьківські елементи | Будь-який елемент, що приймає вбудований вміст. |
Неявна роль ARIA |
|
Дозволені ролі ARIA |
|
Інтерфейс DOM | HTMLImageElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-img-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
img
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
align
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
alt
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
Aspect ratio computed from width and height attributes
|
Chrome Full support 79 | Edge Full support 79 | Firefox Full support 71 | Internet Explorer No support Ні | Opera Full support 66 | Safari Full support 15 | WebView Android Full support 79 | Chrome Android Full support 79 | Firefox for Android Full support 79 | Opera Android Full support 57 | Safari on iOS Full support 15 | Samsung Internet Full support 12.0 |
border
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
crossorigin
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
decoding
|
Chrome Full support Так | Edge Full support 79 | Firefox Full support 63 | Internet Explorer No support Ні | Opera Full support Так | Safari Full support 11.1 | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 63 | Opera Android Full support Так | Safari on iOS Full support 11.3 | Samsung Internet Full support Так |
fetchpriority
|
Chrome Full support 101 | Edge Full support 101 | Firefox No support Ні | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android Full support 101 | Chrome Android Full support 101 | Firefox for Android No support Ні | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
height
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
hspace
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
ismap
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
loading
|
Chrome Full support 77 | Edge Full support 79 | Firefox Full support 75 | Internet Explorer No support Ні | Opera Full support 64 | Safari Full support 15.4 | WebView Android Full support 77 | Chrome Android Full support 77 | Firefox for Android Full support 79 | Opera Android Full support 55 | Safari on iOS Full support 15.4 | Samsung Internet Full support 12.0 |
longdesc
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
name
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
onerror
|
Chrome Full support Так | Edge Full support 79 | Firefox Full support 51 | Internet Explorer Сумісність невідома; будь ласка, оновіть. ? | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support 51 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
referrerpolicy
|
Chrome Full support 51 | Edge Full support 79 | Firefox Full support 50 | Internet Explorer No support Ні | Opera Full support 38 | Safari Full support 14 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox for Android Full support 50 | Opera Android Full support 41 | Safari on iOS Full support 14 | Samsung Internet Full support 7.2 |
sizes
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
src
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
srcset
|
Chrome Full support 34 | Edge Full support 18 | Firefox Full support 38 | Internet Explorer No support Ні | Opera Full support 21 | Safari Full support 8 | WebView Android Full support 37 | Chrome Android Full support 34 | Firefox for Android Full support 38 | Opera Android Full support 21 | Safari on iOS Full support 8 | Samsung Internet Full support 2.0 |
usemap
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
Content is case-sensitive
|
Chrome Full support 58 | Edge Full support 79 | Firefox Full support 51 | Internet Explorer No support Ні | Opera Full support 45 | Safari Full support Так | WebView Android Full support 58 | Chrome Android Full support 58 | Firefox for Android Full support 53 | Opera Android Full support 43 | Safari on iOS Full support Так | Samsung Internet Full support 7.0 |
vspace
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
width
|
Chrome Full support Так | Edge Full support 12 | Firefox Full support Так | Internet Explorer Full support Так | Opera Full support Так | Safari Full support Так | WebView Android Full support Так | Chrome Android Full support Так | Firefox for Android Full support Так | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support Так |
Дивіться також
- Елементи
<picture>
,<object>
і<embed>
object-fit
,object-position
,image-orientation
,image-rendering
йimage-resolution
– властивості, пов'язані з зображеннями.- Інтерфейс
HTMLImageElement
для цього елемента - Зображення в HTML
- Тип файлу зображення й настанови щодо форматів
- Чуйні зображення