(十)：總結 · 響應式圖片101

> 原文出處：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)，那么你就已經有了開始使用響應式圖片的所有東西。我對于你會使用新標準做什么已經迫不及待了。請分享你所學到的！感謝閱讀。