Background images: background-image or position absolute?

HTML & CSS
1

I am building a Gutenberg block for Wordpress that will allow custom background images.

What’s the better way to handle it by way of html layout and css? I think background-image property is the more straightforwad way to do it, but using something like

<picture>
  <source media="(min-width: 1200px)" srcset="path-to-large-image.jpg">
  <source media="(min-width: 768px)" srcset="path-to-medium-image.jpg">
  <img src="path-to-small-image.jpg" alt="Responsive Background Image" class="responsive-background">
</picture>

offers the benefit of allowing more image sizes…

3

I know nothing about Wordpress or Guttenberg blocks but if the images are basically decoration only then you should really use background images.

You can set different background images in the media queries (as you do with the picture element) and only that background image will be loaded when the media query is active. (The picture element was basically a way of mimicking this existing behaviour for html images.)

In general images in the css only get called for once they are shown on the page. Otherwise imagine all the images you have in a massive css file and if the browser loaded every one it saw that came from multiple pages of a site.