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

В каких ситуациях более целесообразно использовать HTML- IMGтег для отображения изображения, а не CSS-код background-imageи наоборот?

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

Правильное использование IMG

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

Прагматическое использование IMG

1. Используйте IMGатрибут плюс alt, если изображение является частью содержимого, такого как логотип, диаграмма или человек (реальный человек, а не люди с фотографиями). - sanchothefat
2. Используйте, IMGесли вы полагаетесь на масштабирование в браузере для рендеринга изображения пропорционально размеру текста.
3. Используйте IMG для нескольких наложенных изображений в IE6 .
4. Используйте IMGс z-index, чтобы растянуть фоновое изображение, чтобы заполнить все его окно.
   Обратите внимание, что это больше не относится к CSS3 background-size; см. № 6 ниже.
5. Использование imgвместо background-imageможет значительно улучшить производительность анимации на фоне.

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

1. Используйте фоновые изображения CSS, если изображение не является частью содержимого . - sanchothefat
2. Используйте CSS фоновые изображения при замене текста, например. пункты / заголовки. - sanchothefat
3. Используйте, background-imageесли вы хотите, чтобы люди печатали вашу страницу, и вы не хотите, чтобы изображение было включено по умолчанию. - JayTee
4. Используйте, background-imageесли вам нужно улучшить время загрузки, как со спрайтами CSS .
5. Используйте, background-imageесли вам нужно, чтобы была видна только часть изображения, как со спрайтами CSS.
6. Используйте background-imageс background-size:cover, чтобы растянуть фоновое изображение, чтобы заполнить все его окно.

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

Больше информации о переходах на MDN .

Над ответами рассматривается только аспект дизайна. Я перечисляю это в аспектах SEO.

Когда использовать <img />

1. Когда ваше изображение должно быть проиндексировано поисковой системой
2. Если это имеет отношение к содержанию, а не к дизайну.
3. Если ваше изображение не слишком маленькое (не знаковые изображения).
4. Изображения, где вы можете добавить altи titleприписать.
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;
}

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

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

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

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

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

Это часть контента или часть дизайна?

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

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

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

• IMG тег хорошо , если вам нужно изменить размер изображения. Например, если исходное изображение имеет размер 100 на 100 пикселей и вы хотите, чтобы оно было 80 на 80 пикселей, вы можете установить ширину CSS и высоту тега img. Я не знаю ни одного хорошего способа сделать это, используя background-image. РЕДАКТИРОВАТЬ: Теперь это также можно сделать с background-image, используя background-sizeатрибут CSS3.

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

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

Используйте 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 до минуты, даже с небольшими изображениями:

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

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

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

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>тегом.