В каких ситуациях более целесообразно использовать HTML- IMG
тег для отображения изображения, а не CSS-код background-image
и наоборот?
Факторы могут включать в себя доступность, поддержку браузера, динамический контент или любые технические ограничения или принципы юзабилити.
html
css
image
background-image
системная ПАУЗА
источник
источник
Ответы:
Правильное использование IMG
IMG
если вы хотите, чтобы люди печатали вашу страницу, и вы хотите, чтобы изображение было включено по умолчанию. - JayTeeIMG
(сalt
текстом), когда изображение имеет важное семантическое значение, например значок предупреждения . Это гарантирует, что значение изображения может быть передано во всех пользовательских агентах, включая программы чтения с экрана.Прагматическое использование IMG
IMG
атрибут плюс alt, если изображение является частью содержимого, такого как логотип, диаграмма или человек (реальный человек, а не люди с фотографиями). - sanchothefatIMG
если вы полагаетесь на масштабирование в браузере для рендеринга изображения пропорционально размеру текста.IMG
для нескольких наложенных изображений в IE6 .ИспользуйтеIMG
сz-index
, чтобы растянуть фоновое изображение, чтобы заполнить все его окно.Обратите внимание, что это больше не относится к CSS3 background-size; см. № 6 ниже.
img
вместоbackground-image
может значительно улучшить производительность анимации на фоне.Когда использовать CSS background-image
background-image
если вы хотите, чтобы люди печатали вашу страницу, и вы не хотите, чтобы изображение было включено по умолчанию. - JayTeebackground-image
если вам нужно улучшить время загрузки, как со спрайтами CSS .background-image
если вам нужно, чтобы была видна только часть изображения, как со спрайтами CSS.background-image
сbackground-size:cover
, чтобы растянуть фоновое изображение, чтобы заполнить все его окно.источник
<div class="my-css-page-styles" style="background-image:url(blah.png);"></div>
образом вы можете стилизовать его в своей таблице стилей CSS, но если фоновое изображение - это больше вопрос содержания, чем стиля, то вы все равно редактируете его со стороны HTML.Это черно-белое решение для меня. Если изображение является частью содержимого, такого как логотип, диаграмма или человек (реальный человек, а не люди с фотографиями), используйте
<img />
атрибут tag плюс alt. Для всего остального есть CSS фоновые изображения.Другой раз, чтобы использовать фоновые изображения CSS, когда вы делаете замену текста, например. пункты / заголовки.
источник
Я удивлен, что никто еще не упомянул это: переходы CSS .
Вы можете изначально перенести
div
фоновое изображение:Это экономит любые JavaScript или JQuery анимации выцветает
<img/>
«Ssrc
.Больше информации о переходах на MDN .
источник
#some_div { transition: opacity 0.5s; }
,#some_div:hover #top_img { opacity: 0; }
Над ответами рассматривается только аспект дизайна. Я перечисляю это в аспектах SEO.
Когда использовать
<img />
alt
иtitle
приписать.Когда использовать CSS
background-image
Как я буду использовать их на основании этих причин. Это хорошие практики поисковой оптимизации изображений.
источник
Браузеры не всегда настроены на печать фоновых изображений по умолчанию; если вы хотите, чтобы люди печатали вашу страницу :)
источник
Если у вас есть CSS во внешнем файле, то часто удобно отображать изображение, которое часто используется на сайте (например, изображение заголовка), в качестве фонового изображения, потому что тогда у вас есть возможность изменить изображение позже.
Например, скажем, у вас есть следующий HTML:
... и CSS:
Через несколько дней вы меняете расположение изображения. Все, что вам нужно сделать, это обновить CSS:
В противном случае вам придется обновлять
src
атрибут соответствующего<img>
тега в каждом файле HTML (при условии, что вы не используете серверный язык сценариев или CMS для автоматизации процесса).Также фоновые изображения полезны, если вы не хотите, чтобы пользователь мог сохранить изображение (хотя мне никогда не требовалось это делать).
источник
Примерно так же, как ответ Санчотефата , но с другой стороны. Я всегда спрашиваю себя: если бы я полностью удалил таблицы стилей с сайта, оставшиеся элементы относятся только к контенту? Если так, я хорошо выполнил свою работу.
источник
Некоторые ответы усложняют сценарий здесь. Это очень простая ситуация.
Просто отвечайте на этот вопрос каждый раз, когда вы хотите разместить изображение:
Это часть контента или часть дизайна?
Если вы не можете ответить на этот вопрос, вы, вероятно, не знаете, что вы делаете или что вы хотите сделать!
Кроме того, НЕ рассматривайте эти две техники просто потому, что вы хотите быть «дружелюбными к принтеру» или нет. Также НЕ скрывайте контент с точки зрения SEO с помощью CSS. Если вы обнаружите, что управляете своим контентом в CSS-файлах, вы попали себе в ногу. Это просто тривиальное решение о том, что является контентом или нет. Любой другой аспект следует игнорировать.
источник
Я бы добавил еще два аргумента:
IMG тег хорошо , если вам нужно изменить размер изображения. Например, если исходное изображение имеет размер 100 на 100 пикселей и вы хотите, чтобы оно было 80 на 80 пикселей, вы можете установить ширину CSS и высоту тега img.
Я не знаю ни одного хорошего способа сделать это, используя background-image.РЕДАКТИРОВАТЬ: Теперь это также можно сделать с background-image, используяbackground-size
атрибут CSS3.Использование background-image хорошо, когда вам нужно динамически переключаться между спрайтами . Например, если у вас есть изображение кнопки и вы хотите, чтобы при наведении курсора на элемент отображалось отдельное изображение, вы можете использовать фоновое изображение, содержащее как нормальный, так и всплывающий спрайты, и динамически изменять положение фона.
источник
background-size: 80px 80px;
Еще одно преимущество использования тега <IMG> связано с SEO - то есть вы можете предоставить дополнительную информацию об изображении в атрибуте ALT тега изображения, в то время как нет возможности предоставить такую информацию при указании изображения с помощью CSS и В этом случае поисковые системы могут индексировать только имя файла изображения. Атрибут ALT определенно дает SEO-тегу <IMG> преимущество перед подходом CSS. Вот почему, по моему мнению, лучше указывать изображения, которые вы хотите получить высокий рейтинг в результатах поиска изображений (например, Google Image Search), используя тег <IMG>.
источник
Передний план = img.
Фон = CSS фон.
источник
Используйте фоновые изображения только при необходимости, например, контейнеры с изображением, которое выложено плиткой.
Одним из основных ПРОФИ путем использования ИЗОБРАЖЕНИЙ , что это лучше для SEO .
источник
Используя фоновое изображение, вам необходимо абсолютно точно указать размеры. Это может быть серьезной проблемой, если вы на самом деле не знаете их заранее или не можете их определить.
Большая проблема с
<img />
оверлеями. Что если я хочу использовать внутреннюю тень CSS на моем изображении (box-shadow:inset 0 0 5px rgb(0,0,0,.5)
)? В этом случае, поскольку<img />
не может иметь дочерних элементов, вам нужно использовать позиционирование и добавлять пустые элементы, что равносильно бесполезной разметке.В заключение, это довольно ситуативный.
источник
Несколько других сценариев, где
background-image
следует использовать:Когда вы хотите добавить закругленные углы к изображению. Если вы используетеimg
, изображение вытекает из закругленных углов.источник
img { border-radius: 10px; }
border-radius
не работал.Используйте CSS background-image в случае нескольких скинов или версий дизайна. Javascript может использоваться для динамического изменения класса элемента, что заставит его отображать другое изображение. С тэгом IMG это может быть сложнее.
источник
Вот техническое соображение: будет ли изображение генерироваться динамически? Как правило, генерировать
<img>
тег в HTML гораздо проще, чем пытаться динамически редактировать свойство CSS.источник
Как насчет размера изображения? Если я использую тег img, браузер масштабирует изображение. Если я использую CSS-фон, браузер просто вырезает кусок из большего изображения.
источник
Что касается анимации изображений с помощью CSS TranslateX / Y (правильный способ анимировать HTML) - если вы сделаете запись Chrome временной шкалы анимированных фоновых изображений CSS и анимированных тегов IMG, вы увидите, что время рисования для CSS значительно меньше. фон-изображения.
источник
Есть еще одна причина! Если у вас адаптивный дизайн и вы хотите разделить использование изображений с низким, средним и высоким разрешением для устройств с помощью медиа-запросов, вам также следует использовать фоновые изображения.
источник
Кроме того, у меня есть раздел галереи с непоследовательными размерами изображений, поэтому, хотя эти изображения явно считаются содержимым, я использую фоновые изображения и центрирую их в элементах div с заданным размером. Это похоже на то, что делает Facebook в своих альбомах.
источник
img является html-тегом по причине, поэтому его следует использовать. Для ссылок или для иллюстрации вещей люди, например: в статьях.
Также, если изображение имеет смысл или должно быть кликабельно, img лучше, чем фон css . Для всех других ситуаций, я думаю, можно использовать фон CSS .
Хотя это тема, которую нужно обсуждать снова и снова.
Веб-студент из Парижа, Франция
источник
Просто добавьте небольшой тег, вы должны использовать тег img, если хотите, чтобы пользователи могли «щелкнуть правой кнопкой мыши» и «save-image» / «save-picture», поэтому если вы намереваетесь предоставить изображение в качестве ресурса для другие.
Использование фонового изображения (насколько я знаю в большинстве браузеров) отключит возможность сохранения изображения напрямую.
источник
Небольшой ввод, у меня были проблемы с адаптивными изображениями, замедляющими рендеринг на iphone до минуты, даже с небольшими изображениями:
Но при переходе на использование фоновых изображений проблема исчезла, это возможно только при использовании новых браузеров.
источник
IMG
Сначала загрузите, потому что онsrc
находится в самом html-файле, тогда как в случаеbackground-image
источника упоминается в таблице стилей, поэтому изображение загружается после загрузки таблицы стилей, что задерживает загрузку веб-страницы.источник
background-image
через некоторое время обновляют CSS : если у вас открыто несколько вкладок, когда вы возвращаетесь на вкладку через некоторое время, фон CSS на некоторое время остается пустым.HTML для контента и CSS для дизайна. Нужно ли изображение, и должно ли оно быть снято программами чтения с экрана? Если ответ «да», поместите изображение в HTML. Если это чисто для стиля, то вы можете использовать свойство background-image в CSS для вставки изображения. Так же, как многие люди здесь уже упоминали, вы можете использовать псевдоэлемент на изображении, если хотите.
источник
Также обратите внимание, что большинство пауков поисковых систем не индексируют фоновые изображения CSS, поэтому фоновые изображения будут игнорироваться, и вы не сможете получать трафик от поисковых систем (короче говоря, никакой пользы для SEO).
Где, поскольку все изображения, определенные с помощью тегов, индексируются (если не исключены вручную) и могут приносить трафик от поисковых систем, если их атрибуты title / alt и имена файлов оптимизированы должным образом (по отношению к некоторым ключевым словам).
источник
Вы можете использовать теги IMG, если хотите, чтобы изображения были плавными и масштабировались до разных размеров экрана. Для меня эти изображения в основном являются частью контента. Для большинства элементов, которые не являются частью содержимого, я использую спрайты CSS, чтобы сохранить минимальный размер загрузки, если я действительно не хочу анимировать значки и т. Д.
источник
Я использую изображение вместо background-image, когда я хочу сделать их растягиваемыми на 100%, что поддерживается в большинстве браузеров.
источник
Если вы хотите добавить изображение только для специального содержимого на странице или только для одной страницы, вам следует использовать тег IMG, а если вы хотите разместить изображение на нескольких страницах, вам следует использовать фоновое изображение CSS.
источник
Другое background-image PRO: Фоновые изображения для
<ul>
/<ol>
списков.Используйте фоновые изображения, если они являются частью общего дизайна и повторяются на нескольких страницах. Предпочтительно в фоновом виде спрайт для оптимизации.
Используйте теги для всех изображений, которые не являются частью общего дизайна и, скорее всего, размещены один раз, например, конкретные изображения для статей, людей и важные изображения, которые заслуживают добавления в изображения Google.
** Единственное повторяющееся изображение, которое я включаю в
<img>
тег, - это логотип сайта / компании. Поскольку люди, как правило, щелкают по нему, чтобы перейти на домашнюю страницу, таким образом, вы оборачиваете его<a>
тегом.источник