写点什么

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

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

关注

评论

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

智能控制 | AIRIOT智慧楼宇管理解决方案

AIRIOT

物联网 智慧楼宇

2023年金三银四牛客网一线大厂Java面试大全(1000道题目附解析)

采菊东篱下

Java 程序员 面试

全新升级|ECS成熟度评估与洞察,助你精准定位运维风险

云布道师

ECS

当 GIS 遇到数字化转型|阿里云产业智能

云布道师

GIS 数字化转型

8设计消息队列存储消息数据的 MySQL

KING

大模型落地比趋势更重要,NLP+金融如何看得见、摸得着?

脑极体

AI金融

Last Week in Milvus

Zilliz

非结构化数据 Milvus 向量数据库

ProTradex是链上衍生品领域发展的强力推手

鳄鱼视界

牛客网Java面试题及答案整理(2023年春招最新版,持续更新)

架构师之道

编程 java面试

架构训练营 - 模块七作业

Sam

架构实战营

Protradex,一个专注于链上衍生品交易市场的收益优化聚合平台

股市老人

微信小程序管理软件有哪些特点?

没有用户名丶

微信小程序

提升数据中心竞争力、公信力-CQC数据中心运维认证

中国IDC圈

认证 #运维

用友BIP推动大型企业财务从“价值反映和守护”走向“价值发掘和创造”

用友BIP

智能会计 价值财务

ClickHouse为什么这么快

数新网络官方账号

Clickhouse

深入理解C++右值引用和移动语义:全面解析

小万哥

后端 开发 C++11 右值引用 移动语义

C++编程必备:对象生命周期管理的最佳实践

小万哥

c++ 后端 生命周期 对象模型 RAII

TLS、SSL、CA 证书、公钥、私钥。。。今天捋一捋!

江南一点雨

gRPC TLS CA ssl

用友BIP丨事项会计,助力企业跻身世界一流

用友BIP

测试用例设计指南

京东科技开发者

软件测试 测试用例

天天预约 | 预约小程序分销功能,最全的操作指南来啦!

天天预约

小程序 SaaS 系统 预约工具 分销

Qualcomm QCN9074 4x4 MIMO 802.11ax MX6974 F5 WIFI6 Module

MAXON

QCN9074

“中国软件杯”重磅预告!首批百度赛题即将发布

飞桨PaddlePaddle

链上衍生品赛道成新趋势,Protradex生态成首要推动者

股市老人

掌握C++中static关键字的多种使用场景

小万哥

c++ 程序员 后端 开发 static

三天吃透MongoDB面试八股文

程序员大彬

Java mongodb

MySQL kill会话不起作用?

GreatSQL

MySQL greatsql社区

集成Health Kit时因证书问题出现错误码50063的解决方案

HarmonyOS SDK

HMS Core

美团二面:细数 Redis 阻塞的9种情况

做梦都在改BUG

Java redis 面试

当你对 redis 说你中意的女孩是 Mia

京东科技开发者

c++ 数据库 redis 缓存 企业号 3 月 PK 榜

贪心算法思想与练习

timerring

贪心算法

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