Resoponsive Image 新標準:src-N

Mozilla l10n Workshop

更新,結果是<picture>srcset勝出。

上週看到Responsive images - end of year report這篇文章,才驚覺到現在 resoponsive image 的競爭者們,srcset 和 <picture> 都已經落伍了,現在呼聲最高的是src-N屬性。

src-N 的 N 是正整數,所以就是src-1src-2src-3這樣的形式,其實我覺得這個命名模式蠻有趣的,很像是程式設計師在程式寫一半,突然發現已經弄一半的系統中,某個變數突然有複數的值時,會在變數名稱後面加上 '1'、'2'、'3' 那樣,所以 src-N 就有 src 用了一陣子之後,突然發現有需要其他的圖片 src,所以就用 src-1、src-2、src-3 來當名稱。規範對於 N 的範圍沒有定義,然後照字面上來看是可以有空號的,不過 parse 時會照數字順序處理,如果全部處理完沒找到 match 的圖片可以用的話,就會拿 src 的值當成預設的圖片。

src-N 屬性的內容和 srcset 的內容規則不太一樣,而且有兩種格式,首先第一種比較簡單,就是寫多個 src-N 屬性,然後每個給他一個 media query 作 prefix,之後只給針對解析度分開的 srcset 值,例如:

src-1="(max-width: 768px) //farm4.staticflickr.com/3820/11153957705_50c0f5a7d8.jpg 1x, //farm4.staticflickr.com/3820/11153957705_50c0f5a7d8_b.jpg 2x"
src-2="//farm4.staticflickr.com/3820/11153957705_eafe482d62_k.jpg 2x"

當然解析度是可選的,所以也可以一個 media query 只配一張圖片:

src-1="(max-width: 768px) //farm4.staticflickr.com/3820/11153957705_50c0f5a7d8.jpg"
src-2="(max-width: 2560px) //farm4.staticflickr.com/3820/11153957705_50c0f5a7d8_b.jpg"
src-3="(max-width: 3840px) //farm4.staticflickr.com/3820/11153957705_eafe482d62_k.jpg"

這種寫法是比較簡單好懂得,第二種寫法是只提供一個 src-N 屬性,然後告訴瀏覽器你想要的 Resoponsive Design 的 media query 的中間點和圖片想要的寬度,然後把所有可以提供的圖片和他的大小都提供出來,瀏覽器會根據實際的 device 來計算找到最適合的圖片,拿標準上的範例來說明:

<img src-1="100% (30em) 50% (50em) calc(33% - 100px);
            pic100.png 100, pic200.png 200, pic400.png 400,
            pic800.png 800, pic1600.png 1600, pic3200.png 3200">

首先,;前面那串稱為 size viewport list,理論上都會是單數個值,會是圖片寬度、viewport 中間點、圖片寬度、中間點這樣的循環,所以上面的(30em)(50em)就是你的 responsive design layout 的不同 layout 切換的條件,另外三個值則是圖片在那個 layout 下希望的寬度。也就是螢幕寬度小於 30em 時,你這個版面這張圖片寬度會是 100%,如果螢幕介於 30-50em,那圖片寬度會是 50%,如果螢幕大於 50em,那圖片寬度就是 33%-100px。接著的;後面的內容則是你提供的各種大小的圖片和他的寬度,然後接著神奇的事情就發生了,瀏覽器會根據你的螢幕寬度決定要取哪個 layout,用那個 layout 的圖片寬度去計算實際上圖片大約的大小,乘上解析度,然後自己去後面那堆候選的圖片檔案找最適合的來用。

第二種語法的缺點就是不能忽略 device pixel ratio,不然在大部分情形是方便簡單很多的。回頭看目前出現過的三種語法,目前我是最喜歡 src-N 的,雖然我是覺的一致性、整齊性比 srcset 還要差,不過比起 <picture> 實在都好很多,只是目前依然也還沒有瀏覽器支援,其實 srcset 之前也都沒人支援,webkit 的支援在發布前被檔下了,後來的討路就產生了現在的 src-N,目前看起來也沒其他候選標準,或許過陣子就會有瀏覽器開始支援這種寫法了吧。

comments powered by Disqus