写点什么

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

2014 年 10 月 22 日

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

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

关注

评论

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

程序员的晚餐 | 5 月 30 日 入梅天,来一盆小龙虾

清远

美食

【摘】Git-从零单排 02期

卡尔

git 原理 开发工具 工具链

浅说Docker基础知识与核心原理

岿然独存5

go Docker 软件

游戏夜读 | 记忆里的老游戏

game1night

面试造飞机系列:说下微服务接口设计原则?

柠檬橙

分布式 微服务 后端 架构设计

云上基础产品之对象存储

韩超

对象存储 公有云 S3

推荐几款有意思的小众App(05.30)

静陌

产品 App

谈谈控制感(12):选择什么样的工作

史方远

读书笔记 个人成长 随笔杂谈

用大数据分析了一线城市1000多份岗位招聘需求,告诉你如何科学找工作

柠檬橙

Python 数据分析

ARTS|Week 01 (2020第22周)

MiracleWong

算法 写作 ARTS 打卡计划

云上基础产品之虚拟私有云

韩超

公有云 VPC 虚拟私有云

Prometheus 2.18.0 新特性

耳东

Prometheus

Linux命令-df

一周思进

除了直接看余额,谁更有钱还能怎么比(二)

石君

去中心 零知识证明

ARTS-week-1

saddamwilson

ARTS 打卡计划

github看代码效率提高10倍!因为用了sourcegraph这个工具

柠檬橙

GitHub 程序员 效率工具

工作那么久,你还具备学习能力么?

夜来妖

学习 程序员成长

带你学够浪:Go语言基础系列-环境配置和 Hello world

柠檬橙

golang 后台开发

带你学够浪:Go语言基础系列 - 8分钟学基础语法

柠檬橙

程序员 后台开发 golan

Python 进阶与核心技术 dict & set

Bonaparte

Python 极客时间

一款霸榜 GitHub 的开源 Linux 资源监视器!

JackTian

GitHub Linux 开源项目 bashtop 资源监视器

关于 Windows 10 2020 年 5 月更新

FeiLong

你想活出怎样的人生

Janenesome

读书笔记 思考

JMM的前世今生

fkc_zyk

重排序 volatile happens-before JMM cpu

遇事不决,请先 「搜索」

Sicolas Flamel

个人成长 职场 随笔杂谈

是什么奠定了架构师的职场地位?

刁架构

极客大学架构师训练营

云上基础产品之负载均衡

韩超

负载均衡 公有云

云上基础产品之内容分发网络

韩超

CDN 公有云 内容分发网络

使用 PCA 进行降维可视化,了解特征分布

黄大路

数据挖掘 数据分析 可视化

Linux下程序出问题不要慌,资深程序员教你6招搞定!

柠檬橙

Linux 程序员 后台开发

思维模型 - 概念篇

石云升

学习 高效 思维模型 决策

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