如何优化类似于<picture>标签的背景图像？

Question

我制作网站并下载速度非常重要，特别是对于移动设备。 我如何像标记一样优化图像的加载，但是对于“样式”中的背景图像。属性？

Answer 1

你可以使用javascript ..

使用java脚本获取屏幕的宽度/高度，将其放入变量并执行if语句，然后设置元素的样式。

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

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

根据需要添加尽可能多的if语句，类似于@meda查询