写点什么

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

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

关注

评论

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

SDK更新不了问题解决

梦笔生花

android hosts SDK 教程

2022-12-25:etcd可以完全替代zookeeper,原因是k8s用的etcd,不用担心不成熟。请问etcd部署在k3s中,yaml如何写?

福大大架构师每日一题

云原生 k8s etcd k3s 福大大

spaa 22

黄敏

YonBuilder移动开发平台 AVM框架 封装身份证号码虚拟输入键盘组件

YonBuilder低代码开发平台

一文读懂什么是低代码开发?

YonBuilder低代码开发平台

如何使用YonBuilder进行报表分析?

YonBuilder低代码开发平台

启科QuSaaS真随机数解决方案与Amazon Braket结合实践

启科量子开发者官方号

人工智能 量子计算 随机数

优化器核心技术—Join Reorder

KaiwuDB

一文告诉你如何选择低代码供应商?

YonBuilder低代码开发平台

超详细图文保姆级教程:App开发新手入门(四)

YonBuilder低代码开发平台

安卓、iOS、小游戏三端同发?介绍给你一个新方式 - 普洱WebGL

僵尸浩

typescript 小游戏 Unity3D

华为云桌面,助你畅享高清视觉体验!

科技怪授

云原生媒体基础设施为华为云桌面护航

科技怪授

运维进阶训练营 -W09H

赤色闪电

运维

数据可视化图表系列解析——饼图

Data 探险实验室

数据分析 可视化 数据可视化 可视化数据 可视化工具

【web 开发基础】PHP 中的预定义数组详解续集 (48)

迷彩

post GET 文件上传 PHP基础 预定义数组

数据库原理及MySQL应用 | 约束

TiAmo

主键约束 数据库· 12月月更

超详细图文保姆级教程:App开发新手入门(三)

YonBuilder低代码开发平台

无代码优缺点及发展前景

间隔

【IntelliJ IDEA】idea 2018版本中没有SVN按钮或者图标的解决方法

No8g攻城狮

svn IDEA git 学习

HTTP请求首部字段

穿过生命散发芬芳

HTTP 12月月更

AI 2022:浪潮奔涌,百舸争流

Baihai IDP

人工智能 AI 年终总结 AI 2022

华为云桌面,如何让云上办公变得高效、安全?

i生活i科技

企业想要智慧化办公,首选华为云桌面Workspace!

科技怪授

【IntelliJ IDEA】连接https报错问题: E230001: Server SSL certificate verification failed:

No8g攻城狮

svn IDEA

YonBuilder应用构建教程之移动端基础配置

YonBuilder低代码开发平台

YonBuilder移动开发 AVM框架 封装虚拟数字键盘组件

YonBuilder低代码开发平台

架构训练营模块三作业

张建闯

架构实战营

Web入门开发【四】

小院里的霍大侠

Web 编程开发 初学者 入门实战

【架构设计】你的类足够“专一”吗

JAVA旭阳

Java 架构

银行如何快速落地营销数字化?

中关村科金

人工智能 大数据 AI 数字化转型 数字化

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