Что лучше использовать: background-image или picture + object-fit?

Question

[Alexander Popow]

Есть вот такая статья "CSS свойство background-image как антипаттерн"

Кратко: автор предлагает отказаться от background-image в пользу picture + object-fit для фотографий и оставить background-image исключительно для фоновых картинок. Один из аргументов почему стоит так сделать, то, что изображения с background-image не индексируются поисковиками, нет атрибута alt и проч.

Да, picture вкупе с object-fit и object-position даст похожий эффект, индекс поисковиков и т.д. Но в таком случае, если нам надо отобразить текст/кнопку/другие блоки поверх картинки, то это надо делать абсолютом. Насколько такой подход оправдан?

Допустим, если картинка небольшая, и надо добавить поверх небольшой текст, то, ну, ок. А если у нас вот такой элемент - фоновую картинку ставим через img/picture/object-fit, а все блоки (в красных рамочках) через position: absolute. Либо задать background-image, но тогда такая картинка не проиндексируется, а у нас, например, таких картинок несколько в слайдере. Или это и есть тот случай фоновой картинки, когда надо использовать background-image?

Что вы думаете насчет всего этого? Как лучше реализовать?

Answer 1

[Максим]

Всегда стоит подходить к такому вопросу от смысловой составляющей.
Определить, контентное изображение, или декоративное. Декоративные в 95% случаев делаются через бэкграунд.

https://htmlacademy.ru/blog/boost/graphics/content...

Поэтому бэкграунд это не антипаттерн, это один из способов, который отлично подходит для декоративных изображений.

Answer 2

[Lord_Dantes]

Я думаю что фоновую картинку нужно верстать фоном - никак иначе. А обычную картинку - картинкой.

Answer 3

[FabiBoom]

Лично я думаю, что свойство хорошое и во многих случаях, когда нужно добавить именно контентное изображение на страницу, типо фотографии товара, можно спокойно использовать object-fit: cover, вместо аналога с background-image. Хотя, если честно, и это не часто нужно, так как зачастую получается провести грань между декоративным и контентным изображением, и тут уже не стоит выбор, что использовать.
У вас в примере изображения слайдов можно делать через background-image, ну только если вы не считаете ее контентной, важной для конечного пользователя. Значит можно спокойно вставить как изображение и еще й что-то в alt добавить. И вы говорите о абсолютном позиционировании, разве нельзя пойти от обратного и позиционировать не блоки, а картинку? Кроме того, можно отлично подключить сюда и гриды, у которых поддержка не хуже object-fit.