(十)：總結(jié)

原文出處：http://www.w3cplus.com/responsive/responsive-images-part-10-conclusion.html

我們做到了！我們到了響應(yīng)式圖片101系列的結(jié)尾。

在與這個(gè)系列就此分別之前，我想給出一些提示，資源和一些關(guān)于響應(yīng)式圖片發(fā)展的最終思考。

響應(yīng)式圖片審查

本來(lái)在這個(gè)系列里，我想添加一章響應(yīng)式圖片審查的內(nèi)容。這是我們開(kāi)始把頁(yè)面圖片轉(zhuǎn)換成響應(yīng)式圖片時(shí)做的第一件事。

很有可能下一步就是使用你學(xué)到的東西并應(yīng)用在頁(yè)面上。

幸運(yùn)的是，我最近詳細(xì)書(shū)寫了審查內(nèi)容。所以沒(méi)有在101系列中重復(fù)，我鼓勵(lì)你閱讀我寫的關(guān)于響應(yīng)式圖片審查的文章。

兼容性

響應(yīng)式圖片標(biāo)準(zhǔn)的瀏覽器支持在快速發(fā)展。到2015年8月，Chrome，Opera和Firefox都支持了?picture,?srcset,?sizes, 和type.

Microsoft Edge和Safari支持帶有顯示描述符(x)的srcset，但不支持寬度描述符。Microsoft已經(jīng)開(kāi)始了支持所有響應(yīng)式圖片標(biāo)準(zhǔn)的開(kāi)發(fā)。

Apple還沒(méi)有支持該標(biāo)準(zhǔn)，但是Apple清楚支持響應(yīng)式圖片很重要并且Yoav Weiss已經(jīng)在給Webkit實(shí)現(xiàn)做貢獻(xiàn)。

對(duì)于image-set()，還有做很多工作。

PictureFill

然而即便當(dāng)前所有瀏覽器都支持響應(yīng)式圖片標(biāo)準(zhǔn)，我們?nèi)匀恍枰粋€(gè)方法讓老版本瀏覽器兼容新語(yǔ)法。這時(shí)候就需要用到PictureFill?polyfill。

PictureFill讓你現(xiàn)在就可以使用新響應(yīng)式圖片語(yǔ)法。

自動(dòng)化圖片處理流程

在第9部分里，我說(shuō)人們不應(yīng)該手動(dòng)選擇圖片斷點(diǎn)。應(yīng)該讓軟件自動(dòng)幫我們完成。

我希望在這一點(diǎn)上擴(kuò)展并且在響應(yīng)式圖片的情況下大部分事情通常程度上不是設(shè)計(jì)師和開(kāi)發(fā)者應(yīng)該考慮的。

大多數(shù)組織的目標(biāo)應(yīng)該把圖片縮放當(dāng)作中心并且盡可能自動(dòng)處理響應(yīng)式圖片。

理想情況下，解決分辨率切換情況的響應(yīng)式圖片工作流應(yīng)該如下所示：

• 當(dāng)情況允許，使用分辨率無(wú)關(guān)的SVG圖片。
• 當(dāng)創(chuàng)建或修改設(shè)計(jì)模版時(shí)，模版作者在模版中提供多種圖片的sizes屬性。
• 帶寬度描述符的srcset屬性由服務(wù)器來(lái)插只入剩下一些輕松的工作例如給每張圖片選擇圖片斷點(diǎn)。
• 內(nèi)容作者不需要擔(dān)心。他們唯一的職責(zé)是上傳可用的最高質(zhì)量圖片然后讓圖片縮放服務(wù)處理其他事情。

這不是遙遠(yuǎn)的場(chǎng)景。許多組織已經(jīng)有了圖片縮放服務(wù)。如果你的組織還沒(méi)有，我有一個(gè)可供參考的圖片縮放服務(wù)和工具的電子表格（確保同時(shí)閱讀了說(shuō)明博文）。

許多內(nèi)容管理系統(tǒng)開(kāi)始尋找包含響應(yīng)式圖片的方法。響應(yīng)式圖片討論組（RICG）維護(hù)一個(gè)WordPress插件并且他們正在研究如何整合到WordPress核心里。Drupal 8會(huì)自帶響應(yīng)式圖片模塊（更多細(xì)節(jié)）。

這些圖片縮放服務(wù)需要擴(kuò)展的一點(diǎn)是計(jì)算出對(duì)于給定圖片需要添加多少圖片源并且輸出這些圖片源的標(biāo)記。如果使用了服務(wù)器提示它們甚至不需要擔(dān)心標(biāo)記。

但是無(wú)論怎么自動(dòng)化，我相信以圖片縮放和處理為中心對(duì)于保持思路清晰非常重要。當(dāng)我們談到探索響應(yīng)式圖片的新公司時(shí)，需要評(píng)估的第一件事情是它們的圖片工作流以及多大程度可以實(shí)現(xiàn)自動(dòng)化。

響應(yīng)式圖片未來(lái)

我們才剛剛開(kāi)始探索響應(yīng)式圖片。已經(jīng)有成千上萬(wàn)的網(wǎng)站更新到了新圖片標(biāo)準(zhǔn)。許多組織需要更新處理圖片的方式來(lái)集中和自動(dòng)化目前仍然是手動(dòng)完成的工作。

雖然我們面前還有許多工作，似乎我們終于在下坡路了。我們不再需要與尋找每個(gè)人都同意的解決方案做斗爭(zhēng)。瀏覽器支持正逐步實(shí)現(xiàn)。PictureFill幫我們彌補(bǔ)漏洞。

現(xiàn)在網(wǎng)頁(yè)開(kāi)發(fā)討論組開(kāi)始研究如何實(shí)現(xiàn)這些新標(biāo)準(zhǔn)，這意味著我們可以開(kāi)始互相學(xué)習(xí)。

如果你已經(jīng)閱讀了整個(gè)101系列，那么你就已經(jīng)有了開(kāi)始使用響應(yīng)式圖片的所有東西。我對(duì)于你會(huì)使用新標(biāo)準(zhǔn)做什么已經(jīng)迫不及待了。請(qǐng)分享你所學(xué)到的！

感謝閱讀。