Img background: background-image — CSS: Cascading Style Sheets

img или background-image? Что лучше?

Вы здесь

Главная → Блог → CSS → img или background-image? Что лучше?

Раздел: 

В любом дизайне сайта используются картинки. Но мало кто задумывается над вопросом а когда именно при верстке макета стоит применять html тег img, а когда css свойство background-image? Есть ли между ними вообще различие? На самом деле есть и достаточно существенное. Об этом и пойдет речь в данной статье.

Главное различие img и background-image

Когда мы вспоминаем основное назначение html и css оно для нас становится очевидным, но почему-то пока над этим не задумываешься заметить его становится не так уж и просто.

Различие состоит в том, что картинки несущие смысловую нагрузку или же каким-либо образом относящиеся к содержанию страницы следует вставлять тегом img (картинки в тексте, баннеры, картинки слайдера, аватарки и тд). Все остальное (просто элементы оформления: различного рода разделители, маркеры, фоны и тд. ) следует вставлять в дизайн используя background-image.

В чем преимущества данного подхода?

• В первую очередь таким образом мы очищаем код страницы, что значительно улучшает его читабельность, упрощает понимание документа поисковым роботам, ускоряет загрузку страницы за счет все того же уменьшения документа, в общем крайне положительно сказывается на SEO оптимизации страницы.
• Используя img для вывода картинок несущих на себе смысловую нагрузку мы даем возможность поисковикам прочитать альты этих картинок и лучше понять что они из себя представляют, есть возможность получения дополнительного трафика на сайт из сервисов поиска по картинкам, получаем лучшую уникализацию контента (поисковики любят текст разбавленный картинками, поскольку это обычно улучшает поведенческие факторы посетителей ресурса).
• Различные рекламные сервисы, счетчики и CMS для вывода своего содержимого и аватарок посетителей используют картинки, что абсолютно нормально и логично, поскольку данные элементы по логике вещей относятся не к оформлению страницы, а к ее содержимому.

Нюансы из практики

• При печати страницы сайта теги img печатаются, а background-ы нет.
• Все, что желательно к индексации поисковиками выводим картинками, все что хотим скрыть- фонами.
• Браузеры разработанные для людей с ограниченными возможностями читают альты картинок, потому если изображение несет важный смысл, оно обязательно должно быть оформлено html тегом.
• Некоторые старые браузеры не поддерживают свойство background-size и для создания масштабируемого фона в них используется тег, а не свойство фона.
• Img с анимацией меньше нагружает браузеры.
• Для замены текста изображением лучше использовать background-image (к примеру, если нужно вывести заголовки красивыми картинками).
• Используя свойство фона мы можем вывести на странице только часть изображения.
• Вытекающая из предыдущего пункта фишка- background-image дает возможность использовать метод спрайтов (за счет того, что все иконки подгружаются с 1 картинки уменьшается количество обращений к серверу при загрузке страницы, что положительно сказывается на скорости) для ускорения загрузки сайта.
• Картинку спрятанную в фон сайта сложнее выкачать. Хотя как по мне для защиты своих уникальных изображений лучше использовать свои подписи на них, это хоть заставит плагиатщиков повозиться с приведением ее в порядок или же использовать прочие способы защиты уникального контента от копирования.

Подводя итоги

Ничего сложного в размежевании методов вывода изображений нет. С практикой все становится на свои места и даже интуитивно понятно, главное помнить, что все связанное с оформлением сайта должно быть помещено в css, а все связанное с его структурой и смысловым наполнением в html.

Ключевые слова: 

Оптимизация сайта

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

Как отличить контентное изображение от декоративного — Блог HTML Academy

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

Теория

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

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

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

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

Практика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

Что ещё знать о графике

• Форматы изображений для веба
• Как правильно написать alt-текст
• Фигма или Фотошоп. Что выбрать новичку

550+ фото фоновых изображений | Скачать бесплатные изображения на Unsplash

550+ фото фоновых изображений | Скачать бесплатные изображения на Unsplash

• A Photophotos 10k
• Степка фотосколций 10K
• Группа людей 2

Фон

Обои

Nature

Outdoor

Texture

. Unsplash+

В сотрудничестве с Маргарет Яшовской

Unsplash+

Разблокировать

Кекс изображения и картинкиКекс изображенияповаренная книга

Yiqun Tang

wallHq фоновые изображенияHd осенние обои

–––– –––– –––– – –––– – –––– – – – –– –––– – – –– ––– –– –––– – –.

Annie Spratt

Цветы фото hd цветы фоткифлора

Ryan Hoffman

mount shastaСШАHD обои

Efe Kurnaz

hd картинкиСветлый фонHD цветные обои

Jakob Rosen

Hd grey wallpapersmachinespoke

Unsplash logo

Unsplash+

In collaboration with Margaret Jaszowska

Unsplash+

Unlock

Cupcake images & picturesHd pink wallpapersHd blue wallpapers

William Daigneault

Nature imagesHd forest wallpapersHd wood wallpapers

Kajetan Sumila

suhrschweizЛистья фоны

Erol Ahmed

дверьПастельные обои hdЦветные обои высокого разрешения

Joël de Vriend

bridgeoutdoorsTravel images

Josh Calabrese

plantHd green wallpapersHd white wallpapers

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

hairphotographycool attitude

Artiom Vallat

franches- montagnessuisseground

William Daigneault

canadaquébec citytunnel

Sorrawis Chongcharoen

architecturebuildingHd sky wallpapers

Louis Maniquet

arcachonfranceIphone backgrounds

Leandra Rieger

Hq background imagesMoon images & picturesusa

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

portraitchildmaternity leave

Annie Spratt

Текстуры фоныHd обои деревоHd узор обои

Кекс фото и картинкиТорт фотоповаренная книга

mount shastaunited statesHd wallpapers

Hd grey wallpapersmachinespoke

Nature imagesHd forest wallpapersHd wood wallpapers

doorHd pastel wallpapersHd color wallpapers

plantHd green wallpapersHd white wallpapers

hairphotographycool attitude

canadaquébec citytunnel

arcachonfranceIphone backgrounds

portraitchildmaternity leave

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

wallHq background imagesHd autumn wallpapers

Flower imagesHd floral wallpapersflora

Hd wallpapersLight backgroundsHd color wallpapers

Cupcake images & picturesHd pink wallpapersHd blue wallpapers

suhrschweizLeaf backgrounds

bridgeoutdoorsTravel images

franches-montagnessuisseground

architecturebuildingHd sky wallpapers

Hq фоновые изображенияЛуна images & imagesusa

Похожие коллекции

Nice Photo for Background

390 фото · Куратор Gary Wang

Фотофон

66 фото · Куратор Katriana Young

Фоновое фото

42 фото · Куратор Tatiana wood Oooo Текстурированные обои 9Hd wallpapers 10s1 background

11 90 pattern

Кекс фотоПирожное фотографииповаренная книга

hd картинкиСветлый фонHD цветные обои

Природа фотографииHD лес фоткиHd дерево обои

Frydoutdoorstravel Images

Candagequebec CityTunnel

HQ фоновые изображения изображения и PicturesUSA

WallHQ FOOL ImageShd Обынный обои

MountaUnited Wallpapers

Cupcake Images и Pictrowhd Wallpapers WallPapers WallPapers Wallpers Wallpers Wallpers Wallperspers Wallparspers Wallperspers Wallparspers

111110.

архитектуразданиеHd небо обои

портретребенокдекретный отпуск

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Flower imagesHd floral wallpapersflora

Hd grey wallpapersmachinespoke

suhrschweizLeaf backgrounds

plantHd green wallpapersHd white wallpapers

Related collections

Nice Photo for Background

390 photos · Curated by Gary Wang

Photo Background

66 photos · Куратор Катриана Янг

Фоновое фото

42 фото · Куратор Татьяна Оооо

franches-montagnessuisseground

arcachonfranceФоны для iPhone

Текстурные фоныHd обои с деревянным рисункомHd обои с узором

Просмотр премиальных изображений на iStock | Скидка 20% на iStock

Логотип Unsplash

Сделайте что-нибудь потрясающее

Изменить фон изображения онлайн бесплатно

Автоматическая смена фона

Средство смены фона Fotor на основе искусственного интеллекта позволяет одним щелчком изменить фон любой фотографии в Интернете. Просто перетащите свою фотографию в инструмент изменения фона Fotor, и Fotor автоматически обнаружит и удалит фон с вашей фотографии в мгновение ока. Затем вы можете изменить фон изображения на что угодно: сплошные цвета, рисунок или текстуру фона, пейзажные фотографии и многое другое. Весь процесс занимает менее 5 секунд — просто и быстро!

Изменить фон сейчас

Изменить фон фотографий, чтобы придать им новый вид

Не нравится фон вашей фотографии? Замените на более качественный! Если вы хотите добавить новогодние фоны к фотографиям для праздничного настроения или изменить фон фотографии, чтобы создать профессиональное изображение профиля, Fotor поможет вам! Вы можете выбрать один из множества фонов HD-фотографий или загрузить собственное изображение, чтобы ваша фотография выглядела эффектно. Проявите творческий подход с помощью инструмента смены фона фотографий Fotor, чтобы придать вашим фотографиям новый вид.

Изменить фон сейчас

Изменить фон на белый для изображений продуктов электронной коммерции

Белый фон является одним из самых популярных фонов для интернет-магазинов, потому что он делает перечисленные продукты чистыми и сфокусированными. Используя Fotor, вы можете легко и быстро добавлять белый фон к фотографиям ваших товаров. Средство смены фона Fotor также предоставляет набор инструментов редактирования, которые помогут вам изменить фон фотографии: размыть фон, отрегулировать освещение, удалить ненужные объекты с фона, изменить цвет фона и многое другое. Легко оптимизируйте изображения вашего продукта для наилучшего воздействия.

Сменить фон прямо сейчас

Широкий выбор фоновых рисунков

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

Изменить фон сейчас

Бесплатное приложение Photo Background Changer для iOS и Android

Меняйте фон фотографии кончиками пальцев с помощью приложения Fotor для смены фона фотографии. Вы можете изменить фон фотографии на прозрачный и добавить эстетичный фон, чтобы ваша фотография выглядела идеально одним нажатием. Кроме того, есть еще больше функций редактирования фотографий, которые вы можете использовать, чтобы оживить свои фотографии: добавить текст и наклейки, применить фотофильтры и т. д. Загрузите приложение Fotor, чтобы изменить фон прямо сейчас, и испытайте удивительно простой способ редактирования фотографий.

Изменить фон сейчас

Как изменить фон фотографии?

• Фон изображения легко изменить с помощью бесплатной онлайн-программы смены фона с искусственным интеллектом от Fotor. Нажмите кнопку «Изменить фон сейчас» на этой странице. Это откроет нашу страницу редактирования электронной коммерции Pic Maker.
• Нажмите кнопку «Выбрать фото», чтобы загрузить изображение, фон которого вы хотите изменить. Наш инструмент автоматически удаляет исходный фон изображения и применяет новый фон для вас.
• На ваш выбор представлены различные фоны, подходящие для продажи различных товаров.
• Когда вы закончите, нажмите кнопку «Загрузить», чтобы сохранить изображения продукта. Доступны форматы JPG, PNG и PDF.

Фон смены сейчас

Мраморные чернила

Scroplawl

Одежда

Стена

Дерево

Sparkle

Часто задаваемые вопросы

, где я могу получить бесплатное фонефирование?

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

Какое программное обеспечение для смены фона лучше?

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