@程序员，一文掌握 Web 应用中的图片优化技巧！(14)_：@程序员

{

.bg{

background-image: url( "bg@2x.png") // 尺寸为 200* 200的图

}

这么做有两个好处，一是保证高像素密度的设备下，图片仍能保持应有的清晰度，二是防止在低像素密度的设备下加载大尺寸图片造成浪费。

那么如何处理img标签呢？我们可以使用HTML5中img标签的srcset来达到这个效果，看看下面这段代码：

这段代码的作用是：当设备像素密度，也就是dpr(devicePixelRatio)为1时，使用bg.png，为2时使用二倍图bg@2x.png。

依此类推，你可以根据需要设置多种精度下要加载的图片，如果没有命中，浏览器会选择最邻近的一个精度对应的图片进行加载。要注意：老旧的浏览器不支持srcset的特性，它会继续正常加载src属性引用的图像。

安全地使用WebP图片

WebP的优势这里不再赘述，简单来说就是：同样尺寸的图片，WebP能保证比未压缩过的png、jpg、gif等格式的图片减少百分之40-70(甚至90)的比例，且保证较高的质量，更可以支持显示动态图和透明通道。

@程序员，一文掌握 Web 应用中的图片优化技巧！(14)