Тег <img>

Тег <img> вбудовує зображення в документ. Це void-елемент — не має закриваючого тегу.

Syntax

<img src="photo.jpg" alt="Опис зображення">

src	URL зображення. Обов'язковий атрибут.
alt	Текстовий опис зображення для screen-читачів і випадку, якщо зображення не завантажилось. Обов'язковий для доступності.
width / height	Розміри в пікселях. Вказання обох допомагає браузеру зарезервувати місце й уникнути зміщення макета (CLS).
loading	"lazy" відкладає завантаження, доки зображення не наблизиться до видимої області.
srcset / sizes	Список зображень різної щільності/розміру для responsive-завантаження.

<img src="hero.jpg" alt="Команда за роботою в офісі" width="800" height="450" loading="lazy">

alt="" (порожній) коректний для декоративних зображень, які не несуть інформації.
Без width/height браузер не може зарезервувати місце під зображення до завантаження, що спричиняє зсув контенту.

alt не повинен повторювати слово "зображення" — просто опишіть, що на ньому.
Для складних зображень (графіки, діаграми) alt має передавати суть даних, а не лише вигляд.

Атрибут src елементів img, script, video, audio, iframe: URL завантажуваного ресурсу.

Атрибут alt тегу img: обов'язковий текстовий опис для доступності та fallback.

Як віддати браузеру кілька варіантів зображення для різних розмірів екрана.

Атрибут loading="lazy" для відкладеного завантаження зображень поза видимою областю.

Форматуйте та стискайте HTML код онлайн. Обробка повністю у браузері, без відправки на сервер.