Типи зображень

На сайті завжди є зображення, вони допомагають донести смислове значення або просто додати декоративне оформлення сторінки. Отже, існує два типи зображень: контентні та декоративні. Яка між ними різниця?

Контентні зображення - несуть смислове навантаження, належать до змісту сторінки і допомагають донести до користувача корисну для нього інформацію. Вони додаються в HTML-розмітці за допомогою тегу <img> з обов'язково заповненим атрибутом alt, що описує зображення.

Фотографія продукту на картці товару в інтернет-магазині, фотографії членів команди, логотип компанії, рекламні банери, карти з локацією, зображення слайдера, аватарки - це все контентні зображення.

Декоративні зображення - використовуються виключно для додаткового оформлення. Вони не несуть жодної корисної інформації і слугують виключно для «краси». Додаються через CSS як фон, використовуючи властивість background-image, або розмічаються в HTML тегом <svg> (у разі векторної графіки).

Кастомні маркери списків, усілякі допоміжні іконки, плашки, фонові зображення блоків - це все декоративні зображення.

Кілька особливостей такого поділу.

• Очищається код сторінки, що покращує його читабельність для розробника, спрощує роботу пошукових роботів і прискорює початкове завантаження сторінки.
• Все, що повинно бути проіндексовано роботами, додаємо як <img>, інше - фоном.
• Під час друку веб-сторінки теги <img> друкуються, а фонові зображення не друкуються.
• Асистивні технології (скрінрідери) для людей з обмеженими можливостями читають alt зображень, тому, якщо зображення несе інформацію, воно обов'язково повинно бути в HTML-розмітці.