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

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

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

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

вы можете изначально перейти a 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.

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

также, если изображение имеет значение или должен быть кликабельным 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.

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

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

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

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