(十)：总结

> 原文出处：http://www.w3cplus.com/responsive/responsive-images-part-10-conclusion.html 我们做到了！我们到了[响应式图片101系列](http://www.w3cplus.com/blog/tags/509.html)的结尾。 在与这个系列就此分别之前，我想给出一些提示，资源和一些关于响应式图片发展的最终思考。 ## 响应式图片审查 本来在这个系列里，我想添加一章响应式图片审查的内容。这是我们开始把页面图片转换成响应式图片时做的第一件事。 很有可能下一步就是使用你学到的东西并应用在页面上。 幸运的是，我最近详细书写了审查内容。所以没有在101系列中重复，我鼓励你阅读我写的关于[响应式图片审查](http://blog.cloudfour.com/responsive-images-audits/)的文章。 ## 兼容性 响应式图片标准的浏览器支持在快速发展。到2015年8月，Chrome，Opera和Firefox都支持了 [`picture`](http://caniuse.com/#feat=picture), [`srcset`](http://caniuse.com/#feat=srcset), [`sizes`](http://caniuse.com/#feat=picture), 和[`type`](http://caniuse.com/#feat=picture). Microsoft Edge和Safari支持带有显示描述符(`x`)的[`srcset`](http://caniuse.com/#feat=srcset)，但不支持宽度描述符。Microsoft已经开始了支持所有响应式图片标准的[开发](http://dev.modern.ie/platform/status/pictureelement/?filter=f3f0000bf&search=picture)。 Apple还没有支持该标准，但是[Apple清楚支持响应式图片很重要](https://twitter.com/grorgwork/status/616333173362786304)并且[Yoav Weiss](http://blog.yoav.ws/)已经在给Webkit实现做贡献。 对于[`image-set()`](http://www.w3cplus.com/responsive/responsive-images-101-part-8-css-images.html)，还有做[很多工作](http://caniuse.com/#search=image-set)。 ## PictureFill 然而即便当前所有浏览器都支持响应式图片标准，我们仍然需要一个方法让老版本浏览器兼容新语法。这时候就需要用到[PictureFill](https://scottjehl.github.io/picturefill/) [polyfill](https://en.wikipedia.org/wiki/Polyfill)。 PictureFill让你现在就可以使用新响应式图片语法。 ## 自动化图片处理流程 在[第9部分里](http://www.w3cplus.com/responsive/responsive-images-101-part-9-image-breakpoints.html)，我说人们不应该手动选择图片断点。应该让软件自动帮我们完成。 我希望在这一点上扩展并且在响应式图片的情况下大部分事情通常程度上不是设计师和开发者应该考虑的。 大多数组织的目标应该把图片缩放当作中心并且尽可能自动处理响应式图片。 理想情况下，解决[分辨率切换](http://www.w3cplus.com/blog/tags/509.html)情况的响应式图片工作流应该如下所示： * 当情况允许，使用分辨率无关的SVG图片。 * 当创建或修改设计模版时，模版作者在模版中提供多种图片的[`sizes`](http://www.w3cplus.com/responsive/responsive-images-101-part-5-sizes.html)属性。 * 带[宽度描述符的`srcset`属性](http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html)由服务器来插只入剩下一些轻松的工作例如给每张图片选择图片断点。 * 内容作者不需要担心。他们唯一的职责是上传可用的最高质量图片然后让图片缩放服务处理其他事情。 这不是遥远的场景。许多组织已经有了图片缩放服务。如果你的组织还没有，我有一个可供参考的[图片缩放服务和工具的电子表格](https://docs.google.com/spreadsheets/d/1e4qdGEoq7tqDCnY7iSSnl3OFoWkzhRfVAly-73A3uCc/edit)（确保同时阅读了[说明博文](http://blog.cloudfour.com/image-resizing-services/)）。 许多内容管理系统开始寻找包含响应式图片的方法。[响应式图片讨论组（RICG）](http://responsiveimages.org/)维护一个[WordPress插件](https://wordpress.org/plugins/ricg-responsive-images/)并且他们正在[研究如何整合到WordPress核心里](https://make.wordpress.org/core/2015/08/25/responsive-image-support-update/)。Drupal 8会自带[响应式图片模块](https://api.drupal.org/api/drupal/core!modules!responsive_image!responsive_image.module/8)（[更多细节](https://www.drupal.org/project/picture)）。 这些图片缩放服务需要扩展的一点是计算出对于给定图片需要添加多少图片源并且输出这些图片源的标记。如果使用了[服务器提示](https://tools.ietf.org/html/draft-grigorik-http-client-hints-03)它们甚至不需要担心标记。 但是无论怎么自动化，我相信以图片缩放和处理为中心对于保持思路清晰非常重要。当我们谈到探索响应式图片的新公司时，需要评估的第一件事情是它们的图片工作流以及多大程度可以实现自动化。 ## 响应式图片未来 我们才刚刚开始探索响应式图片。已经有成千上万的网站更新到了新图片标准。许多组织需要更新处理图片的方式来集中和自动化目前仍然是手动完成的工作。 虽然我们面前还有许多工作，似乎我们终于在下坡路了。我们不再需要与寻找每个人都同意的解决方案做斗争。浏览器支持正逐步实现。PictureFill帮我们弥补漏洞。 现在网页开发讨论组开始研究如何实现这些新标准，这意味着我们可以开始互相学习。 如果你已经阅读了[整个101系列](http://www.w3cplus.com/blog/tags/509.html)，那么你就已经有了开始使用响应式图片的所有东西。我对于你会使用新标准做什么已经迫不及待了。请分享你所学到的！ 感谢阅读。