Когда использовать IMG по сравнениюCSS фоновое изображение?

https://stackoverflow.com/questions/492809

20-08-2019
|

Вопрос

В каких ситуациях более уместно использовать HTML IMG тег для отображения изображения, в отличие от CSS background-image, и наоборот?

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

Решение

Правильное использование IMG

Использование IMG если вы намерены иметь людей распечатайте свою страницу и вы хотите, чтобы изображение было включено по умолчанию.—ДжейТи
Использование IMG (с alt текст), когда изображение имеет важное семантическое значение, такое как предупреждающий значок.Это гарантирует, что значение изображения может быть передано всем пользовательским агентам, включая программы чтения с экрана.

Практическое использование IMG

Использование IMG плюс атрибут alt, если изображение является часть контента например, логотип, диаграмма или человек (реальный человек, а не люди со стоковых фотографий).—санчотефат
Использование IMG если вы полагаетесь на масштабирование браузера для рендеринга изображения пропорционально размеру текста.
Использование IMG для несколько наложенных изображений в IE6.
Использование IMG с помощью z-index для того, чтобы чтобы растянуть фоновое изображение чтобы заполнить все его окно.
Обратите внимание, что это больше не относится к CSS3 background-size;смотрите # 6 ниже.
Используя img вместо того , чтобы background-image может значительно повысить производительность анимации на заднем плане.

Когда использовать CSS background-изображение

Используйте фоновые изображения CSS, если изображение не является частью контента. —санчотефат
Используйте фоновые изображения CSS, когда делаете изображение-замена текста например.абзацы / заголовки.—санчотефат
Использование background-image если вы намерены иметь людей распечатайте свою страницу и вы не хотите, чтобы изображение было включено по умолчанию.—ДжейТи
Использование background-image если вам нужно увеличить время загрузки, как с CSS - спрайты.
Использование background-image если вам нужно, чтобы была видна только часть изображения, как в случае с CSS-спрайтами.
Использование background-image с background-size:cover для того, чтобы растянуть фоновое изображение так, чтобы оно заполнило все окно.

Другие советы

Для меня это черно-белое решение.Если изображение является частью контента, такого как логотип, диаграмма или человек (реальный человек, а не люди со стоковых фотографий), то используйте <img /> тег плюс атрибут alt.Для всего остального есть фоновые изображения CSS.

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

Я удивлен, что никто до сих пор не упомянул об этом: CSS - переходы.

Вы можете изначально преобразовать divфоновое изображение:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Это позволяет сохранить любой вид анимации JavaScript или jQuery, чтобы <img/>'s src.

Более подробная информация о переходах на MDN.

Приведенные выше ответы рассматривают только аспект дизайна .Я перечисляю это в разделе SEO aspects.

Когда использовать <img />

Когда ваш образ должен быть индексируется поисковой системой
Если это имеет отношение к контенту, а не к дизайну.
Если ваше изображение не слишком маленькое (не знаковые изображения).
Изображения, которые вы можете добавить alt и title атрибут.
Изображения с веб-страницы, которые вы хотите распечатать с помощью print media css

Когда использовать CSS background-image

Изображения, используемые исключительно для дизайна.
Никакого отношения к Контенту.
Небольшие изображения, которые мы можем воспроизвести с помощью CSS3.
Повторяющиеся изображения (значок автора блога, значок даты будут повторяться для каждой статьи и т.д.).

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

Браузеры не всегда настроены на печать фоновых изображений по умолчанию;если вы хотите, чтобы люди печатали вашу страницу :)

Если у вас есть CSS во внешнем файле, то часто бывает удобно отображать изображение, которое часто используется на сайте (например, изображение заголовка), в качестве фонового изображения, потому что тогда у вас есть возможность изменить изображение позже.

Например, допустим, у вас есть следующий HTML:

<div id="headerImage"></div>

...и CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

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

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

В противном случае вам пришлось бы обновить src атрибут соответствующего <img> тег в каждом HTML-файле (при условии, что вы не используете серверный язык сценариев или CMS для автоматизации процесса).

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

Примерно то же самое , что и ответ санхотефата, но с другой стороны.Я всегда спрашиваю себя:если бы я полностью удалил таблицы стилей с веб-сайта, выполните остальные элементы Только принадлежите к контенту?Если это так, то я хорошо выполнил свою работу.

Некоторые ответы чрезмерно усложняют сценарий здесь.Это до смерти простая ситуация.

Просто отвечайте на этот вопрос каждый раз, когда вы хотите разместить изображение:

Является ли это частью контента или частью дизайна?

Если вы не можете ответить на этот вопрос, вы, вероятно, не знаете, что делаете или чего хотите добиться!

Кроме того, НЕ рассматривайте эти два метода отдельно только потому, что вы хотели бы быть "дружественными к принтеру" или нет.Также НЕ скрывайте контент с точки зрения SEO с помощью CSS.Если вы обнаружите, что управляете своим контентом в файлах CSS, вы прострелили себе ногу.Это просто тривиальное решение о том, что является содержанием, а что нет.Все остальные аспекты следует игнорировать.

Я бы добавил еще два аргумента:

Ан изображение тег хорош, если вам нужно изменить размер изображение.Например.если исходное изображение имеет размер 100 на 100 пикселей, а вы хотите, чтобы оно было 80 на 80 пикселей, вы можете задать ширину и высоту CSS тега img. ~~Я не знаю ни одного хорошего способа сделать это с помощью background-image.~~ Редактировать:Теперь это также можно сделать с помощью фонового изображения, используя background-size Атрибут CSS3.
Используя фоновое изображение это хорошо, когда вам нужно динамически переключение между спрайтами.Например.если у вас есть изображение кнопки и вы хотите, чтобы при наведении курсора на элемент отображалось отдельное изображение, вы можете использовать фоновое изображение, содержащее как обычные спрайты, так и спрайты при наведении курсора, и динамически изменять положение фона.

Еще одно преимущество использования <IMG> тега связано с SEO - т. е.вы можете предоставить дополнительную информацию об изображении в атрибуте ALT тега image, в то время как нет способа предоставить такую информацию при указании изображения с помощью CSS, и в этом случае поисковые системы могут индексировать только имя файла изображения.Атрибут ALT определенно дает <IMG> тегу SEO преимущество перед CSS-подходом.Вот почему, на мой взгляд, лучше указать изображения, которые вы хотите хорошо ранжировать в результатах поиска изображений (напримерПоиск изображений в Google) с использованием <IMG> тега.

Передний план = изображение.

Background = фон CSS.

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

Один из главных ПЛЮСОВ при использовании Изображения это то, что это лучше для SEO.

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

Большая проблема с <img /> это наложения.Что делать, если я хочу, чтобы на моем изображении была внутренняя тень CSS (box-shadow:inset 0 0 5px rgb(0,0,0,.5))?В этом случае, поскольку <img /> не может быть дочерних элементов, вам нужно использовать позиционирование и добавлять пустые элементы, что приравнивается к бесполезной разметке.

В заключение, это довольно ситуативно.

Пара других сценариев , в которых background-image следует использовать:

Когда вы хотите, чтобы изображение менялось при наведении на него курсора мыши.
Когда вы хотите добавить к изображению закругленные углы.Если вы используете img, изображение вытекает из закругленных углов.

Используйте CSS background-image в случае нескольких скинов или версий дизайна.Javascript можно использовать для динамического изменения класса элемента, что заставит его отображать другое изображение.С тегом IMG это может быть сложнее.

Вот техническое соображение:будет ли изображение генерироваться динамически?Как правило, намного проще сгенерировать <img> тег в HTML, чем пытаться динамически редактировать свойство CSS.

Как насчет размера изображения?Если я использую тег img, браузер масштабирует изображение.Если я использую css background, браузер просто вырезает кусок из увеличенного изображения.

Что касается анимации изображений с использованием CSS translateX / Y (правильный способ анимации html) - если вы сделаете в Chrome временную шкалу записи анимируемых фоновых изображений CSS по сравнению с анимированными тегами IMG, вы увидите, что время рисования для фоновых изображений CSS значительно сокращается.

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

Кроме того, у меня есть раздел галереи, размеры изображений которого не совпадают, поэтому, хотя эти изображения, очевидно, считаются контентом, я использую фоновые изображения и центрирую их в divs с заданным размером.Это похоже на то, что facebook делает в своих альбомах..

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

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

Хотя это тема, которую нужно обсуждать снова и снова.

Веб-студент из Парижа, Франция

Просто небольшое дополнение, вам следует использовать тег img, если вы хотите, чтобы пользователи могли "щелкнуть правой кнопкой мыши" и "сохранить изображение" / "save-picture", то есть если вы собираетесь предоставить изображение в качестве ресурса для других.

Использование фонового изображения (насколько мне известно в большинстве браузеров) отключит возможность прямого сохранения изображения.

Небольшой вклад, У меня были проблемы с адаптивными изображениями, замедляющими рендеринг на iphone до минуты, даже с небольшими изображениями:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Но при переключении на использование фоновых изображений проблема исчезла, это возможно только при таргетинге на более новые браузеры.

IMG загружайте сначала, потому что src находится в самом html-файле, тогда как в случае background-image источник указан в таблице стилей, поэтому изображение загружается после загрузки таблицы стилей, задерживая загрузку веб-страницы.

HTML предназначен для контента, а CSS - для дизайна.Необходимо ли изображение и нужно ли его использовать для чтения с экрана?Если ответ "да", то поместите изображение в HTML.Если это исключительно для оформления, то вы можете использовать свойство background-image в CSS для вставки изображения.Как уже упоминали многие присутствующие здесь, затем вы можете использовать псевдоэлемент на изображении, если хотите.

Также обратите внимание, что большинство поисковых роботов не индексируют фоновые изображения CSS, поэтому фоновые изображения будут игнорироваться, и вы не сможете получать трафик от поисковых систем (короче говоря, никакой пользы для SEO).

Где, поскольку все изображения, определенные с помощью тегов, индексируются (если не исключены вручную) и могут привлекать трафик из поисковых систем, если их атрибуты title / alt и имена файлов оптимизированы должным образом (с использованием некоторого ключевого слова).

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

Я использую image вместо background-image, когда хочу сделать их на 100% растягиваемыми, что поддерживается в большинстве браузеров.

Если вы хотите добавить изображение только для специального контента на странице или только для одной страницы, вам следует использовать тег IMG, а если вы хотите разместить изображение более чем на одной странице, вам следует использовать CSS Background Image.

Еще один профессионал в области фоновых изображений:Фоновые изображения для <ul>/<ol> Списки.

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

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

** Единственное повторяющееся изображение, которое я помещаю в <img> тег - это логотип сайта / компании.Поскольку люди, как правило, нажимают на него, чтобы перейти на главную страницу, таким образом, вы оборачиваете его <a> пометка.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow