高像素密度的螢幕很快就會成為常態。內容創作者必須順應這項事實。這是一份簡短的指南，說明如何立即在網路上提供高畫質圖片，而不使用尚未實作的 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
如果圖片較小，可以使用 2 倍 PNG。請注意，1x 和 2x PNG 的尺寸差異通常相當高 (在本例中為 52 kB)。不過，如果標誌顯示貴公司網站，則會是網站的臉，訪客最先看到的就是標誌。藉由略過過多品質來換取尺寸，也是訪客最後一看到的畫面！
以下 Chrome 標誌呈現全貌，將 2 倍大小的螢幕縮小至一半的自然尺寸：
自然尺寸：512x512px，素材資源大小：83 kB，格式：PNG
進行上述轉譯作業的標記如下：
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
請注意，我已指定圖片的寬度和高度。由於圖片的自然大小為 512 像素，因此這是必要步驟。這也對效能有幫助，因為算繪引擎對於元素大小有充分瞭解，也不需要花費太多心力進行計算。
其中一種建議做法可能是將 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。
壓縮、尺寸和畫質
我想在壓縮層級、圖片尺寸、視覺品質和圖片大小之間權衡取捨，我根據上述研究 進行了一項研究，證實以下假設：
假設
經過充分壓縮後，2 倍大小的圖片在採用其他 (較低) 壓縮的情況下，與 1 倍大小的圖片相同。但在本例中，高度壓縮的 2x 圖片會小於 1x 的圖片。
處理
- 指定一張 2 倍的圖片，然後產生 1x 圖片。
- 請以不同角度壓縮兩張圖片。
- 建立並排顯示兩個圖片組合的測試頁面。
- 在兩組圖片中找出相等的圖片，
- 請注意，圖片大小和壓縮程度相同。
- 請同時在 1 倍和 2 倍的螢幕上試用這項功能。
我建構了類似於 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 的螢幕上載入 2 倍的圖片時，必須縮小圖片的大小，會有什麼影響？
總而言之，請選用 CSS 和 SVG，不要使用光柵圖片。若是嚴格要求光柵圖片，請使用 PNG 格式，用於有有限調色盤和多種單色圖片的圖片，並對具有多種顏色和漸層的圖片使用 JPEG。這種方法的一大好處是，您的標記幾乎維持不變。網頁程式開發人員只需要產生 2 倍的素材資源，並在 DOM 中正確調整圖片尺寸。
如要進一步瞭解，請參閱 Scott Jehl 的類似主題文章。也許您的圖片看起來很清晰，行動數據用量可能會很低！