Как отличить контентное изображение от декоративного — Блог HTML Academy
Давайте разберёмся, что такое контентное изображение, что такое декоративное и как их отличить друг от друга. От типа изображения зависит то, как оно будет добавлено на страницу.
Теория
Контентное изображение
Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.
Декоративное изображение
Из названия понятно, что этот тип изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.
Практика
В теории всё просто, но на деле мы можем столкнуться с неоднозначными ситуациями, в которых не так-то просто определить тип изображения.
Давайте вместе рассмотрим различные ситуации на примерах.
Очевидные случаи
Изображение товара в карточке товара, контентное
Карточка товара на сайте EdoqueКарточки товаров на сайте CadburyТакие изображения содержат информацию о внешнем виде товара. Если они по какой-либо причине не отобразятся, то пользователь потеряет часть информации о товаре.
Реализация: <img>
Логотип, контентное
Логотип на сайте Haribo-shopЛоготип на сайте EvercodelabПартнёрские логотипы на сайте SpeciaЛоготипы могут быть реализованы как текстом, так и изображением, поэтому нужно ориентироваться на конкретный макет. В приведённых выше примерах логотип представлен изображением, которое содержит важную информацию о названии сайта.
И также часто встречаются блоки с партнёрскими логотипами. В таких ситуациях логотипы являются контентными изображениями.
Реализация: <img>
Изображения и текст, контентное
Изображение в статье на сайте MeduzaИзображения товара на индивидуальной странице на сайте PichShopПримеры выше — изображения в статье.
Данный случай ничем не отличается от карточки товара — у нас есть и описание, и изображение, несущие важную для пользователя информацию. Таким образом, изображение является контентным и должно быть сделано тегом <img>.
Реализация: <img>
Вспомогательная иконка, декоративное
Вспомогательные декоративные иконки на сайте MediaMarktВ примере иконки в меню имеют декоративный характер. Если вдруг они пропадут, информация не потеряется, и пользователь всё равно сможет понять в какой раздел ему нужно. Для реализации лучше всего использовать background-image для псевдоэлемента.
Реализация: background-image для псевдоэлемента
Другой пример из того же магазина. Изображение лишь дополняет подпись. Такие изображения лишь поясняют названия и являются декоративными.
Реализация: background-image для всего блока или для псевдоэлемента
Фоновое изображение, декоративное
Фоновая картинка с фруктами на сайте target=»_blank»rel=»nofollow noopener»EdoqueПитерское фоновое изображение на сайте Sobor.
gorozhanko.ruНа примерах выше мы можем рассмотреть варианты декоративных фоновых изображений. Для реализации лучше всего подойдёт background-image для всего блока.
Реализация: background-image для всего блока
Спорные моменты
Изображение в промослайдере
Слайдер на сайте CadburyВ элементах слайдера нам часто встречаются изображения товаров. Они несут в себе важную визуальную информацию о товаре, поэтому в таком случае нам следует отнести их к контентному типу изображений.
Реализация: <img>
Однако, бывает и такое, что в слайдере изображения никак не относятся к тексту слайдов и служат только для декоративных целей, следовательно, относятся к декоративному типу изображений.
Реализация: background-image для всего блока
Карта с изображением
Карта в блоке с контактами. Макет Девайс.Под интерактивную карту принято добавлять изображение с картой, на случай если интерактивная карта не загрузилась.
Каким же образом её добавлять? Карта несёт информацию об адресе. Например, в макете Девайс с нашего базового интенсива по HTML и CSS. В блоке «Контакты» только по карте можно понять адрес компании, ведь в тексте адрес не продублирован, а значит если изображение потеряется, пользователь потеряет информацию о местонахождении компании. Таким образом, изображения карт относятся к контентным изображениям.
Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)
Иконки соцсетей
Социальные кнопки на сайте HariboКнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст.
Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс .visually-hidden. Описание этого паттерна скрытия можно почитать в нашей статье. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение. Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.
Реализация: background-image для ссылки
Вывод
Вопрос определения типа изображения способен запутать неокрепший ум начинающего верстальщика, поэтому советуем вам каждый раз, когда вы сталкиваетесь с необходимостью определить тип изображения, обращать внимание на все детали, а не идти самым простым путём.
фоновых цветов и изображений
Будь то простой цвет, повторяющийся узор или большое героическое изображение, CSS позволяет вам установить собственный фон для любого содержимого HTML и предлагает множество вариантов настройки.
Цвет фона
Цвет фона можно добавить практически к любому элементу html с помощью свойства background-color , за которым следует допустимое определение цвета (см. руководство по определениям цветов CSS).
Цвета фона располагаются за любым текстом, изображениями или другим содержимым и распространяются на границы элемента, включая любые примененные отступы.
В приведенной выше демонстрации попробуйте изменить цвет фона, используя другие именованные цвета, шестнадцатеричные цвета или цвета RGB.
Фоновое изображение
Фоновое изображение можно применить с помощью свойства background-image и ссылки на путь к изображению.
По умолчанию фоновое изображение:
- Повторяется по обеим осям x и y.
- Выровнено по верхнему левому краю элемента.
- Размер соответствует фактическому масштабу файла изображения.
В приведенной выше демонстрации попробуйте заменить URL-адрес изображения другим изображением, найденным в Интернете.
Обратите внимание на то, как размер изображения влияет на его поведение. Что происходит, когда вы используете очень маленькое изображение? А если очень большой?
Повтор фона
По умолчанию фоновые изображения повторяются в обоих направлениях, если они недостаточно велики, чтобы заполнить все доступное пространство. Свойство
повтор-х
повтор-y
без повтора
Фоновое положение
Обратите внимание, что в предыдущих примерах фоновое изображение по умолчанию располагается в левом верхнем углу элемента, к которому оно применяется. Это можно изменить с помощью свойства background-position . Он будет принимать два значения: положение по оси X и положение по оси Y.
Ключевые слова
Самый простой способ указать значения для background-position — использовать доступные ключевые слова: справа , сверху , снизу или по центру .
Каждый ведет себя так, как вы ожидаете.
В приведенном выше примере попробуйте изменить значения свойства background-position . Что происходит, когда вы используете слева или центр для первого значения? Что происходит, когда вы используете нижние или верхние для второго значения? Что, если вы предоставите только одно значение?
Измерения
Вы также можете указать определенные значения, используя любую подходящую единицу измерения CSS. Позиции измеряются слева и сверху.
В приведенном выше примере попробуйте разные значения измерения для свойства background-position . Играйте с разными типами юнитов и разными числами.
Фоновое приложение
По умолчанию фоновое изображение перемещается вместе с элементом, к которому оно применяется. Если страница прокручивается и верхняя часть элемента перемещается, то же самое происходит и с верхней частью фонового изображения.
background-attachment свойство. В сочетании со значением fixed фоновое изображение остается закрепленным на месте, когда элемент ускользает, что позволяет использовать эффекты параллакса.Размер фона
По умолчанию фоновое изображение масштабируется в соответствии с фактическими размерами файла изображения в пикселях. Однако это можно изменить несколькими способами, используя свойство background-size .
Ключевые слова
Существует ряд именованных ключевых слов для масштабирования фоновых изображений.
содержат
содержат Масштабирует изображение так, чтобы все изображение было видно внутри элемента.
крышка
обложка масштабирует изображение так, что весь элемент всегда закрыт.
Числовые измерения размера
Свойство background-size также можно использовать с любым подходящим числовым измерением размера.
Значения читаются ширина затем высота .
Будьте осторожны при использовании числовых значений размера. Они могут привести к растяжению изображения при неправильном применении, как в примере ниже.
Видео урок
Следующее демонстрационное видео полностью интерактивно. Вы можете сделать паузу в любой момент, чтобы напрямую отредактировать код, и возобновить воспроизведение, чтобы вернуться к тому месту, где вы остановились.
Практическое упражнение
- Инструмент фонового кодирования SVG
- Шаблоны героев | Фоны SVG
- Убрать брызги | Бесплатные стоковые изображения
Как ускорить фоновые изображения
Фоновые изображения обычно используются в местах с текстом или контентом сверху. Это может быть слайдер, избранное изображение поста в блоге (как показано ниже) или главное изображение.
Скорее всего, они загружаются медленно и могут повлиять на взаимодействие с пользователем из-за увеличения параметра Largest Contentful Paint (LCP), если они находятся в указанной выше части.
Оглавление
- Почему фоновые изображения работают медленно?
- Запросы с низким приоритетом
- Жесткая ленивая загрузка и предварительная загрузка
- Как ускорить фоновые изображения?
- Использовать тег IMG с объектным соответствием
- Предварительно загрузить фоновое изображение
- Тег IMG с хаком «display: none»
- Добавить адаптивные изображения
- Встроенное фоновое изображение в HTML
- Дополнительное чтение
Почему фоновые изображения работают медленно?
Запросы с низким приоритетом
Если изображение находится во внешнем файле CSS, оно будет загружено только после загрузки и анализа файла CSS и когда класс CSS фактически используется в HTML.
Это может отражаться в вашей основной метрике веб-показателей, такой как Крупнейшая содержательная отрисовка (LCP) , если эти фоновые изображения находятся в верхней части.
Если это тег IMG, изображение загружается мгновенно при анализе HTML.
Тяжелая отложенная загрузка и предварительная загрузка
Теги IMG могут использовать встроенную отложенную загрузку браузера, которая не требует JavaScript.
Вы по-прежнему можете лениво загружать фоновые изображения, если они находятся в HTML как встроенный стиль. Такие плагины, как FlyingPress, автоматически обнаруживают и загружают их в ленивом режиме.
Однако, если фоновое изображение находится внутри внешнего CSS-файла или внутреннего, все становится сложнее, поскольку мы не можем понять, есть ли у HTML-элемента фоновое изображение или нет.
Примечание. Если вы используете FlyingPress, у нас есть вспомогательный класс « lazy-bg» для ленивой загрузки фоновых изображений даже внутри файлов CSS.
Как ускорить фоновые изображения?
Используйте тег IMG с объектной подгонкой
Фоновые изображения обычно используются в слайдерах с некоторым текстом/содержимым в центре, или у вас есть фиксированный элемент div, и вы хотите разместить изображение, которое будет «заполнять» без изменения размера области ( размер фона: обложка ).
Раньше было очень сложно добиться этого с помощью тегов IMG. Поэтому использование фоновых изображений имело смысл.
Однако есть новое свойство CSS object-fit: cover , которое дает те же преимущества. Поддержка браузера также хороша.
Предварительно загрузить фоновое изображение
Независимо от того, используете ли вы фоновое изображение или тег IMG, если изображение находится на сгибе выше, предварительно загрузите это изображение. Предварительная загрузка указывает браузеру загрузить это изображение с высоким приоритетом.
Тег IMG с хаком display: none
Фоновые изображения можно использовать вместе с background-color , background-repeat , background-attachment , background-position и background-blend 9000 -mode и т. д.
Поэтому в некоторых ситуациях лучше использовать background-image вместо тега IMG, чтобы использовать другие свойства CSS.
Вы можете добавить обычную метку IMG с отображением : нет . Это скажет браузеру немедленно загрузить изображение, но отобразить его с использованием фонового изображения.
Добавление адаптивных изображений
Вы добавляете srcset и размеры к обычным изображениям для доставки адаптивных изображений на основе устройства:
Точно так же вы можете сделать то же самое для фоновых изображений, используя image-set :
В противном случае вы получите одно и то же большое изображение для MacBook с разрешением 2880 пикселей и iPhone 6s с разрешением 750 пикселей!
Встроенное фоновое изображение в HTML
Если ваше фоновое изображение находится внутри внешнего файла CSS, встройте его в HTML. Таким образом, браузеру не нужно ждать загрузки этого CSS-файла, а затем загружать изображение.
