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

【问题标题】：How to optimize background-image similar to <picture> tag?如何优化类似于 <picture> 标签的背景图像？
【发布时间】：2018-04-13 02:18:12
【问题描述】：

我做一个网站，下载速度非常重要，尤其是对于移动设备。如何像使用标签一样优化图像的加载，但对于'style'属性中的背景图像？

【问题讨论】：

你能再具体一点吗？你是如何用图片标签优化东西的？
@VictoriaRuiz 我的意思是为不同尺寸的屏幕加载不同的图片

标签： javascript html css image optimization

【解决方案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 查询

【讨论】：