How to optimize background-image similar to <picture> tag?

Question

I make a website and download speed is extremely important, especially for mobile devices. How can I optimize the loading of images as we do with tag, but for background-image in 'style' attribute?

Answer 1

you can use javascript..

get width/height of screen with java script, put it in variable and do if statements and then set styling of element.

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

if(width>700){
document.getElementById("id").style.background="url('image.png')";
}

u add as many if statements as you need, similar to @meda queries