视网膜屏幕图片优化

/ 15评 / 11

Retina屏缘起

自2010年Apple发布iPhone4以后,Retina屏逐渐流行起来,其惊艳的显示效果和其细节的全面展示带给了人们全新的视觉体验,而越来越多的终端开始支持响应式,那么作为响应式中的重要一环「响应式图片」又该如何解决?

Retina屏俗称「视网膜屏」,其的设备像素比是x2,而普通屏幕像素比为x1,对于图片这种位图像素已定的资源,如果不加以处理的话,要么全都用x1倍图,那么在视网膜屏上观看就会模糊;要么都是用x2倍图,那么在普通屏幕上浏览的时候就会白白浪费流量消耗下载速度。

在开发iDevise主题的时候,我就是使用x2倍图来完成图片响应,因为图片裁剪后占用硬盘并不大,所以流量消耗几乎可以忽略,且代码量也少一些,但是在新主题iDevs中,图片开始变大,继续采用全x2倍图显然不是最佳方案了,那么该如何完成图片响应呢?

srcset属性

相对简单的解决方案就是srcset属性了,使用简单,可以非常方便的完成图片响应效果。

代码实例:

<img src="images-x1.png" 
     srcset="images-x2.png 2x"
     alt="iDevs" />

浏览器会默认访问src里面的图片路径,如果视网膜屏幕的话,浏览器会解析srcset里面的图片路径。

srcset配合sizes属性

sizes属性产生的初衷就是可以在html中实现简单的媒体查询功能,来适应越来越大规模的响应式网站开发。

那么w是个啥? w是一个衡量宽度的标识符,一定要对应图片的真实宽度,这会使得浏览器正确的选择图片,如果w值和图片宽度不对应时,实际渲染是会有问题的。

示例代码:

<img src="images-x1.jpg"   
     srcset="images-x1.jpg 500w, images-x2.jpg 1000w, images-x3.jpg 1500w" 
     sizes="500px">

sizes=500px,也就是图片宽度设置为了500px,那么:

x1倍屏幕访问时就会选用images-x1.jpg;

x2倍屏幕可渲染的位图像素宽度就变为了1000px,也就选用了images-x2.jpg;

类推一下,x3倍屏幕当然就会访问images-x3.jpg了。

现代浏览器对该属性的支持是越来越多了,这个方案应该会是个潮流。

那么兼容性如何呢?

电脑设备

enter image description here

手持设备

enter image description here

在移动端Andriod浏览器的支持实在是太差劲了,PC端对于一些现代的浏览器支持性就非常好。

当然,还有其他的一些解决方案,后期有时间再与大家探讨与分享。

本文参考:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
http://www.jianshu.com/p/235ef450f5e9
http://liyaodong.com/2015/10/18/responsive-image-workflow/

  1. c说道:

    牛逼!不过我主题都没图片23333

    • Tokin说道:

      @c

      其实就是每次都给flag重新赋一个反值,(flag = !flag)不加括号取的是这个表达式,显然不对。加括号就取到了重新赋值的flag的值了。。。当时是这么想的,试了试果然可以就这么写了。

  2. Page说道:

    你这主题挺不错的哦

  3. JV说道:

    不错,越来越牛X。

  4. Page说道:

    上网查了一下,还是很牛逼的样子!!!

  5. 大雄说道:

    我滚到最低部然后看到你的备案号的第一个字的时候,下面都会有一种冲动。

  6. 昌浩说道:

    高产浅城,唔,加油

  7. 尹先生说道:

    换主题了…

  8. kaikai说道:

    赞一个

  9. 大雄说道:

    哇晒!新模板好像挺不错的样子~

  10. 收集控说道:

    嘿嘿,作者又更新主题了,路过,支持一下!

发表评论

邮箱地址不会被公开。 必填项已用*标注