В каких ситуациях более целесообразно использовать тег HTML IMG для отображения изображения, а не CSS background-image и наоборот?
Факторы могут включать доступность, поддержку браузера, динамический контент или любые технические ограничения или принципы использования.
IMG, если вы намереваетесь иметь
люди распечатайте свою страницу, и вы хотите, чтобы изображение было включено по умолчанию.
< href= "https://stackoverflow.com/users/20153/jaytee" > JayTeeIMG (с текстом alt), когда изображение имеет важное семантическое значение, например значок предупреждения. Это гарантирует, что смысл изображения может быть передан во всех пользовательских агентах, включая считыватели экрана.IMG plus alt, если изображение
это часть содержимого, например логотип или диаграмма или персонаж (человек, не являющийся персональным персоналом).
sanchothefatIMG, если вы полагаетесь на масштабирование браузера, чтобы сделать изображение пропорциональным размеру текста.IMG
для нескольких оверлейных изображений в IE6.IMG с z-index в порядке
растянуть фоновое изображение, чтобы заполнить все его окно.IMG вместо background-image может значительно повысить производительность анимаций на фоне.background-image, если вы намереваетесь иметь
люди напечатайте свою страницу, и вы не хотите, чтобы изображение было включено по умолчанию.
< href= "https://stackoverflow.com/users/20153/jaytee" > JayTeebackground-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/> src.
Дополнительная информация о переходах на MDN.
В ответах рассматривается только дизайн. Я перечисляю его в аспектах SEO.
Когда использовать <img />
alt и title.Когда использовать CSS background-image
Как я буду использовать их по этим причинам. Это хорошая практика поисковой оптимизации изображений.
Браузеры не всегда настроены для печати фоновых изображений по умолчанию; если вы намереваетесь, чтобы люди печатали вашу страницу:)
Если у вас есть 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 для автоматизации процесса).
Также фоновые изображения полезны, если вы не хотите, чтобы пользователь мог сохранить изображение (хотя мне это никогда не приходилось делать).
Примерно так же, как ответ sanchothefat, но с другого аспекта. Я всегда спрашиваю себя: если я полностью удалю таблицы стилей с сайта, оставшиеся элементы будут принадлежать только содержимому? Если это так, я хорошо выполнил свою работу.
В некоторых ответах здесь описан более сложный сценарий. Это мертвая простая ситуация.
Просто ответьте на этот вопрос каждый раз, когда вы хотите разместить изображение:
Является ли эта часть содержимого или частью дизайна?
Если вы не можете ответить на это, вы, вероятно, не знаете, что делаете или что хотите!
Кроме того, НЕ рассматривайте этот метод, потому что вы хотите быть "дружественным к принтеру" или нет. Также НЕ скрывайте контент с точки зрения SEO с помощью CSS. Если вы обнаружите, что управляете своим контентом в файлах CSS, вы стреляли в ногу. Это всего лишь тривиальное решение о том, что является содержанием или нет. Следует игнорировать любой другой аспект.
Я бы добавил еще два аргумента:
Тег img хорош, если вам нужно изменить размер изображения. Например. если исходное изображение составляет 100 пикселей на 100 пикселей, и вы хотите, чтобы оно составляло 80 пикселей на 80 пикселей, вы можете установить ширину и высоту CSS тега img. Я не знаю, как это сделать, используя background-image. EDIT: теперь это можно сделать и с фоновым изображением, используя background-size атрибут CSS3.
Использование background-image полезно, когда вам нужно динамически переключаться между спрайтами. Например. если у вас есть изображение кнопки, и вы хотите, чтобы отдельное изображение отображалось при наведении курсора на элемент, вы можете использовать фоновое изображение, содержащее как нормальные, так и наводящие спрайты, и динамически менять положение фона.
Foreground = img.
Фон = фон CSS.
Используйте фоновые изображения только при необходимости, например. контейнеры с изображением, что плитки.
Один из основных PROS с помощью ИЗОБРАЖЕНИЙ заключается в том, что он лучше для SEO.
Используя фоновое изображение, вам необходимо точно указать размеры. Это может быть серьезной проблемой, если вы на самом деле не знаете их заранее или не можете определить их.
Большая проблема с <img /> является наложением. Что делать, если я хочу, чтобы внутренняя тень CSS на моем изображении (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? В этом случае, поскольку <img /> не может иметь дочерние элементы, вам нужно использовать позиционирование и добавлять пустые элементы, которые приравниваются к бесполезной разметке.
В заключение, это довольно ситуативно.
Используйте фоновое изображение CSS в случае нескольких скинов или версий дизайна. Javascript можно использовать для динамического изменения класса элемента, который заставит его отображать другое изображение. С тегом IMG это может быть более сложным.
Пара других сценариев, в которых следует использовать background-image:
img, изображение течет из закругленных углов.Здесь техническое соображение: будет ли изображение генерироваться динамически? Как правило, легче выражать тег <img> в HTML, чем пытаться динамически редактировать свойство CSS.
Еще одно преимущество использования <IMG> тег связан с SEO - то есть вы можете предоставить дополнительную информацию об изображении в атрибуте ALT тега изображения, в то время как нет способа предоставить такую информацию при указании изображения через CSS, и в этом случае может быть проиндексировано только имя файла изображения поисковыми системами. Атрибут ALT определенно дает <IMG> плюс преимущество SEO в CSS. Именно поэтому IMO вы должны указать изображения, которые хотите хорошо оценивать в результатах поиска изображений (например, поиск изображений Google) с помощью <IMG> тег.
Как насчет размера изображения? Если я использую тег img, браузер масштабирует изображение. Если я использую фон css, браузер просто вырезает кусок из большего изображения.
Кроме того, у меня есть раздел галереи, который имеет несогласованные размеры изображений, поэтому, несмотря на то, что эти изображения, очевидно, считаются содержимым, я использую фоновые изображения и центрирую их в div с заданным размером. Это похоже на то, что делает facebook в своих альбомах.
В отношении анимации изображений с использованием CSS TranslateX/Y (правильный способ анимации html). Если вы выполняете хронологию хронологии хронологических изображений CSS, которые анимируются против анимированных тегов IMG, вы увидите, что время рисования значительно короче для фоновых изображений CSS.
Есть еще одна причина! Если у вас есть отзывчивый дизайн и вы хотите разделить использование изображений с низким, средним и высоким разрешением для устройств через медиа-запросы, вы также должны использовать фон.
img является тегом html по какой-либо причине, поэтому его следует использовать. Для ссылок или для иллюстрации вещей люди, например: в статьях.
Также, если изображение имеет значение или должно быть доступно для клика, img лучше, чем css background. Для любой другой ситуации, я думаю, можно использовать css background.
Хотя, это предмет, который нужно обсуждать снова и снова.
Веб-студент из Парижа, Франция
Небольшой вход, У меня были проблемы с отзывчивыми изображениями, замедляющими рендеринг на iphone на минуту, даже с небольшими изображениями:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
Но при переключении на использование фоновых изображений проблема исчезла, это возможно только при ориентации на новые браузеры.
Чтобы добавить только небольшой, вы должны использовать тег img, если хотите, чтобы пользователи имели возможность "щелкнуть правой кнопкой мыши" и "сохранить изображение" / "сохранить изображение", поэтому, если вы намерены предоставить изображение как ресурс для других.
Использование фонового изображения (насколько мне известно в большинстве браузеров) отключает возможность сохранения изображения напрямую.
HTML предназначен для контента, а CSS - для дизайна. Требуется ли изображение и нужно ли его считывать с экрана? Если да, то поставьте изображение в HTML. Если это чисто для стилизации, то вы можете использовать свойство background-image в CSS для инъекции изображения. Как уже упоминалось много людей, вы можете использовать псевдоэлемент на изображении, если хотите.
Вы можете использовать теги IMG, если хотите, чтобы изображения были текуче и масштабированы для разных размеров экрана. Для меня эти изображения в основном являются частью контента. Для большинства элементов, которые не являются частью содержимого, я использую спрайты CSS, чтобы поддерживать минимальный размер загружаемого файла, если я действительно не хочу анимировать значки и т.д.
Я использую изображение вместо фонового изображения, когда хочу сделать их на 100% растяжимыми, которые поддерживаются в большинстве браузеров.
Если вы хотите добавить изображение только для специального контента на странице или только для одной страницы, вы должны использовать тег IMG, и если вы хотите разместить изображение на более чем одной странице, вы должны использовать фоновое изображение CSS.
Также обратите внимание, что большинство поисковых роботов не индексируют фоновые изображения CSS, поэтому фоновые изображения будут проигнорированы, и вы не сможете получить трафик от поисковых систем (без пользы SEO вкратце).
Если все изображения, определенные с помощью тегов, индексируются (если только они не исключены вручную) и могут привносить трафик из поисковых систем, если их атрибуты title/alt и имена файлов оптимизированы правильно (w.r.t какое-то ключевое слово).
Еще одно фоновое изображение PRO: Фоновые изображения для списков <ul>/<ol>.
Используйте фоновые изображения, если они являются частью общего дизайна и повторяются на нескольких страницах. Предпочтительно в фоновой форме спрайта для оптимизации.
Используйте теги для всех изображений, которые не являются частью общего дизайна, и, скорее всего, размещены один раз, например, специальные изображения для статей, людей и важных изображений, которые заслуживают добавления в изображения Google.
** Единственное повторное изображение, которое я заключу в теге <img>, является логотипом сайта/компании. Поскольку люди обычно нажимают на нее, чтобы перейти на домашнюю страницу, вы можете обернуть ее тегом <a>.
IMG загрузите сначала, потому что src находится в самом html файле, тогда как в случае background-image источник упоминается в таблице стилей, поэтому изображение загружается после загрузки таблицы стилей, задерживая загрузку веб-страницы.