Давайте разберёмся, что такое контентное изображение, что такое декоративное и как их отличить друг от друга. От типа изображения зависит то, как оно будет добавлено на страницу.

Теория

Контентное изображение

Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.

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

Из названия понятно, что этот тип изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.

Практика

В теории всё просто, но на деле мы можем столкнуться с неоднозначными ситуациями, в которых не так-то просто определить тип изображения. Давайте вместе рассмотрим различные ситуации на примерах.

Очевидные случаи

Изображение товара в карточке товара, контентное

Карточка товара на сайте Edoque
Карточка товара на сайте Edoque
Карточки товаров на сайте Cadbury
Карточки товаров на сайте Cadbury

Такие изображения содержат информацию о внешнем виде товара. Если они по какой-либо причине не отобразятся, то пользователь потеряет часть информации о товаре.

Реализация: <img>

Логотип, контентное

Логотип на сайте Haribo-shop
Логотип на сайте Haribo-shop
Логотип на сайте Evercodelab
Логотип на сайте Evercodelab
Партнёрские логотипы на сайте Specia
Партнёрские логотипы на сайте Specia

Логотипы могут быть реализованы как текстом, так и изображением, поэтому нужно ориентироваться на конкретный макет. В приведённых выше примерах логотип представлен изображением, которое содержит важную информацию о названии сайта.

И также часто встречаются блоки с партнёрскими логотипами. В таких ситуациях логотипы являются контентными изображениями.

Реализация: <img>

Изображения и текст, контентное

Изображение в статье на сайте Meduza
Изображение в статье на сайте Meduza
Изображения товара на индивидуальной странице на сайте PichShop
Изображения товара на индивидуальной странице на сайте PichShop

Примеры выше — изображения в статье. Данный случай ничем не отличается от карточки товара — у нас есть и описание, и изображение, несущие важную для пользователя информацию. Таким образом, изображение является контентным и должно быть сделано тегом <img>.

Реализация: <img>

Вспомогательная иконка, декоративное

Вспомогательные декоративные иконки на сайте MediaMarkt
Вспомогательные декоративные иконки на сайте MediaMarkt

В примере иконки в меню имеют декоративный характер. Если вдруг они пропадут, информация не потеряется, и пользователь всё равно сможет понять в какой раздел ему нужно. Для реализации лучше всего использовать background-image для псевдоэлемента.

Реализация: background-image для псевдоэлемента

Вспомогательные декоративные иконки на сайте MediaMarkt
Вспомогательные декоративные иконки на сайте MediaMarkt

Другой пример из того же магазина. Изображение лишь дополняет подпись. Такие изображения лишь поясняют названия и являются декоративными.

Реализация: background-image для всего блока или для псевдоэлемента

Фоновое изображение, декоративное

Фоновая картинка с фруктами на сайте Edoque
Фоновая картинка с фруктами на сайте Edoque
Питерское фоновое изображение на сайте Sobor.gorozhanko.ru
Питерское фоновое изображение на сайте Sobor.gorozhanko.ru

На примерах выше мы можем рассмотреть варианты декоративных фоновых изображений. Для реализации лучше всего подойдёт background-image для всего блока.

Реализация: background-image для всего блока

Спорные моменты

Изображение в промослайдере

Слайдер на сайте Cadbury
Слайдер на сайте Cadbury

В элементах слайдера нам часто встречаются изображения товаров. Они несут в себе важную визуальную информацию о товаре, поэтому в таком случае нам следует отнести их к контентному типу изображений.

Реализация: <img>

Слайдер на сайте S7
Слайдер на сайте S7

Однако, бывает и такое, что в слайдере изображения никак не относятся к тексту слайдов и служат только для декоративных целей, следовательно, относятся к декоративному типу изображений.

Реализация: background-image для всего блока

Карта с изображением

Карта в блоке с контактами. Макет Девайс
Карта в блоке с контактами. Макет Девайс

Под интерактивную карту принято добавлять изображение с картой, на случай если интерактивная карта не загрузилась. Каким же образом её добавлять? Карта несёт информацию об адресе. Например, в макете Девайс с нашего базового интенсива по HTML и CSS. В блоке «Контакты» только по карте можно понять адрес компании, ведь в тексте адрес не продублирован, а значит если изображение потеряется, пользователь потеряет информацию о местонахождении компании. Таким образом, изображения карт относятся к контентным изображениям.

Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)

Иконки соцсетей

Социальные кнопки на сайте Haribo
Социальные кнопки на сайте Haribo

Кнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст. Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс .visually-hidden. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение. Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.

Реализация: background-image для ссылки

Вывод

Вопрос определения типа изображения способен запутать неокрепший ум начинающего верстальщика, поэтому советуем вам каждый раз, когда вы сталкиваетесь с необходимостью определить тип изображения, обращать внимание на все детали, а не идти самым простым путём.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>
Читать дальше
HTML
  • 14 сентября 2023
Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

Читать дальше
HTML
  • 31 июля 2023
Как понять, что перед вами заголовок

Как понять, что перед вами заголовок

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

Читать дальше
HTML
  • 8 июня 2023
Как правильно вставлять SVG

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.

�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

<svg width="20">
  <rect fill="#fc0"
    width="20"
    height="20"/>
  <line stroke="black"
    x1="0" y1="0"
    x2="20" y2="20"/>
</svg>

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Читать дальше
HTML
  • 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset

Как создавать адаптивные изображения. Атрибут srcset

Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.

Давайте рассмотрим несколько способов создания адаптивных изображений.

🎓 В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.

Читать дальше
HTML
  • 25 мая 2023
В чём разница между <p> и <br>

В чём разница между <p> и <br>

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

Читать дальше
HTML
  • 24 мая 2023
Как сделать таблицу в HTML

Как сделать таблицу в HTML

<table> — один из основных элементов HTML, который используют для отображения данных (текста, изображения или другого элемента) в ячейках на странице. Таблица состоит из строк и столбцов.

Основные теги, используемые при создании таблицы:

  • <table> — определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
  • <thead> — определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
  • <tbody> — определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tfoot> — определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tr> — определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
  • <th> — определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
  • <td> — определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
  • <caption> — определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.
Читать дальше
HTML
  • 16 мая 2023