写点什么

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

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

关注

评论

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

读配置、讲原理、看面试真题,我只能帮你到这了。。。

阿Q说代码

redis 主从架构 增量同步 全量同步 过期key处理

地理位置数据存储方案——Redis GEO

程序员架构进阶

redis 源码剖析 geo 6月日更 6月月更

解析数仓lazyagg查询重写优化

华为云开发者联盟

数据库 后端

Tiger DAO VC产品正式上线,Seektiger生态的有力补充

鳄鱼视界

微博评论的计算架构

极客土豆

新一代构建工具(1):对比rollup/parcel/esbuild—esbuild脱颖而出

zhoulujun

Rollup webpack esbuild

说下你对方法区演变过程和内部结构的理解

阿Q说代码

Java JVM 方法区 元空间 永久代

六大专题全方位优化,阿里巴巴性能优化小册终开源,带你直抵性能极致

Java全栈架构师

Java 程序员 面试 性能优化

Java代码优化请求合并与分而治之

码农参上

Java 大数据 高并发 java实战

MyBatis 执行流程及源码解析

码农参上

mybatis java实战

web内容如何保护:如何有效地保护 HTML5 格式的视频内容?

zhoulujun

DRM 视频版权保护 数字版权保护 h5视频版权

TLog 助力盘古框架实现微服务链路日志追踪

码农大熊

盘古开发框架

不要小看了积分商城,它的作用可以很大!

CRMEB

揭秘GaussDB(for Redis):全面对比Codis

华为云开发者联盟

数据库 后端 算力

《睡眠公式》:怎么治睡不好?

郭明

读书笔记

DDD概念复杂难懂,实际落地如何设计代码实现模型?

Java全栈架构师

程序员 后端 领域驱动设计 DDD 架构师

源码其实很简单!阿里巴巴最新出品Spring学习脑图+视频+文档真香

Java全栈架构师

Java spring 源码 程序员 面试

SDN系统方法 | 10. SDN的未来

俞凡

架构 网络 sdn SDN系统方法

商城风格也可以很多变,DIY 了解一下!

CRMEB

Wireshark网卡无法找到或没有显示的问题

岚哲

网络 Wireshark 域名 vpn 网卡

居家办公让我绩效拿了C | 社区征文

大菠萝

初夏征文

面对AI人才培养的“产学研”鸿沟,昇腾AI如何做厚产业人才黑土地?

脑极体

面试官:你简历上说精通mysql,那你说下聚簇/联合/覆盖索引、回表、索引下推

Java全栈架构师

MySQL 数据库 程序员 面试 java架构

华为发布两大昇腾计划 推动AI人才发展和科研创新

郝俸🦁好棒

昇腾

Pipenv中安装Django

宇宙之一粟

django 6月月更

TML转义字符:xss攻击与HTML字符的转义和反转义

zhoulujun

XSS xss攻击 转义字符 反转义

中断操作:AbortController学习笔记

zhoulujun

揭秘GES超大规模图计算引擎HyG:图切分

华为云开发者联盟

人工智能 图计算 图切分

什么是算子?

华为云开发者联盟

人工智能 算子

喜报|海泰方圆通过CMMI-3资质认证,研发能力获国际认可

电子信息发烧客

IET出席2022世界科技社团发展与治理论坛 为构建国际科技共同体献言献策

E科讯

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