写点什么

Web 响应图像综述

  • 2013-08-22
  • 本文字数:943 字

    阅读完需:约 3 分钟

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

复制代码
<img alt="My reakfast"
src="breakfast.jpeg"
srcset="breakfast-HD.jpeg 2x, breakfast-phone.jpeg 100w, breakfast<br></br>-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<br></br>('path/to/high-res-image') 2x );
}

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

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

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

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

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

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

2013-08-22 00:071513
用户头像

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

关注

评论

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

再见 Jenkins!几行脚本搞定自动化部署,这款神器有点厉害

编程菌

Java 编程 程序员 计算机 技术宅

我测了啊,我真测了!

QualityFocus

测试 质量保障 线上问题 缺陷

2020-2021阿里巴巴Java面试真题解析

Geek_f90455

Java 程序员 后端

「SQL数据分析系列」15. 元数据

Databri_AI

sql 脚本 元数据

从未如此简单:基于Serverless架构的博客

刘宇

Serverless Hexo 博客

王者并发课-钻石2:分而治之-如何从原理深入理解ForkJoinPool的快与慢

MetaThoughts

Java 多线程 并发

网络攻防学习笔记 Day94

穿过生命散发芬芳

网络攻防 8月日更

在线网页快捷方式创建工具

入门小站

工具

Hbase 入门详解

Se7en

Elasticsearch VS ClickHouse

Se7en

Linux之watch命令

入门小站

Linux

缓存数据历险记(一)--被缓存警察上课一天

卢卡多多

redis 缓存 8月日更

Vue组件通信之ref

Augus

8月日更

各种消息队列设计要点与对比

海明菌

消息队列 消息队列对比 消息队列系统设计

12年高级工程师的“飞升之路”

Geek_f90455

Java 程序员 后端

2020-2021京东Java面试真题解析

Geek_f90455

Java 程序员 后端

SpringBoot 中的事务处理

xcbeyond

事务 springboot 8月日更

NLP随笔(三)

毛显新

人工智能 自然语言处理 神经网络 深度学习

【最不佳实践】文件上传并不简单

刘宇

Python Serverless 文件上传

弱口令到底是什么牛马?

网络安全学海

黑客 网络安全 信息安全 渗透测试 漏洞挖掘

Windows10下JDK8下载及java环境配置

Bob

8月日更

2020-2021华为Java面试真题

Geek_f90455

Java 程序员 后端

黄金圈法则解读数据中台(1):为什么需要数据中台

水滴

数据中台 黄金圈法则 8月日更

【最不佳实践】函数计算的函数是什么意思

刘宇

Serverless

一个好的产品需要一个好的产品

刘宇

产品经理

奥运“哮喘”运动员为什么越来越多?

脑极体

趁着课余时间学点python(二)缩进 标识符 保留字 注释 输入输出的理解

ベ布小禅

8月日更

第一次凡尔赛,字节跳动3面+腾讯6面一次过,谈谈我的大厂面经

编程菌

Java 编程 程序员 面试 计算机

JDK 从8升级到11,使用 G1 GC,HBase 性能下降近20%。JDK 到底干了什么?

毕昇JDK社区

为什么需要数据库连接池

赖猫

MySQL 数据库 后端 连接池

DDD领域驱动设计·学习应用·一

小诚信驿站

领域驱动设计 领域驱动模型DDD 中台架构 领域驱动

Web响应图像综述_JavaScript_Dio Synodinos_InfoQ精选文章