Пошук уроків, статей та іншого контенту
Додасте зображення за допомогою img, налаштуєте src і alt та розберете важливі атрибути доступності.
Для додавання зображення в HTML використовують парний? Actually img void element no closing. Need ensure Ukrainian polished.
Елемент <img> — непарний елемент: він не має закривального тегу.
<img src="images/forest.jpg" alt="Стежка через зелений ліс">У цьому прикладі:
img повідомляє браузеру, що потрібно показати зображення;
src містить шлях до файлу зображення;
alt містить текстовий опис зображення.
srcАтрибут src — скорочення від source, тобто «джерело». Він визначає, яке зображення потрібно завантажити.
Якщо зображення зберігається в папці images, а HTML-файл лежить на один рівень вище, шлях може мати такий вигляд:
<img src="images/logo.png" alt="Логотип компанії">Якщо файл зображення лежить у тій самій папці, що й HTML-файл:
<img src="logo.png" alt="Логотип компанії">Шлях у src має точно відповідати:
назві папки;
назві файлу;
розширенню файлу;
регістру літер у назві.
Наприклад, Logo.png і logo.png можуть бути різними файлами.
Для початку зображення можна розмістити в HTML за допомогою атрибутів width і height:
<img
src="images/mountain.jpg"
alt="Гірський пейзаж із озером"
width="800"
height="500"
>Значення цих атрибутів задають розміри в пікселях. Вказування обох розмірів допомагає браузеру заздалегідь зарезервувати місце під зображення під час завантаження сторінки.
Не слід використовувати атрибути width і height для опису доступності. Вони відповідають лише за розміри, а не за зміст зображення.
altАтрибут alt містить текст, який:
прочитає програма екранного доступу;
буде показано, якщо зображення не завантажиться;
допоможе зрозуміти зміст зображення без його перегляду.
Опис в alt має бути коротким і передавати призначення зображення в конкретному контексті.
<img
src="images/team.jpg"
alt="Четверо розробників обговорюють проєкт за столом"
>Не потрібно починати опис словами «зображення» або «фото». Програма екранного доступу вже повідомляє користувачеві, що перед ним зображення.
<!-- Добре -->
<img src="images/dog.jpg" alt="Собака біжить пляжем">
<!-- Гірше -->
<img src="images/dog.jpg" alt="Зображення собаки, яка біжить пляжем">Якщо зображення передає важливу інформацію, alt має описувати цю інформацію.
<img
src="images/weather.png"
alt="Прогноз на понеділок: сонячно, 24 градуси"
>Для зображення, яке є посиланням, альтернативний текст має пояснювати дію посилання:
<a href="index.html">
<img src="images/logo.png" alt="На головну сторінку">
</a>У цьому випадку alt описує не лише вигляд логотипа, а й результат натискання на нього.
Декоративне зображення не додає змісту сторінці. Наприклад, це може бути візерунок, розділювач або фонова прикраса.
Для такого зображення потрібно вказати порожній альтернативний текст:
<img src="images/decorative-line.png" alt="">Порожній alt повідомляє програмі екранного доступу, що зображення можна пропустити.
Не потрібно повністю забирати атрибут alt:
<!-- Неправильно для декоративного зображення -->
<img src="images/decorative-line.png">
<!-- Правильно -->
<img src="images/decorative-line.png" alt="">Відсутній alt і порожній alt="" мають різне значення. Відсутність атрибута може вказувати на помилку або змусити програму екранного доступу спробувати самостійно прочитати назву файлу.
Якщо зображення має видимий підпис, його можна об’єднати з підписом за допомогою елементів <figure> і <figcaption>:
<figure>
<img
src="images/kyiv.jpg"
alt="Площа з історичними будівлями в центрі Києва"
width="800"
height="500"
>
<figcaption>Центральна площа міста після дощу.</figcaption>
</figure><figure> об’єднує зображення та його підпис;
<figcaption> містить видимий підпис.
alt і <figcaption> виконують різні ролі:
alt — короткий опис для тих, хто не бачить зображення;
figcaption — підпис або додаткова інформація, видима всім користувачам.
Не потрібно без потреби дублювати один і той самий текст:
<figure>
<img src="images/cat.jpg" alt="Кіт спить на кріслі">
<figcaption>Кіт спить на кріслі.</figcaption>
</figure>Якщо підпис повністю повторює alt, користувач програми екранного доступу може почути той самий зміст двічі. У такій ситуації alt можна зробити порожнім, якщо підпис уже передає всю потрібну інформацію:
<figure>
<img src="images/cat.jpg" alt="">
<figcaption>Кіт спить на кріслі.</figcaption>
</figure>Атрибут loading="lazy" дозволяє відкладено завантажувати зображення, яке спочатку не видно у вікні браузера:
<img
src="images/article-photo.jpg"
alt="Автор читає книгу біля вікна"
width="800"
height="533"
loading="lazy"
>Це може зменшити початковий обсяг даних сторінки. Для головного зображення, яке одразу видно користувачеві, відкладене завантаження зазвичай не потрібне.
loading="lazy" не замінює alt. Доступність зображення все одно визначається правильним альтернативним текстом.
Нижче наведено просту HTML-сторінку з різними видами зображень:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зображення</title>
</head>
<body>
<main>
<h1>Мандрівка в гори</h1>
<img
src="images/mountains.jpg"
alt="Зелені гори, вкриті легким туманом"
width="800"
height="500"
>
<figure>
<img
src="images/lake.jpg"
alt="Спокійне озеро між горами"
width="800"
height="533"
loading="lazy"
>
<figcaption>Озеро в долині вранці.</figcaption>
</figure>
<!-- Декоративне зображення не має змісту для користувача -->
<img src="images/divider.png" alt="">
</main>
</body>
</html>Щоб перевірити цей приклад, створіть поруч із HTML-файлом папку images і додайте до неї файли mountains.jpg, lake.jpg та divider.png.
alt<img src="images/product.jpg">Краще завжди визначати alt:
<img src="images/product.jpg" alt="Чорний рюкзак із двома кишенями"><img src="images/product.jpg" alt="Фото">Такий опис не пояснює, що саме зображено. Краще описати зміст:
<img src="images/product.jpg" alt="Чорний рюкзак із двома кишенями"><img src="images/IMG_2048.jpg" alt="IMG_2048">Назва файлу не допомагає зрозуміти зображення. Альтернативний текст має бути написаний для користувача.
title замість alt<img
src="images/forest.jpg"
title="Ліс"
alt=""
>Атрибут title не замінює alt. Він може показувати підказку, але не є надійним способом описати зображення для доступності.
<img src="images/bird.jpg" alt="Зображення птаха на гілці">Краще:
<img src="images/bird.jpg" alt="Птах сидить на гілці">srcЯкщо файл називається photo.jpg, але в HTML написано photos.jpg, браузер не зможе його завантажити:
<img src="photos.jpg" alt="Міський пейзаж">Перевірте назву файлу, папку та розширення.
Для зображень використовують непарний елемент <img>.
Атрибут src містить шлях до файлу зображення.
Атрибут alt описує зміст зображення та потрібен для доступності.
Для декоративних зображень використовують alt="".
Альтернативний текст має бути коротким, конкретним і залежати від контексту.
Атрибути width і height задають розмір і допомагають зарезервувати місце на сторінці.
loading="lazy" дає змогу відкладено завантажувати зображення, які розташовані нижче на сторінці.
Для зображення з підписом можна використовувати <figure> і <figcaption>.
title не замінює alt.