Для отображения картинок на веб-странице технически можно использовать как тэг Img, так или стиль CSS Background-image. Однако, хоть они и выглядят в результате при первом приближении одинаково, все же имеют существенные отличия, суть которых я раскрою в этой статье.
Тэг IMG
Изображения в этом теге являются неотъемлемой частью контента. Это иллюстрации, графики, прочие картинки, без которых страница потеряет часть своего смысла. Как и журнальная иллюстрация, такая картинка органично встроена в текст и имеет подпись (alt). Поэтому для IMG свойственно следующее:
— Хорошо индексируются поисковыми системами. Именно они появляются в Google-картинках.
— Выводятся при печати.
— Прекрасно масштабируются при увеличении или уменьшении пропорций текста в браузере.
— Работает перетаскивание при наведении мышью (drag-drop).
CSS Background-image
По смыслу это — фоновое изображение, то есть оно не является частью контента. По своей сути фон используется как часть дизайна, для украшения и не несет никакой смысловой нагрузки. Если его убрать, то страница не должна потерять свою читаемость и функциональность. Отсюда вытекают особенности:
— Не индексируются поисковыми системами.
— Не выводятся при печати по умолчанию. Надо включать в браузере специальную галочку, про которую далеко не все знают.
— В качестве способа оптимизации загрузки страницы могут быть использованы CSS-спрайты, когда одно изображение состоит из более мелких, которые выводятся в разных ситуациях.
— Перетаскивание мышью работает только для того блока, для которого изображение является фоном.
Таким образом, проанализировав особенности, приведенные выше, вы можете решить, какой способ вывода изображения на сайте в конкретной ситуации наиболее оптимален.