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

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

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

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

方法一优点：

方法一缺点：

方法二优点：

方法二缺点：

方法三优点：

方法三缺点：

方法四优点：

方法四缺点：

方法五优点：

方法五缺点：

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

方法六优点：

方法六缺点：

用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/

评论列表