Когда лучше использовать 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» используют, если необходимо сделать видимой только часть картинки.