视网膜屏幕图片优化

/ 15评 / 9

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/

15条回应:“视网膜屏幕图片优化”

  1. MG说道:

    受教了,新博客很有动感啊。

    点个赞。

发表评论

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