不是因?yàn)閣eb標(biāo)準(zhǔn)的初期，我已經(jīng)看到了我們身邊一個(gè)看似很小的問題，社會(huì)反彈：響應(yīng)圖像。

在過去的4年 （是的，它已經(jīng)四年左右），我們?cè)陧憫?yīng)式設(shè)計(jì)看到的圖像的各種排列組合。 從設(shè)置的懶惰天max-width: 100%絕對(duì)最低你應(yīng)該做的），更全功能的JavaScript實(shí)現(xiàn)，如Picturefill和Zurb的data-interchange方法，我們已經(jīng)花了很多時(shí)間轉(zhuǎn)動(dòng)輪子，撞我們的頭和尖叫在墻上。 我很高興地說，我們不懈的旅程即將結(jié)束。 在W3C和瀏覽器制造商得到了暗示。

響應(yīng)圖像的狀態(tài)

在我們尋求神圣的右圖像服務(wù)給用戶夢(mèng)寐以求的目標(biāo)，我們對(duì)瀏覽器廠商到現(xiàn)在為止的態(tài)度在很大程度上是“忘記你 – 我們會(huì)做我們自己?！蔽耶?dāng)然也不例外。 我們是如此細(xì)心的敏感圖像和暴露給所有的猜測(cè)和試驗(yàn)通常不釋放我們得不耐煩（理應(yīng)如此），并用JavaScript做了公眾的利益。

一個(gè)CSS過渡和一個(gè)負(fù)責(zé)任的圖像之間的差異，當(dāng)然，他們是如何降解 。 如果一個(gè)CSS過渡不起作用，誰(shuí)真正在乎呢？ 你的界面可能會(huì)有點(diǎn)神經(jīng)質(zhì)，但經(jīng)驗(yàn)作為一個(gè)整體不會(huì)真的受到影響，因?yàn)槟愕挠脩羧匀荒軌蛲瓿伤麄兊哪繕?biāo)，消耗他們所需要的內(nèi)容。

這真的是不帶有圖像的情況。 如何做一個(gè)新的形象標(biāo)簽降解？ 在img標(biāo)記了廣泛的認(rèn)同，我什至無(wú)法找到時(shí)，W3C推薦它作為一個(gè)標(biāo)準(zhǔn)，比在一個(gè)小參考其他的HTML 4.01規(guī)范 。 更換或什至擴(kuò)大在img標(biāo)簽會(huì)像告訴弗蘭克·西納特拉戴棒球帽，而不是一個(gè)Fedora的-你會(huì)得到一些推回。

資源問題

作為響應(yīng)式設(shè)計(jì)逐漸普及和通過它用戶消費(fèi)信息的媒體變得無(wú)法控制，我們慢慢意識(shí)到， img本身是不會(huì)削減芥末。 我們開始問這樣的，“什么屏幕尺寸的用戶？”和“什么是屏幕的像素密度？”這些問題刺激我們的圖像技術(shù)，直到我們意識(shí)到，屏幕尺寸和像素密度都絕對(duì)給量沒有關(guān)系的問題可用帶寬來(lái)提供一個(gè)巨大的高清晰度圖像。

該解決方案得到了相當(dāng)復(fù)雜的。 在通話picture元素開始，和一組名為響應(yīng)圖像社區(qū)組（RICG）出現(xiàn)了。 該RICG開始工作的有關(guān)picture元素，與沿途的W3C共享工作。 其結(jié)果使我們今天所有的公司已經(jīng)取得的進(jìn)展的討論。

的介紹srcset

因?yàn)榇蠖鄶?shù)敏感圖像社區(qū)在船上與picture元素期待著它的偉大polyfills，如Picturefill因?yàn)楹停f干就干，并且放出了深思熟慮和充實(shí)的文件，概述了一種叫srcset ，這是標(biāo)準(zhǔn)的一個(gè)擴(kuò)展img標(biāo)記。 是的，我知道 – 這感覺就像是從哪兒冒出來(lái)。 這也是超級(jí)復(fù)雜和過于限制通過限制你（暗示）的像素值，并使用microsyntax未允許的可擴(kuò)展性，在未來(lái)的媒體查詢。 幸運(yùn)的是，語(yǔ)法已發(fā)展成為我們所擁有的今天，這是一個(gè)相當(dāng)強(qiáng)大的建議。

最近，安德魯·克拉克說，最好的時(shí)候，他啾啾 ，“看著響應(yīng)圖像srcset和尺寸第一次屬性。 啊呀它是復(fù)雜的?！?/p>

我不能說這更好的自己。 讓我們來(lái)看看什么是我們正在處理：

 <img alt="dog" src="dog.jpg" srcset="dog-HD.jpg 2x, dog-narrow.jpg 300w, dog-narrow-HD.jpg 600w 2x">

三大屬性在上面的代碼片段： alt ， src和srcset 。 的alt屬性是相同的，因?yàn)樗恢笔牵?src是回退，如果srcset不支持; 和srcset顯然是香餑餑這里。

我們可以看到三個(gè)參數(shù)srcset 。 首先是該圖像的路徑。 第二提供有關(guān)來(lái)源的自然寬度的瀏覽器信息，以便它知道要提供的資源給用戶（根據(jù)用戶的喜好和交叉引用與該sizes屬性 -我告訴你這是復(fù)雜的）。 最后一塊設(shè)置可選的像素比（ 2x在這個(gè)例子中指定了高清圖像）。

有一件事我真的很喜歡約srcset是，該規(guī)范指出，瀏覽器應(yīng)包含一定的帶寬情況下的圖像分配偏好。 這意味著你不必?fù)?dān)心服2x的圖像的高清晰度屏幕，如果該設(shè)備是在眉頭3G連接。 用戶的喜好應(yīng)該接管，并且瀏覽器會(huì)選擇適當(dāng)?shù)膱D像服務(wù)。

準(zhǔn)備picture元素

經(jīng)過一番抱怨我們的新怪的朋友， srcset的RICG繼續(xù)工作的有關(guān)picture元素，它終于得到與瀏覽器廠商一些嚴(yán)重的牽引……嗯，就是用Chrome瀏覽器。 建議語(yǔ)法picture元素可能看起來(lái)很熟悉，因?yàn)槲覀兛吹剿饕窃赑icturefill的第一個(gè)版本，它是沒有什么不同怎么<audio>和<video>標(biāo)記了。

 <picture> <source media="(min-width: 600px)" srcset="large-1.jpg, large-2.jpg 2x"> <img alt="A fat dog" src="small-1.jpg"> </picture>

正如你所看到的， source標(biāo)簽的picture元素，以及一個(gè)正常的img標(biāo)記。 正如我們看到的src在srcset ，在img是一個(gè)備用的。 在source標(biāo)簽，我們有什么看起來(lái)像一個(gè)媒體查詢，旁邊一個(gè)srcset包含像以前相同的圖像源和像素密度的參數(shù)屬性。 這似乎是一個(gè)很好的清潔方式普及響應(yīng)圖像; 我們通常熟悉的語(yǔ)法，所以它應(yīng)該很容易通過。

瀏覽器支持

該srcset屬性已經(jīng)在Chrome中支持從版本34。在寫作的時(shí)候，它不支持任何其他地方。 Mozilla的似乎是工作的一個(gè)實(shí)現(xiàn)（手指交叉）。 Internet Explorer是遙遙無(wú)期。

的picture元素有更糟糕的支持; 它甚至沒有在Chrome呢。 但如Mozilla與srcset ，谷歌目前正致力于實(shí)現(xiàn)它。 如果你可以忍受通過規(guī)范讀書，我強(qiáng)烈推薦它。 雖然沒有太多的情節(jié)和人物的發(fā)展是相當(dāng)弱，它仍然是一個(gè)相當(dāng)不錯(cuò)的讀取。

Picturefill 2.0的形成是因?yàn)樵闹С质窍喈?dāng)接近 。 你知道我們需要一個(gè)堅(jiān)如磐石的polyfill時(shí)要使用的時(shí)候正式問世，讓我們來(lái)看一看吧！

介紹Picturefill 2.0

Picturefill 2.0最近發(fā)布了測(cè)試版，這是從版本1相當(dāng)大的跳躍。的RICG真正的目的是創(chuàng)建響應(yīng)圖像的一站式解決方案 。 面臨的挑戰(zhàn)是創(chuàng)建一個(gè)腳本，可以讓你的開發(fā)人員，使用目前正在標(biāo)準(zhǔn)化的解決方案的任意組合，沒有它，腹脹到不使用它在所有會(huì)比較輕巧的地步。

試想polyfilling，通常會(huì)需要2秒使用需要10秒才能加載一個(gè)JavaScript文件來(lái)加載圖像 – 這將沒有多大意義。 Picturefill 2.0的規(guī)格非常密切關(guān)注（有一些故意疏失，我們就去了一個(gè)位），讓您使用避免了這種srcset或picture ，或兩者的組合。

雖然我們不能可靠地實(shí)現(xiàn)一切都在使用JavaScript（如合理的檢測(cè)帶寬，這將是一個(gè)用戶無(wú)論如何設(shè)置）的規(guī)格，我們當(dāng)然可以照顧所有的，目的是要在HTML中的碎片（即元素和屬性）。 這個(gè)版本Picturefill的得到我們更接近了一步不需要Picturefill，這是誰(shuí)曾經(jīng)寫過polyfill人的終極目標(biāo)。

如果您目前正在使用1.0版，我強(qiáng)烈建議升級(jí)到2.0。 這是朝著正確的圖像服務(wù)給用戶一個(gè)更好的解決方案邁出了一大步。 一些大的變化已作出的語(yǔ)法和功能。 讓我們來(lái)看看有什么新的。

有什么新的2.0

有一件事使這個(gè)polyfill不同于別人，我所看到的是它polyfills一個(gè)概念，而不是HTML的只是一個(gè)不支持的塊。 Picturefill 1.0使用跨度和自定義屬性來(lái)模仿我們?cè)趺聪氲捻憫?yīng)圖像應(yīng)該工作。 根據(jù)記錄，這是一個(gè)很好的解決方案，而我目前使用它的很多我還沒有被轉(zhuǎn)換成2.0的項(xiàng)目。

在過去一年左右的時(shí)間，在規(guī)范srcset和picture已經(jīng)成熟了那么多，所以我們現(xiàn)在可以真正得到使用的東西接近真實(shí)的語(yǔ)法。 Picturefill開始看起來(lái)像一個(gè)真正的polyfill，一是我們可以剝?nèi)r(shí)，真正的支持顯示了。

安裝和使用Polyfill

如果你已經(jīng)讀到這里，那么你可能已經(jīng)處理了過去的一些形式po??lyfill的。 這個(gè)人是沒有太大的不同。 Polyfills都應(yīng)該是設(shè)置它和忘記它（從偷線龍科 ），但由于這是一個(gè)HTML polyfill，您將需要?jiǎng)?chuàng)建picture元素手動(dòng)或使用某種形式的HTML下腳來(lái)為你做它。 幸運(yùn)的是，HTML shivs是相當(dāng)常見的，附帶的工具包，如Modernizr的 ; 只是確認(rèn)picture中支持任何毒刃您選擇。

 <!-- Create the actual picture element if you haven't already. --> <script> document.createElement( "picture" ); </script>
<!-- Asynchronously load the polyfill. --> <script src="picturefill.js" async></script>

除了 ??創(chuàng)建的picture元素，你只需要鏈接到腳本。 使用async屬性還建議，使Picturefill不加載擋住你的頁(yè)面。

使用Picturefill 2.0隨著srcset

讓我們來(lái)看看它提供了最好的支持和使用的語(yǔ)法srcset 。 它應(yīng)該看起來(lái)很熟悉，因?yàn)樗形覀兛吹接懻撘?guī)范時(shí)相同的屬性。

 <img sizes="100vw, (min-width: 40em) 80vw" srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="Obama">

這個(gè)片段與規(guī)范之間最明顯的區(qū)別是沒有后備的src屬性，這是故意除去，以防止影像在不支持的瀏覽器下載兩次。 而且，說真的，這將是這點(diǎn)，如果圖像被下載了兩次？ 除此之外，這是很忠實(shí)的規(guī)范，但它可能會(huì)隨著時(shí)間的推移作為規(guī)范fleshes出來(lái)的polyfill成熟。

在sizes屬性告訴圖像大小的瀏覽器相對(duì)于視口。 這往往被忽視，因?yàn)?code>srcset是流行語(yǔ)了，但這個(gè)屬性是非常重要的。 如果您想了解更多， 埃里克·波蒂斯使得很多的感覺這個(gè)“啊呀繁亂?！?/p>

使用Picturefill 2.0隨著picture元素

該RICG做這樣與Picturefill的第二個(gè)版本中做好的語(yǔ)法picture元素應(yīng)該是毫不奇怪。 它的規(guī)格非常接近匹配：

 <picture> <source srcset="extralarge.jpg, extralarge.jpg 2x" media="(min-width: 1000px)">
<source srcset="large.jpg, large.jpg 2x" media="(min-width: 800px)">
<source srcset="medium.jpg"> <img srcset="medium.jpg" alt="Cambodia Map"> </picture>

版本1.0和2.0之間的最大的變化是取消了一些傳統(tǒng)的HTML（div和跨度），并加入新的元素（的picture和source ）。 此外， srcset支持是內(nèi)置的（哎呀，為什么不呢，對(duì)不對(duì)？這是在規(guī)范?。?這是偉大的進(jìn)步為這個(gè)polyfill。

使用盡可能多或盡可能少的這些選項(xiàng)，只要你愿意。 符合規(guī)范的行，如果你不希望使用2x選項(xiàng)，你不必（依此類推）。 這與官方之間的差別picture元素是img的回退 。 你會(huì)注意到這里說的img后援也有srcset屬性，而不是一個(gè)正常的， src （這是廣泛支持的）。 再次，這是為了避免重復(fù)下載（這是一個(gè)真正的問題）。 該srcset在img標(biāo)簽也將導(dǎo)致雙下載如果瀏覽器支持srcset但不是picture 。 這個(gè)錯(cuò)誤應(yīng)該得到的測(cè)試版本制定。

像許多好的polyfills，Picturefill 2.0可以通過編程方式暴露一個(gè)全局函數(shù)執(zhí)行， picturefill() 這使您可以使用它在你想要的任何超髖JavaScript框架。 你可以閱讀有關(guān)的幾個(gè)選項(xiàng)，針對(duì)特定的圖像API文檔中 。

優(yōu)雅地退化

在本文的前面，我提到降解的挑戰(zhàn)img擺好標(biāo)簽不支持的瀏覽器。 這是在創(chuàng)造Picturefill 2.0另一個(gè)問題。 因?yàn)樗且粋€(gè)polyfill，不支持的瀏覽器的概念是不存在的（那種） – 我們使用JavaScript來(lái)迫使它的工作。

邊緣的情況是這樣的：如果瀏覽器本身不支持picture或srcset 并已關(guān)閉JavaScript，那么你會(huì)得到一個(gè)frowny臉。 我已經(jīng)可以感覺到你的眼睛睜不開，但知道依靠它大規(guī)模之前，你的系統(tǒng)的局限性是很重要的。 如果用戶要遇到一個(gè)Picturefill’ed圖像中不支持的瀏覽器關(guān)閉JavaScript，他們會(huì)看到圖像的alt文本-一個(gè)可愛的小方法來(lái)加強(qiáng)對(duì)描述性的和有意義的重要性alt文本，是不是？

替代文字是回退，因?yàn)橐郧?code><noscript>解決造成問題，支持瀏覽器picture或srcset但已經(jīng)禁用了JavaScript（兩個(gè)圖像會(huì)呈現(xiàn)）。 該小組還探討增加一個(gè)src屬性img （如說明書中），但是，結(jié)果在雙下載，這違背了相應(yīng)的圖像資源分配給用戶的目的。

我們已經(jīng)走過了漫長(zhǎng)的道路與響應(yīng)的圖像。 我們可以看到，光在隧道的盡頭，但很多工作仍然有許多工作要做。 我們期待您的幫助！