I generally try not to ask people for help but rather trying to figure it out myself. However, after been trying to solve this for hours, spending equally many hours in different forum post, I am going crazy.
So here it goes, I came across this article about SEO performance in which the author said:
When it comes to blog posts, we upload four files of different sizes and dimensions, each tailored to its specific placement. Without this setup, we’d load large images where only a small thumbnail image is actually rendered to the user — slowing page speed.
So the $10000 questions is how on earth they do that? I.e. bind different background images from the collection for different breakpoints?