写点什么

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

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

关注

评论

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

DoYourClone for Mac(磁盘克隆工具)

Mac相关知识分享

Little Snitch:你的网络安全守护者,时刻在线

理理

全景图拼接制作工具PTGui Pro for Mac

Mac相关知识分享

Kubernetes的Pod调度:让你的应用像乘坐头等舱!

不在线第一只蜗牛

Kubernetes 容器 云原生

Mac用户必备!SourceTree助你轻松玩转Git

理理

功能强大的 VNC 远程控制软件VNC Server for Mac

Mac相关知识分享

软件

(cdr平面设计) CorelDRAW Graphics Suite 2023 for mac 序列号分享

理理

数据驱动决策:低代码平台如何助力智能化业务分析

天津汇柏科技有限公司

数据驱动 低代码平台

RPA在物流企微私域场景的应用

京东科技开发者

HPE Aruba Networking Central扩展AI自动化能力 推出第三方设备及终端用户体验监控功能

科技热闻

探讨微服务治理场景中,Sermant Backend如何管理插件动态配置

华为云开发者联盟

Backend Developer javaagent 微服务、 sermant

AirPods耳机管理软件 AirBuddy 3 for mac激活文件分享

理理

Java面试题及答案整理(2024年金九银十最新版,持续更新)

架构师之道

Java 面试 #编程

A股牛市来袭,资本涌动:加密市场的出路与机遇

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 NFT开发 代币开发

用JS实现简单的屏幕录像机

京东科技开发者

这个软件开发工具是私活利器,后端程序员也能快速生成多平台APP和小程序。

Geek_2305a8

Illustrator 2024(AI2024)的核心优势和特点

理理

2024年区块链钱包现状与未来趋势分析

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 NFT开发 公链开发

音乐创作编辑软件Studio One 7 Pro for mac

Mac相关知识分享

软件

万界星空科技MES数据的集成方式

万界星空科技

制造业 mes 万界星空科技 万界星空科技mes

“元脑企智”EPAI:企业AI应用从“手工作坊”到“工厂高精产线”

脑极体

AI

Premiere Pro 2024:引领视频编辑技术潮流!

理理

高效开发最佳实践全面指南

Immerse

【解决方案】基于数据库驱动的自定义 TypeHandler 处理器

EquatorCoco

Java 数据库

通过MySQL Workbench 将 SQL Server 迁移到GreatSQL

GreatSQL

总奖金高达10万元!华为算法精英实战营“亲和任务调度系统”来啦!

华为云开发者联盟

cpu 芯片设计 任务调度

Autodesk Flame v2025.1.2最新激活版 支持Intel/M1/M2/M3

理理

以人为本的技术:如何发展工程文化并在发展中实现巨大飞跃

哦豁完蛋了

发展

哪家前端跨平台开发工具最出色?

Geek_2305a8

打通前后端流程,案例解读华为云开源低代码引擎解决方案

华为云开发者联盟

软件开发 低代码, TinyEngine

FinClip助推鸿蒙系统全面商用,纯鸿蒙系统化加速冲刺!

Geek_2305a8

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