随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?

什么是响应式图片

响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。

CSS 响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了,为了适配Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:

.mod .hd h3 { background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png );/* 普通屏幕 */

/* ———— Retina ———— */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */
only screen and (min-resolution: 240dpi),                    /* 标准 */
only screen and (min-resolution: 2dppx)                      /* 标准 */
{
.mod .hd h3{
background-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png);
background-size: 106px 155px;
}
}

两张图片的对比效果:

在制作@2x图片时需要注意一些问题:

如果类似上图一样是纯文字内容的图片,不要直接从大图片缩放为小图片,这样文字效果会有些失真,这是 Photoshop 渲染的问题。应该调整字号,再重新排版。可以直接看看一淘首页的效果

蓝框内是直接缩放图片大小的效果,红框内是把字号从32号改成16号的效果。

CSS3 Media Queries 中用来定义设备分辨率的是 「resolution」 媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和 「max-resolution」。该规范中规定:若查询Non-Square Pixels (专业术语,指高度与宽度不等的像素,可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中的像素是正方形的(像素宽高比为 1:1)。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与最密集尺寸进行比较。对于「resolution」(没有「min-」或「max-」前缀)从不查询 Non-Square Pixels 设备。另外在 CSS image Level 3 image-resolution 属性中定义了一些单位,比如「dppx」,各浏览器支持情况如下:

特性 Chrome Firefox (Gecko) IE Opera Safari (WebKit)
基本特性 不支持[1]「4」 3.5 (1.9.1) [2] 9 9.5 不支持 [1]「4」
dppx 「4」 16.0 未知 12.10「3」 「4」

需要注意几点:

  1. -o-min-device-pixel-ratio 的取值是分数比如「2 /3」,Demo,详见:http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
  3. 1dppx 相当于 96dpi。

显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS image Level 4 中就实现了这种原生语法的image-set。 image-set 语法:

<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] ) <image-set-decl> = [ <image> | <string> ] <resolution>

那么上面的例子我们可以改为:

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值,color、*-gradient() 等暂不支持,而且「x」取负值似乎也是合法的。

以下是一些常见移动设备的「min-device-pixel-ratio」值:

-webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac
  • 所有非 Retina 的 iOS 设备
  • Acer Iconia A500
  • Samsung Galaxy Tab 10.1
  • Samsung Galaxy S
  • 其他设备

-webkit-min-device-pixel-ratio: 1.3

  • Google Nexus 7

-webkit-min-device-pixel-ratio: 1.5

  • Google Nexus S
  • Samsung Galaxy S II
  • HTC Desire
  • HTC Incredible S
  • HTC Velocity
  • HTC Sensation

-webkit-min-device-pixel-ratio: 2.0

  • iPhone 4
  • iPhone 4S
  • iPhone 5
  • iPad (3rd generation)
  • iPad 4
  • 所有 Retina displays 的 Mac
  • Google Galaxy Nexus
  • Google Nexus 4
  • Google Nexus 10
  • Samsung Galaxy S III
  • Samsung Galaxy Note II
  • Sony Xperia S
  • HTC One X

HTML5 响应式图片

CSS image-set 解决了背景图片的响应式问题,但是 HTML中的 img 元素怎么办呢?正当我一筹莫展的时候,2011年11月 @brucel 提出了HTML5 的一个草案:

<picture alt=””>
<source src=hires.png media=”min-width:800px”>
<source src=midres.png media=”min-width:480px”>
<source src=lores.png>
<!– 不支持的浏览器降级处理 –>
<img src=midres.png alt=””>
</picture>

于此同时,其他的一些想法如雨后春笋般涌现出来,于是W3C 社区讨论组Responsive Images Community Group 应运而生。最新的规范在这里:http://picture.responsiveimages.org/。截止本文发布时间,最近一次更新是 2013年1月7日,规范示例:

<picture width=”500″ height=”500″>
<source media=”(min-width: 45em)” srcset=”large-1.jpg 1x, large-2.jpg 2x”>
<source media=”(min-width: 18em)” srcset=”med-1.jpg 1x, med-2.jpg 2x”>
<source srcset=”small-1.jpg 1x, small-2.jpg 2x”>
<img src=”small-1.jpg” alt=””>
<p>Accessible text</p>
</picture>

可以看到这里的「srcset」属性类似 image-set,通常情况下,srcset 里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。 但是 Apple 的 eoconnor 提出的方案是这样的:

<img src=”foo-lores.jpg” srcset=”foo-hires.jpg 2x,
foo-superduperhires.jpg 6.5x”
alt=”decent alt text for foo.”>

诚然,任何一个新标准的提出,都会存在各种不同的声音,这是好事,作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。

小结

本来想把新年的第一篇文章写的欢乐一些,不过貌似没啥槽点。HTML5 响应式图片的草案还刚刚开始,不过前景还是很美好的。目前我们能做的就是在CSS 中使用 image-set 属性值,因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的,如果有特殊的需求可以使用  Media Queries。

CSS与HTML5响应式图片的更多相关文章

  1. CSS 与 HTML5 响应式图片

    什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...

  2. 如何使用 HTML5 的picture元素处理响应式图片

    来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...

  3. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  4. bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  6. 继续送假期干货——响应式图片工具smartImg

    中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...

  7. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  8. Html5响应式设计与实现广场

    由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...

  9. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

随机推荐

  1. Webappbuilder开发快速预览

    Webappbuilder开发快速预览 by 李远祥 Webappbuilder for ArcGIS 是由ArcGIS JavaScripit API和dojo创建的,它允许通过创建自己的widge ...

  2. 用JS计算预计时间与现在时间的差

    1.我用的是bootstrap网格布局,首先要引入bootstrap类. (1)<script src="jquery-1.11.2.min.js"></scri ...

  3. java集合框架02——Collection架构与源码分析

    Collection是一个接口,它主要的两个分支是List和Set.如下图所示: List和Set都是接口,它们继承与Collection.List是有序的队列,可以用重复的元素:而Set是数学概念中 ...

  4. linux CentOS 权限问题修复(chmod 777 -R 或者chmod 755 -R问题修复)

    我个人曾经有一次经历: 就是在修改文件夹权限的时候,本来该执行: #chmod 777 -R ./ 结果我漏掉了那个".";执行的命令是chmod 777 -R /. 这个命令一定 ...

  5. nginx负载均衡2

    负载均衡2 网站是发展初期,nginx只代理了后端一台服务器,但由于网站名气大涨访问的人越来越多一台服务器实在是顶不住,于是我们加了多台服务器,那么多台服务器又怎么配置代理呢,这里以两台服务器为案例, ...

  6. Android Studio 代码自动提示无效

    Android Studio代码自动提示无效(not available in Power Save mode)的解决办法 问题描述: 今天用Android studio敲代码,突然间就没有代码提示了 ...

  7. SQL Server-聚焦深入理解死锁以及避免死锁建议(三十三)

    前言 终于进入死锁系列,前面也提到过我一直对隔离级别和死锁以及如何避免死锁等问题模棱两可,所以才鼓起了重新学习SQL Server系列的勇气,本节我们来讲讲SQL Server中的死锁,看到许多文章都 ...

  8. php 实现简单购物车

    今天在练习购物车以及提交订单,写的有点头晕,顺便也整理一下,这个购物车相对来说比较简单,用于短暂存储,并没有存储到数据库, 购物车对于爱网购的人来说简直是熟悉的不能再熟悉了,在写购物车之前,我们首先要 ...

  9. 结合prototype和xmlhttprequest封装ajax请求

    由于拖延症的严重以及年前准备年会(借口*^__^*) 导致这个小的的思考  现在才算完成 再怎么说也算是上班以来带我的前辈第一次这么正式的给我出题 不管是出于尊重还是自我要求我都决定把它简要的记下来 ...

  10. [HDU1232] 畅通工程 (并查集 or 连通分量)

    Input 测试输入包含若干测试用例.每个测试用例的第1行给出两个正整数,分别是城镇数目N ( < 1000 )和道路数目M:随后的M行对应M条道路,每行给出一对正整数,分别是该条道路直接连通的 ...