AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

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

关注

评论

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

Gartner 2023 年十大技术趋势,资料汇总(官方PDF & 直播实况)

填空时光

Gartner Gartner预测 gartner电子书 咨询

项目重构演进之路

杨充

The camera application scenrios on Wallys DR40X9 ipq4019/ipq4029 industrial 5g router

wallysSK

IPQ4019 ipq4029

解读 K8s Pod 的 13 种异常

阿里巴巴云原生

阿里云 Kubernetes 云原生

C++特殊类的设计

可口也可樂

c++ 11月月更 特殊类的设计

防患未然 | AIRIOT城市管廊智能运维解决方案

AIRIOT

低代码 物联网 智慧管廊

干货 | 带你了解 EMC—— 什么是 EMC?

元器件秋姐

电磁兼容 元器件电商 华秋商城 电子工程师 电子科普

python的标准库与扩展库中对象的导入与使用

乔乔

11月月更

从发现问题到创造价值 数据智能如何助力商家双11高质量增长?

阿里技术

数据分析 智能数据

母亲斗情敌,羞得儿子无地容!一瓶“醉三皇”,圆了多少孝亲梦!

联营汇聚

终于有阿里大牛把困扰我多年的计算机组成原理:网络通信讲明白了

小二,上酒上酒

计算机 计算机原理 TCP协议

WOS新商业操作系统:中国头部SaaS的一次进阶

ToB行业头条

Baklib帮助中心|如何设置好客户服务帮助您的客户?

Baklib

CentOS7安装MySQL-5.7.36

蜗牛也是牛

寒冬之下,年销售增速不降反增,这家国企做对了什么?

用友BIP

第二章 TCP/IP-IOS七层模型

我叫于豆豆吖.

11月月更

三面阿里,被Java面试官虐哭!现场还原真实的“被虐”场景

小二,上酒上酒

面试题 面经 大厂面试 春招

年薪120W的架构师简历你见过吗?java程序员该如何达到?

小二,上酒上酒

学习 架构 简历规划

传统客服中心向“互联网+”转型的关键点——帮助中心

Baklib

web服务器

我叫于豆豆吖.

11月月更

week6作业 - 拆分电商系统为微服务

in9

如何搭建 SaaS 产品的客户服务体系

产品海豚湾

SaaS平台 B端产品 SaaS 产品 11月月更 客户成功

【CSPO认证】12月17-18日在线周末班 | 全国招生

ShineScrum

产品负责人 CSPO认证 CSPO

敏捷开发四个会议如何正确召开?

PingCode研发中心

敏捷开发

第一章 TCP/IP协议

我叫于豆豆吖.

11月月更

helm部署mysql

程序员欣宸

Helm 11月月更 kuernetes

OpenSergo & ShardingSphere 社区共建微服务视角的数据库治理标准

阿里巴巴云原生

阿里云 云原生 开源微服务 OpenSergo

一文熟悉 Go 的基础语法和基本数据类型

陈明勇

Go golang 11月月更

视效剧情口碑双爆棚!Netflix 现象级剧集《怪奇物语》第四季神级视效专访大揭秘!

Renderbus瑞云渲染农场

Renderbus瑞云渲染 CG动画电影 CG特效制作

完全解析分布式存储,带你了解HDFS的块

好程序员IT教育

hdfs 分布式

Baklib|如何做好知识库网页?

Baklib

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