BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Web响应图像综述

| 作者 Dio Synodinos 关注 3 他的粉丝 ,译者 马德奎 关注 0 他的粉丝 发布于 2013年8月23日. 估计阅读时间: 3 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

WebKit每日构建版本现在支持图像元素的W3C srcset属性规范,允许开发人员为拥有高分辨率显示器的用户指定更高质量的图像,而又不妨碍没有高分辨率显示器的用户。它还为尚不支持该特性的浏览器提供了一个很好的后备方案:

<img alt="My reakfast"
src="breakfast.jpeg"
srcset="breakfast-HD.jpeg 2x, breakfast-phone.jpeg 100w, breakfast
-phone-HD.jpeg 100w 2x">

WebKit支持CSS函数-webkit-image-set已经有段时间了,它与srcset属性非常相似,可以为包含图像的CSS属性提供一个候选图像的URL列表,每个URL的后面都有一个修饰符,如“2x”。这样,浏览器可以为用户设备选择最好的图像:

body {
background: -webkit-image-set( url('path/to/image') 1x, url
('path/to/high-res-image') 2x ); }

WebKit采取这一行动的时候,社区和浏览器实现者还在争论“什么是Web响应图像的最佳选择”。响应图像社区组织(RICG)将在数周后齐聚巴黎,讨论响应图像的前进方向。在召集会议时,RICG的Yoav Weiss概括了响应图像未来的潜在解决方案和当前开发人员的实践

过去的几年里,在Web开发人员的极大关注下,各团体的成员都致力于寻找一种方法为Web带来响应图像。虽然现在有三种待讨论的方案(srcset[1]、<picture>[2]和client-hints[3]),但是由于无法预知浏览器实现的必然趋势,所以我们宁愿让市场来决定哪一种解决方案能最有效地满足应用场景。

与此同时,Web开发人员不得不自定义polyfill,这经常会阻止浏览器加载图像资源,直到DOM加载完成(至少是部分加载完成),并且页面上的JavaScript已经运行。这直接阻碍了浏览器工程师多年来一直从事的性能工作,包括优化资源加载和根据优先级尽快取得线上请求。上述情况使开发人员陷入了两难境地,“我们是延迟图像加载呢,还是下载不必要的图像数据而导致整个加载时间延长进而夸大了用户账单呢?”

为应对Web响应图像的挑战,当前流行的解决方案包括:

  • Picturefill:一个polyfill,模拟已拟定的<picture>元素
  • HiSRC:一个jQuery插件,在页面加载的时候,根据设备支持情况,选择下载(或不下载)高分辨率的版本
  • “自适应图像(Adaptive Images)”:一个服务器端解决方案,用于提供正确的图像分辨率/尺寸

查看英文原文:Round-up on Responsive Images for the Web

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT