Як вставити зображення в HTML — одне з перших питань, яке виникає під час створення сторінки. Для цього використовують тег img, а головне завдання полягає не лише в тому, щоб показати картинку, а й правильно вказати шлях до файлу, альтернативний текст і базові параметри відображення.
Базовий синтаксис тега img
Найпростіший спосіб вставити зображення на сторінку виглядає так:
<img src="images/photo.jpg" alt="Опис зображення">
Тут src вказує шлях до файлу, а alt описує, що саме зображено. У HTML тег img є порожнім, тобто він не має закривального тегу.
Що означають основні атрибути
Щоб зображення працювало коректно, важливо розуміти кілька атрибутів:
- src — шлях до картинки на сайті або в папці проєкту;
- alt — текстова заміна, яка показується, якщо файл не завантажився;
- width і height — задають розміри елемента;
- title — додатковий підказковий текст, але він не замінює alt.
Атрибут alt особливо важливий для доступності та SEO. Якщо ви не знаєте, що писати, сформулюйте короткий і точний опис без зайвих слів.
Як правильно вказати шлях до файлу
Найчастіша помилка — неправильний шлях до зображення. Якщо файл лежить у тій самій папці, що й HTML-сторінка, можна вказати лише назву файлу. Якщо картинка зберігається в окремій папці, шлях має це враховувати.
- Картинка в тій самій папці: src="photo.jpg"
- Картинка в папці images: src="images/photo.jpg"
- Файл вище за рівнем: src="../photo.jpg"
Щоб уникнути помилок, перевіряйте регістр літер у назві файлу. На деяких серверах Photo.jpg і photo.jpg — це різні файли.
Як зробити зображення зручним для сторінки
Після того як ви зрозуміли, як вставити зображення в HTML, варто подбати про читабельність і швидкість завантаження. Занадто великі файли можуть сповільнювати сторінку, тому перед публікацією краще оптимізувати розмір картинки.
Практичні поради
- використовуйте формати, які підходять для фото та графіки;
- не завантажуйте зображення більшого розміру, ніж потрібно;
- додавайте зрозумілий alt-текст;
- за потреби задавайте фіксовані розміри, щоб уникнути стрибків верстки.
Якщо зображення виконує декоративну функцію, alt може бути порожнім, але для контентних ілюстрацій краще писати змістовний опис.
Типові помилки, яких варто уникати
Під час вставлення зображень новачки часто забувають про дрібні, але важливі деталі. Найпоширеніші проблеми — неправильний шлях, відсутній alt, занадто великий файл або випадкова опечатка в назві.
Ще одна помилка — вставляти картинку без урахування адаптивності. Якщо сторінка відкривається на смартфоні, зображення не повинно виходити за межі контейнера. Для цього часто використовують CSS, але базова HTML-розмітка вже має бути правильною.
Висновок
Тепер ви знаєте, як вставити зображення в HTML: достатньо використати тег img, правильно вказати src і не забути про alt. Це проста дія, але саме вона робить сторінку візуально зрозумілішою, зручнішою та більш професійною.
