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

Это черно-белое решение для меня. Если изображение является частью контента, такого как логотип или диаграмма, или человек (реальный человек, а не люди с фотографией), используйте атрибут <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

Когда использовать 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 для автоматизации процесса).

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

Примерно так же, как ответ 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 /> не может иметь дочерние элементы, вам нужно использовать позиционирование и добавлять пустые элементы, которые приравниваются к бесполезной разметке.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Просто бросьте гаечный ключ в свои работы - я считаю, что вы никогда не должны использовать тег img. HTML предназначен для контента, а не для визуального стиля. все изображения на вашей странице должны поступать из CSS, оставляя ваш HTML-код чистым. (даже если это займет немного больше времени для сборки)