web图像的常见应用策略与技巧.docVIP

web图像的常见应用策略与技巧 　　本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。 　　 　　1. 响应式图像的应用与回退 　　特点：应用简单，上手容易，性能表现良好 　　难点：lazyload实现 　　根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景： 　　1.1 固定尺寸图像 　　基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。 　　在dom里图像与在css里的图像写法如下面的例子 　　 　　1.2 不固定尺寸图像 　　与内容相关的图片，在需要响应式的时候，它们的大小往往并不是不变的，会随viewport改变，对于这类图像，也有两种常用的处理方式 　　1.2.1我们使用srcset搭配w描述符以及sizes属性 　　w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。 　　sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。 　　比如： 　　 　　我们来逐条读这一个im