写点什么

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

  • 2014-10-22
  • 本文字数:1310 字

    阅读完需:约 4 分钟

Google 在最近发布的 Chrome 38 中,增加了对元素的支持,让开发者能够针对不同类型的媒体查询(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 来实现这一功能,但是实际上我们并不提倡这种做法,因为某些用户代理会在加载和运行任何脚本之前就下载页面图片;另一些则会在运行脚本、下载图片之前,让页面呈现出空白图片占位。因此,推荐的解决方案是使用<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>

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

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

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

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

2014-10-22 03:151622
用户头像

发布了 256 篇内容, 共 78.3 次阅读, 收获喜欢 10 次。

关注

评论

发布
暂无评论
发现更多内容

本科毕业斩获字节offer的我做了什么准备?大厂面试经验试题分享

Java 程序员 后端

栈实现队列(队列实现栈),java编程规范pdf百度云

Java 程序员 后端

元宇宙到底是个啥?

石云升

元宇宙 10月月更

数据结构系列第六部分:排序,Github爆火的《高并发秒杀顶级教程》

Java 程序员 后端

是什么Java面试题PDF被Git全面封杀?刷完这套题已经拿完9个Offer!

Java 程序员 后端

普通程序员就不能有拥有架构师光环?想要建立架构思维,这份京东架构技术精髓一定不能错过

Java 程序员 后端

是什么让普通的链表也能达到二分查找的效率,你知道吗?

Java 程序员 后端

有个厉害的程序员老婆是什么体验?,mysql性能优化面试题

Java 程序员 后端

数据源的概念是什么?Springcloud+Mybatis如何使用多数据源

Java 程序员 后端

斯坦福高效睡眠法-读书笔记,这可能是目前最全的

Java 程序员 后端

无论你是什么职业,这篇职场生存法则都是你必备的,java微服务架构技术

Java 程序员 后端

架构师成长之路-docker 搭建es集群,rocketmq教程教程

Java 程序员 后端

数据结构的栈和队列(这不进来看一看),计算机java语言入门

Java 程序员 后端

新人问一般都用哪些 Linux 命令,我把这个扔了过去,linux基础及应用教程课后答案

Java 程序员 后端

最新基准测试:Kafka、Pulsar-和-RabbitMQ-哪个最快,阿里Java笔试题目

Java 程序员 后端

最近被安排搞搜索接口优化,压测了4次,才勉强达到要求

Java 程序员 后端

本科毕业斩获字节offer的我做了什么准备?大厂面试经验试题分享(1)

Java 程序员 后端

查询太慢?看看ES是如何把索引的性能压榨到极致的!,java基础程序设计

Java 程序员 后端

来自阿里大牛20000字总结-+-40张图文详解,我就不信你还参透不了并发编程

Java 程序员 后端

极速体验docker容器健康,高并发分布式系统架构

Java 程序员 后端

架构设计基础知识整理,java常用设计模式面试

Java 程序员 后端

数据库索引的原理,springcloud视频百度云

Java 程序员 后端

数论 - 约数基础 【 试除法求所有约数 + 约数个数和约数之和

Java 程序员 后端

月薪60k的Java开发在阿里是什么级别?对技术能力有哪些要求?

Java 程序员 后端

服了!阿里资深架构师发布SpringCloud笔记,在GitHub标星已达81

Java 程序员 后端

如何用内网渗透突破安全策略

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 安全漏洞

来自北京大学NOIP金牌选手yxc的常用代码模板4——数学知识

Java 程序员 后端

Go channel,面试官会这样问

Rayjun

channel Go 语言

普通本科,毕业六年,复盘一个月,mybatis一级缓存和二级缓存面试题

Java 程序员 后端

最新版SpringBoot开发实战:阿里技术官从基础到项目综合实战pdf

Java 程序员 后端

来自北京大学NOIP金牌选手yxc的常用代码模板3——搜索与图论

Java 程序员 后端

Chrome 38通过<picture>元素支持Art Direction_JavaScript_Abel Avram_InfoQ精选文章