html - img - как использовать background image




Когда использовать IMG против CSS-фона? (20)

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

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

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

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

Когда использовать фоновое изображение CSS

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

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

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


Foreground = img.

Фон = фон CSS.


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


В вышеприведенных ответах рассматривается только проектный аспект. Я перечисляю его в аспектах SEO.

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

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

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

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

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


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


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

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


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


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

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


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


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


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

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

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


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


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

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

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


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

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

Является ли эта часть контента или части дизайна?

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

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


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


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

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


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

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

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


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


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


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

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

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

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





background-image