【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。
【導讀】：img 元素十分強大 – 它能夠下載，解析並渲染內容 – 並且現代瀏覽器支援多種影象格式。引入能夠跨裝置的影象，與放置專為桌面瀏覽器定製的影象沒什麼不同，只需要幾個小的調整就能有很好的體驗。
本節內容
- 使用
img標籤的srcset屬性為高DPI裝置優化 - 其他影象技術
在指定影象寬度時，請記得使用相對單位，防止影象超出可視區域。例如規則 width: 50%;會使影象寬度變成容器元素（而不是相對於可視區域或者實際畫素）寬度的50%。
因為CSS允許內容超出容器，有必要使用max-width: 100%規則防止影象及其他元素的溢位。例如：
|
1 2 3 |
img, embed, object, video { max-width: 100%; } |
確保使用alt屬性為img元素提供有意義的描述，這些措施能提高網站的可訪問性，更好地為螢幕閱讀器等輔助設施提供上下文。
使用img標籤的srcset屬性為高DPI裝置優化
CSS中的image-set()函式增強了background屬性的表現，使得為不同的裝置特性提供不同的圖片變得更加容易。與CSS函式image-set的工作方式相同， srcset 屬性允許瀏覽根據裝置特性選擇最佳影象，例如在2x大小的螢幕上顯示2x的影象，或者在網路頻寬受限時顯示1x大小的圖片。
|
1 |
<img src="photo.png" srcset="photo@2x.png 2x" ...> |
在那些不支援srcset的瀏覽器上，只會簡單地顯示src屬性指定的預設影象。這就是為什麼總包含1x大小圖片的做法很重要，因為它能顯示在所有的裝置上。支援srcset屬性的瀏覽器會解析由英文逗號分割的影象/條件列表，並且只會下載顯示最合適的影象。
雖然條件包括畫素密度、可視區域寬度和高度，而瀏覽器目前支援的，還只有畫素密度。要保持當前行為與未來特性的一致，只需要在屬性中堅持指定2x大小的影象就可以了。
其他影象技術
壓縮影象
壓縮影象技術總是為所有裝置提供高壓縮的2x大小圖片，而不論裝置的規格。取決於影象的種類和壓縮級別，影象質量看上去不會有太大改變，但是大小會顯著降低。
注意
- 使用壓縮影象技術請注意，因為它需要佔用更多的記憶體並且解碼。在小螢幕上放縮大尺寸圖片成本高昂，對記憶體和處理能力有限的低端裝置來說尤其痛苦。
JavaScript 影象替代方案
JavaScript 影象替代方案檢查裝置能力，並且做“正確的操作”你可以通過 window.devicePixelRatio屬性判斷裝置解析度長寬比，獲得螢幕寬度、高度，甚至可能通過 navigator.connection 嗅探網路連線、偽造請求。一旦收集了所有的資訊，你可以覺得載入哪張圖片。
這種做法的壞處是，使用 JavaScript 就意味著在相應的載入器完全解析之前，影象的載入會有延遲。這意味著在 pageload 事件出發之前，影象還尚未載入。而且，瀏覽器有可能會同時下載1x大小和2x大小的圖片，增加了頁面的重量。