前端開發(fā)要與設(shè)計師和產(chǎn)品經(jīng)理保持溝通，幫助他們了解什么樣的效果更“簡單、高效、可維護”。畢竟，對于CSS來說，改變圓角矩形的可以實時看到效果。如果使用照片，至少需要再次生成圖片、切割和更換資源。高分辨率屏幕和多規(guī)格機器都加速了非圖片特效的發(fā)展。如果你想想Windows7在高分辨率屏幕下不忍直視，你會發(fā)現(xiàn)原始的圖片資源絕對不是越來越好。

　　其中，APNG和Webp格式發(fā)生較晚，尚未被Web標準采用。它們只能在某個平臺或瀏覽器環(huán)境可以預(yù)測的情況下選擇。雖然它們可以在不適用的環(huán)境中更好地降級，但本節(jié)暫時不討論這兩種格式。

　　規(guī)格，曾經(jīng)是不必要討論的話題，但自從出現(xiàn)以來，就變得復(fù)雜多了。這里只說大家關(guān)注的部分和結(jié)果，我們應(yīng)該區(qū)分不同類型的像素:CSS像素和材料像素。一個CSS像素也許包含多個設(shè)備象素。對于照片，需要在高DPI屏幕上使用分辨率更高的圖片。如果我們討論Retina，我們需要兩倍的分辨率(幾乎是規(guī)格的4倍)。幾乎沒有機會主義的空間，屏幕那么大，需要的圖片那么大。每個人都能控制的是“正好”顯示所需尺寸的照片。例如，通過CSS或標簽的wihth/height特性，將200x200的圖片調(diào)整為100x100尺寸，其中包括(200x200)-(100x100)=30000個像素大小浪費的，這占圖片大小的75%!之所以消耗這么多，是因為圖片的大小與面積基本正相關(guān)，與寬強平方正相關(guān)。因此，更好地計算客戶端具體顯示的圖片大小，可以大大降低圖片大小。即使只有尺寸只有10px被消耗，但當(dāng)圖片足夠過大時，這部分也會帶來很大的影響。

　　上面提到的“只是”顯示客戶端所需大小的圖片聽起來很容易，不是嗎?但當(dāng)響應(yīng)布局出現(xiàn)時，這變得非常困難。我們應(yīng)該適用于從1920年到320年的許多設(shè)備，如果使用1920年寬度的照片，每個用戶都應(yīng)該投入額外的帶寬和等待時間(這些設(shè)備通常對網(wǎng)絡(luò)速度和流量更敏感)，如果使用320寬度的照片，1920年的屏幕就像在高清屏幕上使用DOS一樣難以接受。

　　自然，我們也應(yīng)該能夠“響應(yīng)”地載入照片，并根據(jù)不同的設(shè)備載入不同尺寸的照片。響應(yīng)照片尚未寫入Web規(guī)范，完成時存在諸多麻煩和兼容性限制。

　　雖然響應(yīng)式照片還沒有成為標準化，但它是網(wǎng)絡(luò)圖片優(yōu)化的利器。要是得到廣泛支持，就沒有比縮小圖片大小更有效的優(yōu)化方法了。