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

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

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

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

вы можете Изначально переход a div's фоновое изображение:

#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-аспектах.

при использовании <img />

1. когда ваше изображение должно быть индексируется поисковой системой
2. если это имеет отношение к контенту, а не к дизайну.
3. если ваше изображение не слишком маленький ( не иконы ).
4. изображения, где вы можете добавить alt и .
5. изображения с веб-страницы, которую вы хотите распечатать использование печатного носителя css

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

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

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

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

если у вас есть 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;
}

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

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

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

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

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

это часть содержания или часть дизайна?

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

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

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

• An img тег хорош, если вам нужно изменение размера изображение. Например, если исходное изображение 100px на 100 px, и вы хотите, чтобы оно было 80px на 80px, вы можете установить ширину CSS и высоту тега img. Я не знаю ни одного хорошего способа сделать это с помощью фонового изображения. EDIT: теперь это также можно сделать с фоновым изображением, используя background-size CSS3 атрибут.

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

передний план = img.

фон = CSS фон.

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

один из основных плюсов с помощью изображения что это лучше для SEO.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

хотя, это тема, которая должна быть обсуждена и свыше.

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

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

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

малый вход, У меня были проблемы с отзывчивыми изображениями, замедляющими рендеринг на 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-преимуществ вкратце).

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

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

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

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

другой фон-изображение PRO: фон-изображения для <ul>/<ol> списки.

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

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

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