Картинки на веб-сторінках — це як спеції в улюбленій страві: вони додають смаку, емоцій і роблять контент живим. Але як правильно додати зображення в HTML-код, щоб сторінка виглядала професійно, швидко завантажувалася і була доступною для всіх? У цій статті ми зануримося в кожен аспект цього процесу, від базових тегів до просунутих технік оптимізації.
Основи: тег ![]()
та його атрибути
Щоб вставити картинку в HTML, використовується тег <img>. Це порожній тег, який не потребує закриваючого елемента, але має кілька ключових атрибутів, що визначають, як зображення відображатиметься. Давайте розберемо їх детально.
Атрибут src: шлях до зображення
Атрибут src (source) вказує, де розташовано файл із зображенням. Це може бути локальний файл на сервері або URL-адреса зображення в інтернеті.
- Локальний шлях: Наприклад,
<img src="images/photo.jpg">вказує на файл у папці “images” на вашому сервері. - Абсолютний шлях:
<img src="https://example.com/photo.jpg">посилається на зображення в інтернеті.
Важливо перевірити правильність шляху, адже помилка в src призведе до “битої” картинки — браузер покаже порожній квадрат із маленькою іконкою. Завжди використовуйте відносні шляхи для локальних файлів, щоб сайт залишався портативним.
Атрибут alt: текстова альтернатива
Атрибут alt (alternative text) описує зміст зображення для скрінрідерів і пошукових систем. Це не просто “гарна практика” — це must-have для доступності та SEO.
- Описуйте зміст картинки чітко: наприклад,
alt="Захід сонця над Карпатами", а не простоalt="фото". - Для декоративних зображень залишайте
alt=""(порожній), щоб скрінрідери їх ігнорували.
Правильний alt-текст покращує SEO, адже пошуковики “читають” його, щоб зрозуміти контекст зображення.
Атрибути width і height: розміри зображення
Ці атрибути задають ширину (width) і висоту (height) картинки в пікселях або відсотках. Наприклад, <img src="photo.jpg" width="300" height="200">.
- Вказуйте розміри, щоб браузер резервував місце для картинки до її завантаження — це запобігає “стрибкам” контенту.
- Якщо вказати лише один атрибут, браузер автоматично збереже пропорції.
Але будьте обережні: задані розміри в HTML не змінюють фізичний розмір файлу, лише масштабують його в браузері. Для оптимізації використовуйте графічні редактори або CSS.
Формати зображень: який обрати?
Не всі картинки однакові — вибір формату впливає на швидкість завантаження і якість. Ось найпоширеніші формати та їх особливості.
| Формат | Особливості | Коли використовувати |
|---|---|---|
| JPEG | Стиснення з втратами, підтримує мільйони кольорів | Фотографії, складні зображення |
| PNG | Стиснення без втрат, підтримує прозорість | Логотипи, іконки, зображення з прозорим фоном |
| WebP | Сучасний формат, ефективне стиснення, підтримує прозорість | Універсальний вибір для сучасних сайтів |
| SVG | Векторний формат, масштабується без втрати якості | Іконки, логотипи, прості графічні елементи |
Джерело: аналіз документації W3C та матеріалів сайту developer.mozilla.org.
WebP — це “зірка” сучасного вебу, адже він зменшує розмір файлу без втрати якості. Однак для старих браузерів (наприклад, Internet Explorer) додайте резервний варіант у JPEG або PNG через тег <picture>.
Розширені техніки: тег і адаптивні зображення
Сучасні сайти мають виглядати ідеально на всіх пристроях, від смартфонів до 4K-моніторів. Тег <picture> дозволяє завантажувати різні версії зображення залежно від розміру екрана чи типу пристрою.
Як працює ?
Тег <picture> містить кілька елементів <source>, кожен із яких пропонує свій варіант зображення. Браузер обирає найкращий варіант, а якщо жоден не підходить, використовується <img> усередині.
Приклад:
<picture> <source media="(min-width: 768px)" srcset="large.jpg"> <source media="(min-width: 320px)" srcset="small.jpg"> <img src="default.jpg" alt="Опис зображення"> </picture>
Тут браузер завантажить large.jpg для екранів ширше 768 пікселів, small.jpg — для менших екранів, або default.jpg, якщо жоден <source> не підійшов.
Атрибут srcset для адаптивності
Атрибут srcset у тегі <img> дозволяє вказати кілька версій зображення з різною роздільною здатністю. Наприклад:
<img src="default.jpg" srcset="high-res.jpg 2x, low-res.jpg 1x" alt="Опис">
Браузер обере high-res.jpg для Retina-дисплеїв (2x щільність пікселів) і low-res.jpg для стандартних екранів. Це економить трафік і прискорює завантаження.
Оптимізація зображень для швидкості та SEO
Великі зображення — це як важкий багаж: вони уповільнюють сайт і дратують користувачів. Ось як зробити картинки легкими та ефективними.
Стиснення без втрати якості
Використовуйте інструменти стиснення, такі як TinyPNG, ImageOptim або Squoosh. Наприклад, WebP може зменшити розмір файлу на 30–50% порівняно з JPEG без помітної втрати якості.
- Тримайте розмір файлу до 100–200 КБ для звичайних зображень.
- Для великих банерів використовуйте прогресивний JPEG — він завантажується поступово, що створює ефект плавної появи.
Ледаче завантаження (lazy loading)
Атрибут loading="lazy" у тегі <img> відкладає завантаження зображення, доки воно не з’явиться в зоні видимості. Це значно прискорює початкове завантаження сторінки.
<img src="photo.jpg" loading="lazy" alt="Опис">
Lazy loading підтримується всіма сучасними браузерами з 2020 року і є стандартом для оптимізації.
Доступність: як зробити зображення дружніми до всіх
Доступність (accessibility) — це не просто тренд, а необхідність. Картинки мають бути зрозумілими для людей із порушеннями зору чи іншими обмеженнями.
- Alt-текст: Як ми згадували, він обов’язковий. Пишіть коротко, але змістовно.
- Підписи: Використовуйте тег
<figcaption>у складі<figure>, щоб додати пояснення до зображення. - Контраст: Переконайтеся, що текст на зображенні (якщо є) читається легко.
Приклад із <figure>:
<figure> <img src="photo.jpg" alt="Кіт грається з клубком"> <figcaption>Милий кіт насолоджується грою.</figcaption> </figure>
Типові помилки при вставці зображень
Типові помилки, яких варто уникати
Додавання картинок здається простим, але навіть досвідчені розробники припускаються помилок. Ось найпоширеніші з них і як їх уникнути.
- 🌱 Неправильний шлях у src: Завжди перевіряйте шлях до файлу. Якщо картинка не відображається, відкрийте консоль браузера (F12) і шукайте помилки 404.
- ⭐ Відсутність alt-тексту: Це не лише погіршує SEO, а й робить сайт недоступним для скрінрідерів.
- 🚀 Занадто великі файли: Незтиснені зображення уповільнюють сайт. Завжди оптимізуйте файли перед завантаженням.
- 🌟 Ігнорування адаптивності: Без
srcsetчи<picture>ваш сайт може виглядати погано на різних пристроях.
Уникнення цих помилок зробить ваш сайт швидшим, доступнішим і привабливішим для пошукових систем.
Практичний приклад: створюємо галерею зображень
Щоб закріпити знання, давайте створимо просту галерею зображень із використанням HTML і базового CSS.
<div style="display: flex; gap: 10px;"> <img src="photo1.jpg" alt="Квітка ромашки" width="200" loading="lazy"> <img src="photo2.jpg" alt="Гірський пейзаж" width="200" loading="lazy"> <img src="photo3.jpg" alt="Захід сонця" width="200" loading="lazy"> </div>
Цей код створює горизонтальну галерею з трьох зображень, оптимізованих для швидкого завантаження. Ви можете додати CSS-анімації чи клікабельні посилання, щоб зробити галерею інтерактивною.
Вставка картинок у HTML — це мистецтво, яке поєднує технічну точність і творчий підхід. Від базового тегу <img> до адаптивних зображень і оптимізації — кожен крок має значення. Сподіваємося, цей посібник став для вас надійним провідником у цьому процесі!