写点什么

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

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

关注

评论

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

NocoBase 本周更新汇总:优化及缺陷修复

NocoBase

开源 低代码 零代码 无代码 版本更新

打造探索式测试智能体—Scoutron

技艺的尾巴

AI 智能体 探索式测试

字符串替换研究

京东零售技术

Vision 2025:助力客户取得成功,是英特尔的第一要务

E科讯

全能pdf编辑阅读 PDF Reader Pro for mac

Rose

StarRocks 助力首汽约车精细化运营

StarRocks

数据库 spark 存算分离 StarRocks 数据查询

突破极限: 高负载场景下的单机300M多行正则日志采集不是梦

阿里巴巴云原生

阿里云 云原生

食品行业数字化:MES系统解决方案

万界星空科技

mes 食品饮料行业数字化转型 食品MES 食品加工行业

什么是 StarRocks?核心优势与适用场景解析

镜舟科技

数据库 存算分离架构 StarRocks 实时分析 极速查询

得物 iOS 启动优化之 Building Closure

得物技术

ios dyld

星闪破壁,鸿蒙筑家:智慧家庭聚变2025

脑极体

AI

服装智能制造软件平台(源码+文档+讲解+演示)

深圳亥时科技

Photomator for mac v3.4.8中文版 照片编辑器

Rose

中国上市企业精益战略

管理在线

精益管理体系

终于等到机会!这轮周期牛市预计比特币涨到$50万左右

PowerVerse

ClickHouse 的“独孤九剑”:极速查询的终极秘籍

京东零售技术

看看坐标深圳、薪资15k的go开发岗面试强度如何

王中阳Go

Go 面试 后端

课程质量评估系统(源码+文档+讲解+演示)

深圳亥时科技

开源协议不能随便选!选错直接被「背刺」

程序员晚枫

开源

PowerVerse&HiBao Cloud已在杭州、深圳、天津等地部署算力节点

PowerVerse

DePIN 去中心化云算力 DeCloud

从项目管理到价值管理的转型路径:基于敏捷价值管理办公室(VMO®)的战略升级(上篇)

ShineScrum

PMO cvp VMO

Databend Cloud Dashboard 全新升级:直击痛点,释放数据价值

Databend

中文集成版 微信多开 WechatTweak for Mac(微信多开、消息防撤回工具)

Rose

Pr2024下载,Premiere Pro 2024中文破解版

Rose

Fabric8 Kubernetes 教程——Metrics、Resource

FunTester

One4All下一代生成式推荐系统

京东零售技术

Topaz Video AI for mac(地表最强视频无损放大修复工具)v6.1.3激活版

Rose

Lightroom Classic 2025 功能介绍及系统要求

Rose

怎么用AI工具一键美化PPT?AI美化PPT步骤详解!

职场工具箱

人工智能 PPT 办公软件 AIGC AI生成PPT

【招生简章】司库管理案例实践高端研修班

用友智能财务

财经 会计

One4All下一代生成式推荐系统

京东零售技术

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