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

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

Контентні зображення

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

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

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

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

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

Різниця

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

Особливості розподілу на контентні та декоративні зображення

• Очищається код сторінки, що покращує його читабельність для розробника, спрощує роботу пошукових роботів і прискорює початкове завантаження сторінки.

• Все, що повинно бути проіндексовано роботами, додаємо як <img>, інше - фоном.

• Під час друку веб-сторінки теги <img> друкуються, а фонові зображення не друкуються.

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