為高密度顯示器選擇有用的圖像尺寸

以 800 css 像素寬顯示的卡片可以使用 1600 個影像像素寬的影像候選作為 2x 範例。 當網站提供響應式影像標記時，瀏覽器可以根據佈局、裝置密度和其他條件選擇適當的來源。 1600 像素檔案並不意味著該卡應該在頁面上佔用 1600 個 CSS 像素。

匯出前測量實際佈局。 文章列、全寬橫幅和小型產品卡很少需要相同的來源大小。 還要檢查手機佈局，其中圖像可能會佔用不同的寬度或使用不同的裁剪。 使每個檔案成為最大桌面視窗寬度的兩倍會浪費位元組。 將高密度匯出視為真正響應式實現的候選者，而不是每個設備必須下載的單一超大檔案。

此頁面以 1600 x 1600 像素的 WebP 擬合框開始。 它是一個說明性綁定，因此請根據您測量的顯示大小替換它。 適合保持比例，並且不會擴大較小的來源。 例如，寬廣的原件可以達到 1600 像素，而肖像則適合高度。 檢查實際的輸出尺寸。

如果來源只有 700 像素寬，則寫出 1600 像素的匯出不會產生較大原件的細節。 使用更好的來源或接受較小的候選人。 調整調整大小後的光銳化與關閉，並以預期的顯示尺寸檢查細紋。 對於透明圖形，請改用 PNG，因為目前的 WebP 匯出是不透明的。 保留原始設計或照片，以便您以後可以創建不同的候選人。

轉換器產生一個檔案； 您的網站仍然需要正確選擇和展示它。 在實作中提供適當的來源候選、準確的大小提示和保留的影像尺寸。 手機不應該僅僅因為它存在而接收最大的圖像。 在評估最後一頁時檢查瀏覽器開發人員工具中下載的圖像，因為內容管理系統可能會再次對其進行轉換。

在普通和高密度螢幕設定下查看頁面，並將詳細資訊與傳輸大小進行比較。 更高解析度的圖像並不是小型裝飾卡的最佳權衡。 同樣地，一個過小的圖像在大型產品視圖中可能看起來很糟糕。 測試有意義的內容，例如臉部和標籤，而不是只判斷模糊的背景。 保持適合圖像位置的載入優先權，並在聲稱速度或核心 Web 生命徵像有所改善之前測量真實頁面。

假設您最寬的卡片是 400 CSS 像素，並且插圖在該寬度上保持清晰。 當來源支援時，800 像素的候選者是一種可能的 2x 匯出。 在較窄的佈局中也要檢查卡片，因為跨越整個手機螢幕的圖像可能與桌上卡的顯示寬度不同。 為每個需要的候選人從原始匯出，而不是放大最小的候選人。 確認瀏覽器在實際頁面中選擇的檔案。 最終選擇檢查是將本地維度計算與訪問者實際收到的圖像的位元組連接起來的原因。