<img>: Елемент вбудовування зображень

{{HTMLSidebar}}

Елемент HTML <img> вбудовує в документ зображення.

Спробуйте його в дії

Приклад вище демонструє використання елемента <img>:

• Атрибут src є required (обов'язковим) і містить шлях до зображення, котре має бути вбудоване.
• Атрибут alt зберігає текстову заміну для зображення, яка є обов'язковою та приголомшливо корисною для доступності: читачі з екрана зачитують своїм користувачам значення атрибута, щоб вони знали, що означає зображення. Альтернативний текст також виводиться на сторінці, якщо зображення з якоїсь причини не може бути завантажене: наприклад, через мережеві помилки, блокування вмісту чи гниття посилань.

Є чимало інших атрибутів для досягнення різних цілей:

• Контроль посилача/CORS для безпеки й приватності: дивіться crossorigin й referrerpolicy.
• Щоб задати зображенню його природний розмір, слід задати й атрибут width, і атрибут height: це дасть змогу зарезервувати для зображення місце й уникнути зсувів компонування вмісту.
• Підказки чуйності зображень за допомогою sizes і srcset (також дивіться елемент <picture> і наш підручник Чуйні зображення).

Підтримувані формати зображень

Стандарт HTML не перелічує, які формати зображень слід підтримувати, тому користувацькі агенти можуть підтримувати різні формати.

Примітка: Настанови з типів файлів та форматів надають всебічну інформацію про формати зображень та їх підтримку веббраузерами. Цей розділ – лишень стислий конспект!

Формати файлів зображень, що найбільш поширені у Вебі:

• 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

Визначає текст, що може замінити зображення на сторінці.

Примітка: Браузери показують зображення не завжди. Є низка ситуацій, в яких браузер може не показувати зображення, наприклад:

• Коли браузер є невізуальним (штибу тих, котрими користуються люди з розладами зору)
• Коли користувач вирішує не виводити зображень (для економії пропускної здатності, з міркувань приватності)
• Коли зображення є недійсним чи має непідтримуваний тип

В таких випадках браузер може замінити зображення текстом з атрибута alt елемента. З цих та інших міркувань, слід надавати змістовне значення alt завжди, коли це можливо.

Надання цьому атрибутові порожнього рядка (alt="") вказує на те, що це зображення не є ключовою частиною вмісту (є прикрасою чи пікселем стеження) і що невізуальні браузери можуть упустити його при відтворенні. Візуальні браузери також приховають піктограму зламаного зображення, якщо атрибут alt є порожнім і зображення не вийшло відтворити.

Цей атрибут також використовується при копіюванні й вставленні зображення в текст, а також збереженні пов'язаного зображення в закладку.

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

Природна висота зображення, в пікселях. Мусить бути цілим числом без одиниць вимірювання.

Примітка: Задання height і width дає браузерові змогу обчислити співвідношення сторін зображення до того, як воно завантажене. Це співвідношення використовується для резервування простору, необхідного для виведення зображення, частково або навіть повністю запобігаючи зсувові компонування сторінки при завершенні завантаження й візуалізації зображення. Зменшення зсуву компонування – важлива деталь доброго користувацького досвіду й швидкодії вебсторінки.

ismap

Цей булів атрибут вказує, що зображення є частиною серверної карти. Якщо це так, то координати, в яких користувач клацнув на зображення, надсилаються на сервер.

Примітка: Цей атрибут дозволений лише тоді, коли елемент <img> є нащадком елемента <a> з дійсним атрибутом href. Це надає користувачам без вказівних пристроїв запасний напрям переходу.

loading

Вказує, як браузер повинен завантажувати зображення:

eager:

Завантажує зображення негайно, незалежно від того, чи знаходиться зображення наразі в межах області перегляду (це значення – усталене).

lazy:

Відкладає завантаження зображення, поки воно не досягне обчисленої відстані від області перегляду, визначеної браузером. Задумом є уникнення використання мережевого з'єднання й пропускної здатності сховища, необхідних для обробки зображення, поки не настане певність, що воно знадобиться. Це загалом покращує швидкодію вмісту в найтиповіших ситуаціях.

Примітка: Завантаження відкладається лише тоді, коли ввімкнений JavaScript. Така особливість є заходом запобігання стеженню, тому що якби користувацький агент підтримував ледаче завантаження при вимкнених сценаріях, то було й надалі можливо відстежити приблизну позицію прокрутки користувача протягом сесії, стратегічно розташовуючи зображення в розмітці сторінки, щоб сервер міг відстежувати, скільки зображень завантажувалися й коли. Примітка: Зображення, чий атрибут 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

Один чи більше рядків, розділених комами, що вказують набір розмірів джерела. Кожен розмір джерела складається із:

1. Умови медіа. Повинна бути опущена для останнього елемента списку.
2. Значення розміру джерела.

Умови медіа описують властивості області перегляду, а не зображення. Наприклад, (max-height: 500px) 1000px пропонує використати джерело ширини 1000px, якщо область перегляду не вища за 500px.

Значення розмірів джерела вказують бажаний виведений розмір зображення. Користувацькі агенти використовують розмір джерела, щоб обрати одне з джерел, наданих в атрибуті srcset, коли ці джерела описані за допомогою дескрипторів (w). Обраний розмір джерела впливає на intrinsic size зображення (розмір виведення зображення, коли не застосовується оформлення CSS). Якщо немає атрибута srcset, або якщо в ньому немає значень з дескриптором ширини, то атрибут sizes ні на що не впливає.

src

URL зображення. Обов'язковий для елемента <img> атрибут. В браузерах, що підтримують srcset, src враховується як зображення-кандидат з дескриптором піксельної щільності 1x, якщо srcset зображення з таким дескриптором піксельної щільності не визначене в srcset і якщо srcset не містить дескрипторів w.

srcset

Один чи більше рядків, розділених комами, що вказують можливі джерела зображення для використання користувацьким агентом. Кожен рядок складається із:

1. URL зображення

2. (Необов'язково) пробілу, після якого – один з двох варіантів:

   • Дескриптор ширини (додатне ціле число, після котрого зразу стоїть літера w). Дескриптор ширини ділиться на розмір джерела, наданий атрибутом sizes, для обчислення активної піксельної щільності.
   • Дескриптор піксельної щільності (додатне число з рухомою комою, після котрого зразу стоїть літера x).

Якщо дескриптор не вказаний, то джерело отримує усталений дескриптор – 1x.

Некоректно змішувати дескриптори ширини й дескриптори піксельної щільності в одному атрибуті srcset. Повторювані дескриптори (наприклад, два джерела з однаковим srcset, що обидва описані як 2x) – також недійсні.

Якщо атрибут srcset використовує дескриптори ширини, то атрибут sizes також повинен бути присутній, інакше – srcset буде ігноруватися.

Користувацький агент обирає будь-яке з доступних джерел на свій розсуд. Це дає йому значну свободу дій, щоб адаптувати свій вибір на основі речей штибу користувацьких налаштувань чи умов пропускної здатності. Дивіться наш підручник Чуйні зображення для отримання прикладів.

width

Природна ширина зображення в пікселях. Повинна бути цілим числом без одиниць вимірювання.

usemap

Частковий URL (починається з #) карти зображення, пов'язаної з елементом.

Примітка: Не можна використовувати цей атрибут, якщо елемент <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 елемента.

Примітка: Цей атрибут згадується в останній версії 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.

Приклади

Альтернативний текст

Наступний приклад вбудовує в сторінку зображення і включає альтернативний текст для потреб доступності.

<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" />

Примітка: Щоб побачити зміну розміру в дії, {{LiveSampleLink('vykorystannia-atrybutiv-srcset-i-sizes', 'перегляньте приклад на окремій сторінці')}}, щоб мати змогу справді змінити розмір області вмісту.

Занепокоєння щодо безпеки та приватності

Хоч елементи <img> мають безневинні застосування, вони можуть мати небажані наслідки для безпеки й приватності користувачів. Дивіться Заголовок посилача: занепокоєння щодо приватності й безпеки для отримання докладнішої інформації й шляхів до залагодження.

Занепокоєння щодо доступності

Створення змістовних альтернативних описів

Значення атрибута 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.

• Використання атрибута HTML title – оновлено | The Paciello Group (англ.)

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• Елементи <picture>, <object> і <embed>
• object-fit, object-position, image-orientation, image-rendering й image-resolution – властивості, пов'язані з зображеннями.
• Інтерфейс HTMLImageElement для цього елемента
• Зображення в HTML
• Тип файлу зображення й настанови щодо форматів
• Чуйні зображення