西门的后花园

一个热爱网络的年轻人的博客

Retina屏幕下优化图片方法集合

自从昨天用了新买的Macbook Pro后,感觉整个互联网网页都模糊了。。。不过还是有一些大型网站对Retina屏幕对了优化处理,由衷感谢各位前端工程师们。

之前在《移动端网页制作入门之二:移动端与PC端间的不同特性》就提到,手机里看图片会模糊,当时提供了两种最常见、简单的办法。这里拓展下,把一些大型网站使用的方法都罗列下。

直接看【DEMO】吧,主要针对配备Retina显示屏的Macbook Pro的Safari/Chrome浏览器、手机端浏览器、平板电脑浏览器这三种设备。(百度Logo为普通图片,腾讯Logo为高清图片)

方法一优点:

  • 全兼容;

方法一缺点:

  • 普通设备也请求的高清图片,浪费流量,没必要;

方法二优点:

  • 对应设备请求对应尺寸图片;

方法二缺点:

  • 部分设备不兼容;

方法三优点:

  • 全兼容;

方法三缺点:

  • 普通设备也请求的高清图片,浪费流量,没必要;

方法四优点:

  • 对应设备请求对应尺寸图片;

方法四缺点:

  • 部分设备不兼容;

方法五优点:

  • 全兼容;
  • 对应设备请求对应尺寸图片;

方法五缺点:

  • 无明显缺点;

综上所述,第五种是兼容性最好,而且对用户节约流量的方法。当然,你非要跟他找个缺点,也不是没有的。例如商品列表的图片,需要开发传图片链接,这个时候,方法五就不能使用了。

方法六优点:

  • 全兼容;
  • 对应设备请求对应尺寸图片;

方法六缺点:

  • 需要加载JavaScript;

用JavaScript判断,替换对应图片链接,简单粗暴,配合图片懒加载,效果更好。

当然还可以通过服务器来处理这个图片链接,我不会,就不举例了。

百度Logo用的方法一,淘宝Logo用的方法四,腾讯Logo用的方法四、五。

总结:没有最好的方法,只有最适合自己的方法,自己去取舍吧。

扩展:

http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/

http://www.w3cplus.com/node/564

http://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/

评论列表

  1. 我怎么看没有很大的区别。。。
    视力又下降了?

  2. 这就好像用分辨率高的屏幕玩载入低级分辨率的东西,界面模糊。。

  3. 未成年学生党屏幕19寸1440*900无压力路过…

  4. 普通屏幕下大图缩小两倍的方法好像会模糊?

  5. 帮人制作过,用 js 解决调用问题,当然不一定能 100% 覆盖,但是够用即可

  6. 不错~之前一直为这个问题烦恼~又不想加载字体图标

  7. 方法一屡试不爽

西门进行回复 取消回复

分类目录