Разница вставки изображений тегом или стилем?

Question

[alekssamos]

Объясните разницу вставки изображения через стили или тег img? Когда лучше одно, когда другое?

<a href="url"><i class="cat-icon" style="background-image: url('/images/icons/helmet.png')"></i> название</a>

<a href="url"><img src="/images/icons/helmet.png"> название</a>

Comments

[Вадим]

Вся разница идёт от определения контентных изображений и декоративных.
Если изображение контентное, то его следует вставлять через тэг img.
Оно будет в dom дереве и будет читаться как поисковиками, так и скринридерами. Его загрузка не зависит от успешно загруженного css файла, соответственно, если что то пойдёт не так и загрузится только html то картинка тоже загрузится(если она конечно есть по указанному пути) но даже если и не загрузится, то у картинок если атрибут alt который рекомендуется заполнять. И тогда вместо картинки отобразится содержимое этого атрибута и пользователь всё равно получит контент за которым пришёл.
А ещё у фоновых картинок более низкий приоритет загрузки.

Answer 1

[Андрей Федоров]

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