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

《web图像的常见应用策略与技巧.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、web图像的常见应用策略与技巧　　本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。　　　　1.响应式图像的应用与回退　　特点：应用简单，上手容易，性能表现良好　　难点：lazyload实现　　根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景：　　1.1固定尺寸图像　　基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。　　在dom里图像与在css里的图像写

2、法如下面的例子　　　　1.2不固定尺寸图像　　与内容相关的图片，在需要响应式的时候，它们的大小往往并不是不变的，会随viewport改变，对于这类图像，也有两种常用的处理方式　　1.2.1我们使用srcset搭配w描述符以及sizes属性　　w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。　　sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。　　比如：　　　　我们来逐条读这一个img标签的信息：　　sr

3、cset，我们给浏览器准备了四个质量的图像，分别为36076812001920　　sizes，我们来告诉浏览器，在不同的环境下图像的宽度　　当视口不大于360的时候，图像显示宽度为100们的设置，显示了90vw。因为他的dpr更高，浏览器聪明的选择了1200质量的图像。　　　　这里我们可以欺骗一下浏览器：　　　　我们把360的图像，骗浏览器说这是1200的，然后把原本1200的扔天上去　　　　浏览器果然上当了，他把360的图当成1200的来用了。这里可能有些疑问，图像的宽度为什么不是90vw了哪？因为浏览器被骗了但是自己却不知道，他依然按照1200的图像，去适配dpr。414*90%

4、*（360/1200）约等于111.7。这种方式很智能，浏览器去根据你的sizes，从w列表里选择最适合的图像来调用显示。正因为他太智能了，在实际操作中可控性较差，有些我们想精确控制的图像显示，有时候并不能如意。而且在做lazyload的时候要处理的东西也比较复杂。　　这个时候可以考虑另外一种方式。　　1.2.2.picture元素，可精确把控　　picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。　　适用场景为：在一个精确特定的转效点（breakpoint）需要

5、显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。　　　　在本例中，当viewport大于960像素时，会加载图像960的图像。当viewport宽度大于768像素时，浏览器会加载768的。而当宽度小于768像素时，加载默认图像360。　　而且这个写法的懒加载非常好处理，只需要在传统的lazyload策略上稍加改进　　data-src　　data-srcset　　在加载到的时候更换为　　src　　srcset　　就轻松解决了。　　http://snghr.tencent.com里面使用较多　　他也不需要去特意做回退处理，当浏览器不支持的时候就直接读取

6、img标签。对于懒加载的回退……我选择判断IE7-8…直接塞url给他…..　　2.特殊格式的图像应用与回退　　特点：体积优化效果显著　　难点：兼容性掌控　　上面picture元素还可以提供基于图片格式选择。　　有一些图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错，但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错，但只有Chrome和Opera原声支持。JPEG-XR，最初被称为高清照片，是微软发布的一个专有图像格式，仅InternetExplorer支持。　　　　source的type属性用来指定每个图像的MIME类型，浏览器会选择第一个含有其

7、支持的MIME类型的源。源的顺序是至关重要的，如果浏览器无法识别所有的图象类型，它会回退至原来的img元素。　　但是目前这些格式的支持多数不会直接这么做，因为代码会有些冗余难看，有判断浏览器ua输出不同dom或者样式的，也有服务端直接输出的。服务端直接输出，或者CDN做特殊处理，进行无感知格式切换，同时预留url和拒绝的接口，处理起来更灵活，省时省力，例如我们的：　　　　服务端根据浏览器的请求头，返回不同的图像格式，对于X5内核还可以支持sharpP。