Когда лучше использовать HTML-тег IMG, а когда CSS-свойство background-image?

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

  • Использование IMG (вместо с атрибутом «alt») уместно, если Ваше изображение является частью контента, как например, рисунок, схема или диаграмма.
  • Используйте тег IMG, когда Вы предполагаете, что люди могут захотеть распечатать Вашу страницу, и картинка должна по умолчанию попасть на печать.
  • Используйте этот тег, если изображение имеет важное семантическое значение, например, предупреждающая иконка. Это будет гарантировать, что картинка отобразиться во всех программах-агентах, например, скрин-ридерах, а не только в браузерах.
  • Используйте тег IMG, когда Вы предполагаете использование масштабирование изображения браузером.
  • Используйте IMG для многослойного наложения изображений в IE6.
  • Использование IMG вместе со свойством «z-index» уместно, если необходимо растянуть фоновую картинку по всей ширине окна.
  • А ещё применение IMG может дать разительный прирост производительности по сравнении со свойством «background-image».

Использование «background-image»

  • Используйте это свойство, если картинка не является частью контента.
  • Используйте «background-image», если Вы делаете текст картинкой (например, в параграфах или заголовках).
  • Это свойство можно использовать, если Вы предполагаете, что Вашу страницу захотят распечатать, и Вы не хотите, чтобы рисунок попал на печать по умолчанию.
  • Применение «background-image» также может быть уместным, если Вы хотите улучшить время загрузки страниц.
  • «background-image» используют, если необходимо сделать видимой только часть картинки.