水墨中国

新兴Web图片

  • 15-04-06
  • font-end
  • image

##WebP(转) 不管是PC端还是移动端，图片一直是流量大头，苹果公司的Retina产品为代表的高PPI屏对图片的质量提出了更高的要求，如何保证在图片精细度不降低的前提下缩小图片体积，成为一个有价值且值得探索的事情。

###什么是WebP WebP，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式VP8。根据Google的测试，无损压缩后的WebP比PNG文件少了45%的文件大小，即使这些PNG文件经过其他压缩工具压缩之后，WebP还是可以减少28%的文件大小。

###WebP 的优势 picture

1、PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩

2、转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）

3、转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

WebP的优势体现在它具有更有的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha透明以及动画的特性，在JPEG和PNG上的转化搜过都非常优秀、稳定和统一

科技博客 Gig‍‍‍aOM 曾报道：YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

###兼容性与可用性 如果你的网站以图片为主，或者你的图片基于Chromium内核，建议体验尝试。假如你打算在Append中使用WebP，除了Android4.0以上提供的原生支持外，其他版本以及iOS都可以直接使用官方提供的解析库（Android、iOS）

###综合技术方案 1、若使用场景是浏览器，可以：

Javascript能力检测，对支持 WebP 的用户输出 WebP图片

使用WebP支持插件：WebP JS

2、若使用场景是Append，可以：

Android 4.0 以下 WebP解析库链接

iOS WebP 解析库 链接

3、转换工具

智图

iSparta

##Data URL和图片 Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。

###Data URL原理 图片在网一种的使用方法通常是利用img标记形式

<img src="images/myimage.png" alt="">

这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉去资源的请求，占用网络资源。

大多数浏览器都有一个并发请求书不能超过4个的限制。这意味着，如果一个网页中嵌入了过多的外部资源，这些请求会导致整个页面家在延迟。而是用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，形式如下

<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

几乎所有的现代浏览器都支持DataURL格式，包括Firefox、Chrome、Safari、Opera。IE9完全支持。

###DataURL的适用场景 1、当访问外部资源很麻烦或受限时

2、当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。

3、当图片的体积太小，占用一个HTTP会话很不值得时。

###不适用的场景 1、Base64编码的数据体积通常是原数据的 4/3，也就是DataURL形式的图片会比二进制格式的图片体积大 1/3。

2、DataURL形式的图片不会被浏览器缓存，这意味着每次访问这样的页面时都被下载一次。

###CSS里使用DataURL 诚然，无法否认缓存在浏览器性能中的重要作用——如何能将DataURL数据也放入浏览器缓存中？

答案是通过：CSS样式文件。因为浏览器可以缓存CSS啊！

###如何转换成DataURL格式 这里提供两款工具：

DataURLMaker在线工具

DataURLMaker Max OS X 桌面工具

##srcset属性 srcset属性是由W3C旗下的响应式图片社区首先提出的，目的是旨在为使用不同分辨路的不同浏览器用户提供适合其浏览环境的图片大小的解决方案。

###srcset的用法 srcset属性的目的是在于允许开发者为某个图片的属性指定一系列的来源，其中这些图片的来源是要根据客户显示器的像素分辨率而设定的 <img src="low-res.jpg" srcset="high-res.jpg 2x"> //HTML 5 <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture> 在低分辨率的显示屏 && 不能识别srcset属性的浏览器中使用src中的图片；

在高分辨率屏幕中 && 能识别srcset属性的浏览器中使用srcset的图片；

其语法类似于苹果对Retina-ready图形卡的定义：开发人员只需提供一个备用的文件名和放大倍数，比如：1x、2x或4x。

“Resolution Multiplier”是用来衡量——多少个物理像素组成一个“像素点”的方法，例如：iPhone 5的屏幕分辨率为1136x640，但”显示分辨率”为568x320。这意味着4个物理像素组成了一个”显示像素”，或称”4x multiplier”。

###优点 1、持有有高分辨率显示设备的用户（典型的如苹果设备的用户）能很轻松得浏览那些能提供高质量图片的网站，从而带来很好的用户体验； 与此同时，那些使用普通显示分辨率的用户也不会因为网络带宽等问题而懊恼浏览高分辨率图片较多的网站，因为这些网站能提供适合他们观看的图片。

2、srcset属性在一定程度上考虑了带宽。真正令人兴奋的是，srcset是它定义为一组提供给浏览器的建议方案。然后，浏览器可以根据使用环境或用户的喜好去决定，它到底是使用一个较低的分辨率的图片还是使用高分辨率的图片。

###为什么不使用javascript实现 由于目前几个主要的浏览器对图片具有越来越强大的预读取功能(prefetch)，因为图片被读取之前，我们很难有机会去自定义脚本，最后我们为每一个图片发起了两个不同的请求。

###为什么不使用media查询来实现 1、在一些简单的比如示例性的页面上是没问题的，但如果一旦应用到生产环境的规模比较大的网站中去，是多少会出现性能上或者各种各样的问题。

2、从开发人员的角度看,它会导致用户每一次会请求很多并不需要的额外的样式和图片（当然除非你的CSS设计的十分仔细和谨慎）。

3、它使得我们的图片丢失了语义，这在搜索的环境下显得不是那么有利。

##参考文章 腾讯ISUX-WebP探寻之路

comments powered by Disqus