Зачем дублировать style="background" и img?

Question

[Макс]

Добрый день
Видил на некоторых сайтах такую конструкцию

<div class="background-image" style="background: url(/img.jpg) 50% 0%;">
     <img class="background-image" alt="Background Image" src="/img.jpg" style="display: none;">
</div>

Зачем дублируют изображение через CSS. Такое видел как для создания backgrounda для блока, так и для просто отображения Блоков на сайте (например портфолио).

Comments

[Ярослав Иванов]

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

[Макс]

Спасибо.

Answer 1

[Алексей Уколов]

Через css проще спозиционировать за счёт background-size и background-position, а img нужен, чтобы поисковики проиндексировали картинку.

Comments

[Макс]

Спасибо.

Answer 2

[Konstantin Trunov]

на самом деле ужасный подход. Если хочешь, чтобы поисковик проиндексировал картинку и хочешь использовать ее как background, пользуйся микроразметкой https://schema.org/ImageObject

Comments

[Макс]

Спасибо за ссылку. А что для поисковика уже не достаточно заполнить ALT? Зачем увеличивать длину кода (я конечно почитаю, но просто не встречал на российских сайтах микроразметку для изображений). Возможно микроразметку удобно использовать Дизайнерам/Фотографам для их блоков, где идет уникальный контент именно по изображениям.
<img src="" alt="Тут описание картинки" />

[Konstantin Trunov]

этого достаточно в ситуации когда ты просто используешь тег img.
Но ситуации бывают разные. и иногда действительно приходится навешивать на div background-image, потому что css свойство object-fit не имеет нормальной поддержки у некоторых браузеров, а тебе нужно дать картинке свойство contain или cover.

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

[Макс]

Спасибо за инфу.