写点什么

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:151808
用户头像

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

关注

评论

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

思维导图真有效?亲测5款好用的AI思维导图软件!

彭宏豪95

思维导图 在线白板 协同办公 AIGC 效率软件

一款高温型霍尔效应传感器

芯动大师

Alfred 5汉化版:Mac用户推崇的效率工具

Rose

效率工具 Alfred 5 Alfred 5破解版 Alfred 5汉化版

JetBrains pycharm pro 最新密钥激活 v2023.3.3中文版安装教程

Rose

内置AI加速器,第五代英特尔至强打造更可靠性能和更出色能效

E科讯

释放创新潜能!英特尔携广泛生态伙伴赋能5G核心网

E科讯

英特尔边缘平台亮相MWC 2024,模块化设计引领行业创新

E科讯

SPSS 打开提示“服务器登录:本地计算机”的解决办法

Rose

顶级的数据库建模与设计工具:Navicat Data Modeler Ess中文直装版

Rose

数据库 navicat

Find Any File (FAF) :高效的本地文件搜索查找工具

Rose

文件搜索工具 Find Any File

AppleScripts、Shell脚本编写调用工具:FastScripts for Mac

Rose

【架构笔记1】剃刀思维-如无必要,勿增实体

文思源想

软件架构设计 文思架构笔记 设计感悟

在哥伦布的凯旋港,为全球智能化造一艘云船

脑极体

云计算 AI

2023 re:Invent AI 生成产品体验,从 Bedrock 到 Amazon Q

亚马逊云科技 (Amazon Web Services)

生成式人工智能

Parallels Desktop 18完美激活版:高效、便捷、多样化的虚拟化解决方案

Rose

Parallels Desktop 18 pd虚拟机 苹果电脑 Mac虚拟机下载

如何通过快速且安全的API基础设施策略为工程师赋能并提升效率,同时避免影子IT

Gingxing

kong API网关 Kong 网关 消息网关 Kong Gateway

最新版VMware Fusion Pro 13 虚拟机 13.5.1激活密钥分享

Rose

VM虚拟机 VM密钥 虚拟机软件 VMware Fusion Pro破解版

Kaleidoscope for Mac:强大易用的文件比较利器

Rose

数仓的等待视图中,为什么会有Hashjoin-nestloop

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 华为云GaussDB(DWS)

深入理解 Java 修饰符与封装:访问权限、行为控制与数据隐藏

小万哥

Java 程序人生 编程语言 软件工程 后端开发

ExpressScribe PRO for Mac:转录过程更快、更高效

Rose

转录软件 Express Scribe

最常用的几款Paas平台编译构建工具的对比

软件开发 PaaS 华为云 编译构建

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