高像素密度的螢幕很快就會成為常態。內容創作者必須因應這一點這份簡短指南說明如何在網路上提供高畫質圖片，以及如何不使用 polyfill、JavaScript、CSS 駭客和尚未實作的瀏覽器功能。換句話說，您不必大幅改變工作流程。
如今有很多回應式圖片提案，其中有很多涉及網頁程式開發人員的重大異動。標準追蹤 srcset <img> 屬性難以實作，尤其是 srcset 額外以檢視區為基礎的選取方式相當複雜：
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
雖然 image-set CSS 屬性只會使用 devicePixelRatio 決定要載入哪個圖片，但仍會迫使開發人員為每張圖片編寫大量額外的標記。
其他提案 (例如 <picture> 元素) 則較詳細。此外，它們不是標準追蹤，因此其廣泛的可用性遠比 srcset 屬性來得多。JavaScript 和伺服器端解決方案是唯一的替代方案，但這些做法有自己的缺點，詳情請參閱其他文章。
本文將介紹網路上常見的圖片用途，並提供適用於高像素密度和一般螢幕的簡單解決方案。就本討論而言，任何回報 window.devicePixelRatio 大於 1 的裝置可視為高 DPI，因為這表示 CSS 像素與裝置像素不同，且圖片會放大。
以下是重點摘要：
- 盡可能使用 CSS/SVG，而非光柵圖像。
- 預設使用針對高密度螢幕最佳化的圖片。
- 使用 PNG 繪製簡單的圖案和像素藝術 (例如標誌)。
- 針對含有多種顏色的圖片 (例如相片)，請使用經過壓縮的 JPEG。
- 請一律在所有圖片元素上設定明確的尺寸 (使用 CSS 或 HTML)。
簡單的繪圖和像素畫
如果使用 CSS 功能或 SVG，通常不需要使用小型圖片。舉例來說，由於 border-radius CSS 屬性廣泛支援，因此您不需要使用圖片來製作圓角。同樣地，系統廣泛支援自訂字型，因此不建議使用「圖像化」文字。
不過在部分情況下 (例如標誌)，圖片反而只能切入。舉例來說，這個 Chrome 標誌的自然尺寸為 256x256。在 Retina 螢幕上，您會在對角和曲線處看到線條的鋸齒狀，看起來粗糙且不佳，尤其是與經過清晰算繪的文字相比：
自然尺寸：256x256px、素材資源大小：31 kB、格式：PNG
有信心？那就好！接下來，我們來使用高密度圖片。您可能想以 JPEG 格式儲存標誌以節省空間，但這可能不是件好事，因為以失真格式儲存標誌和其他圖形往往會導致成果產生。在本例中，我使用非常高的壓縮率來誇大問題，但請注意梯度上的帶狀紋、白色背景上的斑點和雜亂的線條：
自然尺寸：512x512px、素材資源大小：13 kB、格式：JPEG
對於相對較小的圖片，建議使用 2x PNG。請注意，1x 和 2x PNG 之間的大小差異通常很高 (在本例中為 52 kB)。不過，如果是標誌，則是網站的門面，也是訪客第一眼看到的東西。如果對尺寸取捨，訪客在瀏覽時最後只會看到這些內容！
以下是 Chrome 標誌的完整圖像，大小縮減為 2x 螢幕的自然尺寸的一半：
自然尺寸：512x512px、素材資源大小：83 kB、格式：PNG
以下是用於產生上述顯示效果的標記：
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
請注意，我已為圖片指定寬度和高度。請務必執行這個步驟，因為圖片的自然大小為 512px。這也有助於提升效能，因為算繪引擎能妥善掌握元素大小，不需太費心計算。
一種可能有效的最佳化方式，是將 24 位元 PNG 縮減為調色盤 8 位元。這適用於少量顏色的圖片 包括 Chrome 標誌如要進行這類最佳化作業，您可以使用 http://pngquant.org/。您可以看到有一點帶狀，但這個檔案只有 13 kB，與原始 512x512 PNG 相比，大小可省下 6 倍。
自然尺寸：512x512px、素材資源大小：13 kB、格式：PNG,
8-bit palette
各種顏色的圖片
我撰寫了一篇 HTML5Rocks 文章，對各種回應式圖片技術進行問卷調查，並針對壓縮 1x 和 2x JPEG 的壓縮，進行研究，並比較成果和視覺品質。以下是上方文章中的一個資訊方塊：
我已為圖片標示壓縮等級 (以 JPEG 品質表示)、大小 (以位元組為單位)，以及我對其比較視覺保真度的主觀意見 (以數字排序)。有趣的是，高度壓縮的 2x 圖片 (標示為 3) 尺寸較小，且外觀比未壓縮的 1x 圖片更佳 (標示為 4)。換句話說，在圖片 4 和 3 之間，我們成功將每個尺寸加倍並大幅提高壓縮，來改善圖片品質，同時又能將大小縮減 2 KB。
壓縮、尺寸和影像品質
我想深入瞭解壓縮等級、圖片尺寸、視覺品質和圖片大小之間的取捨。我根據上述研究，提出以下假設：
假設
在壓縮率夠高的情況下，2x 圖片在壓縮後看起來會等同 1 倍大小的圖片，但在其他壓縮 (較低) 的壓縮的情況下。不過，在這種情況下，經過高度壓縮的 2x 圖片大小會比 1x 圖片小。
程序
- 根據 2 倍大小的圖片產生 1x 圖片。
- 在不同層級壓縮兩張圖片。
- 建立測試頁面，並在其中並排顯示兩組圖片。
- 在兩組中找出相等的圖片。
- 請注意等同的圖片大小和壓縮等級。
- 請在 1x 和 2x 螢幕上試試看。
我建構了一個並排比較圖片的應用程式，類似於 Lightroom 的比較檢視畫面。我們的目的是並排顯示 1 倍和 2 倍的圖片，但也能讓您放大圖片的任一部分，查看更詳細的資訊。您也可以選擇 JPEG 和 WebP 格式，並變更壓縮品質，查看檔案大小和影像品質比較。這項功能的概念是針對多張圖片調整設定，找出您能接受的壓縮品質、縮放和格式與圖片品質之間的權衡，然後將該設定套用至所有圖片。
這項工具本身可供測試。您可以透過選取子區域來放大圖片。
分析
我先說一下，圖片品質是主觀的東西。此外，您的特定用途可能會決定在視覺逼真度與檔案大小的範圍中，哪個項目的優先順序較高。此外，不同類型的圖片特徵在縮放和壓縮品質方面有不同反應，因此一種大小通用的解決方案不一定能在這裡運作。這項工具的目的，是協助您掌握圖片品質壓縮、縮放和格式。
在使用圖片縮放工具時，我很快就發現了幾個問題。首先，我偏好使用 quality=30 dpr=2x 張圖片為 quality=90
dpr=1x 張圖片，以便提供更多細節。這些圖片的檔案大小也相當接近 (在平面情況下，經壓縮的 2x 圖片為 76 KB，而未壓縮的 1x 圖片為 80 KB)。
這項規則的例外狀況是具有漸層效果的高度壓縮 (quality<30) 圖片。這些現象常發生色帶問題，無論圖片比例為何，這都不佳。工具中的鳥類和汽車樣本就是以下例子
WebP 圖片的清晰度遠勝 JPEG，尤其是在低壓縮率的情況下。這個色帶問題似乎已經大幅改善。最後，WebP 圖片的壓縮程度也較高
注意事項和結尾
讓圖片在高密度螢幕上清楚顯示，只是畫面變化較大導致圖片相關問題的一半。在某些情況下，您可能會想根據可視區域大小放送完全不同的圖片。舉例來說，歐巴馬的大頭照可能適合手機大小的螢幕，但放在他前方並加上旗幟，有些則更適合使用筆記型電腦螢幕。
我刻意避開這個「藝術方向」主題，只專注於高 DPI 圖片。您可以透過多種不同的方法解決這個問題：使用媒體查詢和背景圖片、透過 JavaScript、透過 image-set 等新功能，或在伺服器上。這個主題在「可變像素密度的高 DPI 圖片」一文中說明。
我會簽署幾個未解決的問題：
- 高壓縮功能對效能的影響。解碼高度壓縮的圖片會產生哪些懲罰？
- 在 1x 螢幕上載入 2x 圖片時，必須將圖片縮小，這會對效能造成哪些影響？
總而言之，請改用 CSS 和 SVG，而非光柵圖片。如果請務必嚴格要求光柵圖片，請使用 PNG 格式的圖片，圖片應具有有限的調色盤和多種單色，並針對具有多種顏色和漸層的圖片使用 JPEG。這種做法的好處在於，您的標記幾乎不會改變。網頁程式開發人員只需產生 2x 素材資源，並在 DOM 中正確調整圖片大小即可。
如需進一步瞭解，請參閱 Scott Jehl 的文章，該文章探討了類似主題。希望您的相片看起來清晰，行動數據用量也能降到最低！