(三)：圖片分辨率

譯文出處：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)頁設(shè)計人員一直在找一個處理高分屏的方案。于是引入了srcset和它的顯示密度。

使用srcset的切換解決方案

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

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

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

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

顯示密度描述

顯示密度的語法很直觀：

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

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

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

這看起來很簡單...

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

讓我們來看一下第1部分中的Apple Watch圖片

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

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

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

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

這會讓我們有從320px到5144px的圖片，但我覺得這樣很愚蠢。

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

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

有一點(diǎn)我在大家開始用響應(yīng)式圖片時沒有提到。如果在多個圖片斷點(diǎn)上有多個圖片密度，有時候就需要重復(fù)圖片源,因為尺寸很小的2倍圖可能與1倍在大的圖片斷點(diǎn)上是一樣的。

很快這樣就會變得糟糕。

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

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

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