Что лучше использовать img или background?

Question

[rusglov]

Answer 1

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

Не важно, но например background не индексируется. соответственно минус трафик из картиночных сервисов поисковых систем.

Answer 2

[Павел]

Для SEO лучше img, либо если реализация через background проще то делайте, но и ниже делайте img просто Img скрывайте, поисковики все равно проиндексируют

Answer 3

[Сергей delphinpro]

В данном случае очевидно, что это не оформительские картинки, они являются контентом.
Значит нужно использовать тег img.
Для управления заполнением есть свойство object-fit.

Как вариант, можно совмещать два подхода.

<div style="background-image:url(image.jpg)"><img src="image.jpg"></div>

div {
  backgorund: no-repeat 50% 50%;
  background-size: cover;
}
div > img {
  opacity: 0;
}

Плюс такого подхода: и поисковая оптимизация, и поддержка background-size лучше, чем object-fit.

Comments

[ArtGenSky]

Разве не будет негативных последствий со стороны поисковиков за использование картинок с opacity: 0 ? Насколько я знаю, поисковики применяют санкции к сайтам, на которых присутствует спрятанный контент.
https://support.google.com/webmasters/answer/66353