(三)：圖片分辨率

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/

自從蘋果發(fā)布帶retina顯示屏的iPhone 4，網(wǎng)頁(yè)設(shè)計(jì)人員一直在找一個(gè)處理高分屏的方案。于是引入了srcset和它的顯示密度。

使用srcset的切換解決方案

首先提醒大家，顯示密度是一種分辨率切換使用情況。當(dāng)我們解決分辨率切換問(wèn)題時(shí)，我們需要使用srcset。

我們想要使用srcset的原因是它讓瀏覽器可以選擇。當(dāng)使用<picture>元素提供的media屬性時(shí)，實(shí)際上我們?cè)诟嬖V瀏覽器必須使用哪個(gè)圖片。這對(duì)于藝術(shù)切換很有效。

遇到分辨率切換的情況時(shí)，瀏覽器知道哪張圖片顯示效果最好。它可以根據(jù)網(wǎng)絡(luò)情況或用戶行為等因素來(lái)做決定。

因此除非是藝術(shù)切換的情況，我們應(yīng)該讓瀏覽器本身來(lái)自動(dòng)選擇。

顯示密度描述

顯示密度的語(yǔ)法很直觀：

srcset屬性被添加在<img>元素上的。srcset的值是一個(gè)用逗號(hào)分隔的列表。列表中的每個(gè)項(xiàng)包含一張圖片的路徑并且按倍數(shù)（例如,1x,2x,3x...）提供多張分辨率的圖片。

<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">

顯示密度值1x,2x等等代表顯示密度描述符。如果沒(méi)有提供顯示密度描述，默認(rèn)是1x。

這看起來(lái)很簡(jiǎn)單...

這很簡(jiǎn)單,試想你需要關(guān)心的是顯示密度。那么我們會(huì)經(jīng)常碰到嗎？

讓我們來(lái)看一下第1部分中的Apple Watch圖片

像之前提到的那樣，這張圖片是5144px × 1698px并且在2倍下大小為398K。還有一張1倍的版本。讓我們把它們與Blackberry Curve 9310上單一分辨率的圖片尺寸做對(duì)比：

表格中的最后一行，我把圖片大小改變?yōu)?code>320px寬另存為JPEG從而看看它會(huì)怎樣。

顯然兩個(gè)尺寸的圖片是不夠的。當(dāng)然，我們可以把320作為1倍圖然后重寫(xiě)標(biāo)記如下：

<img srcset="cat.jpg, cat-2X.jpg 2x, cat-3x.jpg 3x, […], cat-16x.jpg 16x">

這會(huì)讓我們有從320px到5144px的圖片，但我覺(jué)得這樣很愚蠢。

這就是我認(rèn)為顯示密度描述比其他解決方案不可取的另一個(gè)主要原因。我沒(méi)有任何興趣來(lái)維護(hù)一大堆不同顯示密度的可用性。

我們難道要提供1x,1.5x,2x,3x更多種情況嗎？如果算上其他例如iPhone6 Plus的縮減像素呢？

有一點(diǎn)我在大家開(kāi)始用響應(yīng)式圖片時(shí)沒(méi)有提到。如果在多個(gè)圖片斷點(diǎn)上有多個(gè)圖片密度，有時(shí)候就需要重復(fù)圖片源,因?yàn)槌叽绾苄〉?倍圖可能與1倍在大的圖片斷點(diǎn)上是一樣的。

很快這樣就會(huì)變得糟糕。

顯示密度描述符最適合固定寬度圖片

當(dāng)你在處理固定寬度圖片元素的密度可選時(shí)，屏幕密度描述顯得很不方便而且存在許多不足。

需要什么來(lái)代替呢？本系列的第四部分將會(huì)介紹：Srcset寬度描述符。