真正的响应式图片

不知不觉，现在国外网页已经到了“优先为移动平台创建”的时候了，优点是可以优化CSS结构与代码量，还可以使得移动端用户体验更优质的性能。我目前使用的这个Medium写作平台就是基于“移动先行”策略而开发的，使用起来不论什么方式，它的体验都很棒。

 

为 小屏幕的移动设备减少数据传输量可以大幅提高移动设备对web的加载性能，而性能对你的用户满意都有着重要的影响。Guy Podjarny做过调查，86%的响应式网站在最小的手机屏幕上浏览时的页面大小与大屏幕是相同的。也就是说虽然采用响应式设计的网站看起来像个移动站 点，实际上它们大多数加载了大屏幕端所有内容，造成的原因无外乎这三种：
1.下载并隐藏
2.下载并缩小
总结一下最近学习到的关于图片优化的相关问题。

 

1.可以有选择的为手机提供图片。
例如：许多博客边栏有“相关文章”“推荐文章”这一栏目，其中有一部分带有一张小的缩略图。更小的图片在手机上没有表现意义，可以不加载图片。然而display:no并没有起到优化性能的方法，显然图片依然加载了。
我们可以用Jquery解决它。matchMedia https://github.com/paulirish/matchMedia.js 这是一个CSS media queries。它可以告诉浏览器，只有当图片比matchMedia中的第一个断点大才插入图片。
我不精通javascript，但是这里有一片国内的翻译文章 http://w3ctech.com/p/948 介绍了它。

 

2.第三方服务解决方案：https://manage.sencha.io/
他可以以你的图片作为输入，然后返回缩放后的图片。
有点缺点，比如国外服务器的速度，还得重构标签。

 

3.（推荐）adaptive-images http://adaptive-images.com/
非常简单，主页有详细介绍我就不费字码了，推荐使用。

此外还有：

01.Picturefill : https://github.com/scottjehl/picturefill
Picturefill 不做任何带宽检测，是一个JS插件，用添加<span>标签实现，需要大量的自定义标记,所以对于那些不能改变他们的网站的源代码它可能不是最好的选择。

 

02.Hisrc : https://github.com/teleject/hisrc
Hisrc 比较有趣，它做带宽检测和视网膜显示器检测，很敬业有木有呵呵。起初你需要为它准备低@lower、中@1、高@2 分辨率图片。当浏览器载入的时候，它采用“移动现行”策略，它首先加载低分辨率图像 @lower——既移动版本。如果连接迅速的较大分辨率，浏览器支持视网膜图像，使用@2x图像。如果连接快速的较大分辨率但视网膜不受支持，那么@1x 图像。
但它总是先加载低分辨率图像，但是能为了快速链接可以考虑，毕竟现在到了移动现行的时候。

 

4.艺术指导响应式图片
有了响应式图片解决方案也未必完美。你确实把图片大小给缩小了，使得下载快速了，可是小屏幕手机用户可能看不清缩小后的图片主体，或者图片的视觉影响力骤然不足。你可能需要在小屏幕上让图片主体或中心，用剪裁或放大变得突出一些，甚至需要旋转。
http://www.resrc.it/ 可以满足一些需求。

还有太多方法，准备给自己做个wordpress博客实际应用一下。这种东西工作中根本用不上。

 

原文：https://medium.com/@streetevens/884556e03b31