Google 在最近发布的 Chrome 38 中,增加了对
对于同样的图片,与传统的 PNG 或 JPG 图像格式相比,采用 Google 带来的 WebP 图像格式,下载流量最多将能够减少 25-34%。不过,尽管该图像格式能够降低网络传输数据量,从而使 Web 页面的上传速度将得以小幅提升,但为了满足 Web响应式设计的需求,还需要引入其他解决方案。
例如,根据 DPR``(设备 -``像素 -``比率),<img>``元素的 srcset``属性可以用来渲染若干固定尺寸图像中的一幅,如下图所示:
<img src="/images/100-example.jpg" srcset="/images/150-example.jpg 1.5x, /images/200-example.jpg 2x" alt="" width="100" height="150">
而另一个方案是基于视区(viewport)大小,呈现经过缩放的图像:
<img sizes="100vw" srcset="example-200.jpg 200w, example-600.jpg 600w, example-1200.jpg 1200w” src="example-200.jpg">
从 Responsive Images Community Group (RICG)公布的信息来看,Chrome 34+、Safari 和 Firefox 33+(带有状态 flag)都支持 srcset 属性。微软则正在考虑为 IE 实现该特性。而 Opera 21+ 由于使用了 Chrome 的 Blink 引擎,所以同样支持该特性。WHATWG 小组详细列出了srcset 属性及其用法(点击查看详情)。
有时候,用户代理需要呈现完整图片,或是呈现部分图片并排除不相干的部分,而这取决于设备的物理大小、屏幕分辨率、朝向(垂直或水平)及其他方面的因素。我们可以从如下示例图片(由 responsiveimages.org 提供)来了解这个被称为 Art Direction 的方法。
尽管也可以使用 JavaScript 来实现这一功能,但是实际上我们并不提倡这种做法,因为某些用户代理会在加载和运行任何脚本之前就下载页面图片;另一些则会在运行脚本、下载图片之前,让页面呈现出空白图片占位。因此,推荐的解决方案是使用<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element">picture</a>
元素,它让开发者能够指定多重图像来源,并将它们与媒体查询结合。
下面的示例展示了为多种 DPR 提供不同图片来源的方法:
<picture> <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x"> < img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo"> </picture>
当浏览器无法识别
Google 最近还在其稳定版分支(stable channel)中公布了一份可以用在 Chrome 38 中进行测试运行的 Art Direction 的示例。运行该示例的时候,用户要想观测到效果,需要调整浏览器窗口的大小,强迫浏览器呈现不同的图片。
目前,只有Chrome 38+ 和Opera 25+ 能够完整地支持
查看英文原文: Chrome 38 Supports Art Direction through the picture Element
评论