BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Chrome 38通过<picture>元素支持Art Direction

| 作者 Abel Avram 关注 10 他的粉丝 ,译者 李彬 关注 1 他的粉丝 发布于 2014年10月23日. 估计阅读时间: 5 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

Google在最近发布的Chrome 38中,增加了对<picture>元素的支持,让开发者能够针对不同类型的媒体查询(media queries)请求,指定多种不同的图像来源。

对于同样的图片,与传统的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来实现这一功能,但是实际上我们并不提倡这种做法,因为某些用户代理会在加载和运行任何脚本之前就下载页面图片;另一些则会在运行脚本、下载图片之前,让页面呈现出空白图片占位。因此,推荐的解决方案是使用picture元素,它让开发者能够指定多重图像来源,并将它们与媒体查询结合。

下面的示例展示了为多种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>

当浏览器无法识别<picture>元素时,将使用<img>元素作为回滚方案。HTML规范包含了其他示例,展示如何使用多重图像来源,用于图像的裁切或不同的图像格式。

Google最近还在其稳定版分支(stable channel)中公布了一份可以用在Chrome 38中进行测试运行的Art Direction的示例。运行该示例的时候,用户要想观测到效果,需要调整浏览器窗口的大小,强迫浏览器呈现不同的图片。

目前,只有Chrome 38+和Opera 25+能够完整地支持<picture>元素。Firefox 33+也支持这一元素,但需要人工启用。而对IE或Safari来说,具体的情况目前尚不清楚。对于尚不支持这一特性的浏览器,想要创建响应式图片的开发者可以使用Picturefill Polyfill作为替代方案。

查看英文原文:Chrome 38 Supports Art Direction through the picture Element

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT