Особливості тегу img у HTML верстці

Привіт:) Тег <img> є одним із найпопулярніших елементів у веб-розробці. Проте за простотою його написання ховається безліч нюансів: від поведінки заміщуваного (replaced) елемента в рядковому контексті до впливу на метрики швидкості Google Core Web Vitals (зокрема, Cumulative Layout Shift).

У цій статті детально розгляну механіку роботи тегу <img>, його HTML-атрибути, CSS-стилізацію, адаптивність та найкращі практики для SEO та оптимізації завантаження.

Природа тегу <img>: заміщуваний Inline-елемент

Елемент <img> належить до категорії заміщуваних елементів (replaced elements). Це означає, що його зовнішній вигляд та розміри визначаються зовнішнім ресурсом (файлом зображення), а не внутрішнім вмістом HTML-тегу.

• Тип відображення: За замовчуванням має CSS-властивість display: inline. Проте, на відміну від звичайних текстових inline-елементів (як <span>), до <img> можна застосовувати розміри (width, height), відступи (padding, margin) та рамки (border).
• Проблема з відступом знизу (Baseline): У рядковому контексті зображення вирівнюється за базовою лінією тексту (vertical-align: baseline). Через це під картинкою часто з'являється небажаний зазор у 3–5 пікселів (простір для нижніх виносних елементів букв, таких як "g", "y", "p").

💡 Як усунути зазор під картинкою?

Задайте для зображення display: block або змініть вирівнювання: vertical-align: middle чи vertical-align: bottom. Переведення в display: block також дозволить центрувати зображення за допомогою margin: 0 auto.

Розміри: Attributes vs CSS та метрика CLS

HTML надає атрибути width та height. У сучасній верстці їх використання є строго обов'язковим для оптимізації продуктивності.

Чому важливо вказувати width і height в HTML?

Раніше вважалося, що розміри краще задавати виключно в CSS. Проте це призводить до проблеми CLS (Cumulative Layout Shift) — зсуву макета під час завантаження сторінки. Коли браузер читає HTML, він спочатку не знає пропорцій картинки. Коли файл завантажується, макет здригається і контент "скаче" вниз.

Сучасні браузери автоматично обчислюють співвідношення сторін (aspect-ratio) на основі HTML-атрибутів width та height і резервують необхідне місце ще ДО завантаження самого файлу зображення.

<!-- Правильний підхід: вказуємо точні піксельні розміри оригінального файлу -->

<img src="hero.jpg" width="1200" height="675" alt="Головний банер" class="responsive-img">

/* CSS для адаптивності без втрати пропорцій */

.responsive-img {
  width: 100%;
  height: auto;
}

Стилізація та позиціонування: object-fit та object-position

При фіксованих розмірах контейнера зображення може деформуватися. Для керування пропорціями всередині заданих меж використовують CSS-властивості object-fit та object-position.

Властивість object-position (наприклад, object-position: center top) дозволяє вказати, яка саме частина зображення залишається у фокусі при обрізанні.

Доступність (Accessibility) та SEO: атрибут alt

Атрибут alt (alternative text) — найважливіший атрибут для SEO та інклюзивності:

1. Пошукова оптимізація: Пошукові роботи (Googlebot) індексують вміст alt для розуміння контексту сторінки та ранжування у Google Images.
2. Скрінрідери (Screen Readers): Програми зчитування з екрана озвучують вміст alt для людей з порушеннями зору.
3. Фоллбек: Відображається, якщо картинка не завантажилася або заблокована мережею.

📌 Декоративні зображення:

Якщо зображення виконує виключно декоративну роль (наприклад, фоновий візерунок або іконка-ілюстрація біля тексту), залишайте атрибут порожнім: alt="". Це підкаже скрінрідеру пропустити цей елемент.

Адаптивні зображення: srcset, sizes та тег <picture>

Завантаження великого зображення (наприклад, 2500px) на мобільний телефон витрачає трафік та сповільнює завантаження. Для вирішення цієї проблеми використовуються адаптивні підходи.

Підхід 1: Атрибути srcset та sizes

Дозволяють браузеру самостійно обрати найоптимальніший файл залежно від ширини екрана та Retina-дисплеїв:

<img src="image-medium.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
     alt="Адаптивне зображення">

Підхід 2: Тег <picture> (Art Direction та сучасні формати)

Використовується, коли потрібно змінити кадрування (Art Direction) для мобільних пристроїв або віддати сучасні формати (.webp, .avif) із фоллбеком на .jpg/.png:

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Сучасні формати зображень" width="800" height="600">
</picture>

Ледаче завантаження (Lazy Loading) та пріоритети

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

<img src="footer-banner.jpg" loading="lazy" decoding="async" alt="Банер у футері">

⚠️ Критичне застереження щодо LCP:

Ніколи не додавайте loading="lazy" до першого головного зображення на сторінці (Hero image, перший банер). Це суттєво погіршить метрику LCP (Largest Contentful Paint). Натомість для першого зображення використовуйте fetchpriority="high".

Зведена таблиця атрибутів тегу <img>

Тег <img> — це набагато більше, ніж просто відображення картинки. Грамотне поєднання атрибутів width / height, правильного значення alt, сучасних форматів (AVIF/WebP) та лінивого завантаження loading="lazy" дозволяє досягти максимальних балів у Google PageSpeed Insights та забезпечує чудовий UX/UI для користувачів.