在本單元中，您將瞭解如何讓瀏覽器選擇圖片，藉此決定要顯示的圖片。srcset
並不是在特定中斷點替換圖片來源的方法，也不是替換圖片來源。這些語法允許
能解決一個非常困難的問題，我們完全不必依賴 Google 瀏覽器，可以流暢地請求並顯示符合使用者瀏覽內容的圖片來源。
包括可視區域大小、顯示密度、使用者偏好設定、頻寬，以及各種其他因素。
這個問題往往不只是因為我們標記網路圖片而已，並非我們所想而已。 資訊
使用 x 描述密度
無論使用者的密度為何，採用固定寬度的 <img> 在任何瀏覽環境中都會有相同的可視區域數量
螢幕 - 其螢幕的實際像素數量。舉例來說，假設圖片的寬度為 400px，圖片幾乎佔據整個空間
整個瀏覽器可視區域 (包括第一代 Google Pixel 和更新款的 Pixel 6 Pro) 兩者都採用正規化的412px
「邏輯像素」寬可視區域
Pixel 6 Pro 的螢幕更清晰高，但 6 Pro 的實體解析度是 1440 × 3120 像素，而 Pixel 為 1080 × 1920 像素，也就是組成螢幕本身的硬體像素數量。
裝置的邏輯像素和實體像素之間的比率，就是該螢幕的裝置像素比例 (DPR)。DPR 為 計算方式是將裝置的實際螢幕解析度除以可視區域的 CSS 像素。
因此，原版 Pixel 的 DPR 為 2.6，Pixel 6 Pro 的 DPR 為 3.5。
iPhone 4 是第一部 DPR 大於 1 的裝置，回報的裝置像素比例為 2—螢幕的實體解析度是 邏輯解析度加倍iPhone 4 之前的任何裝置的 DPR 為 1：一個實體像素的邏輯像素。
如果你在 DPR 為 2 的螢幕上查看 400px 寬幅圖片，每個邏輯像素都會以四維顯示
螢幕的實際像素：兩條水平和兩個垂直像素。高密度螢幕無法呈現圖片，因為
與 DPR 為 1 的螢幕一樣相同。當然，任何「繪製」項目瀏覽器轉譯引擎，包括文字、CSS 形狀或 SVG
例如繪製在高密度螢幕中。不過，如同您從圖片格式和壓縮學到的，光柵圖片已修正
像素格狀檢視畫面雖然您未必會顯而易見，但為了配合高密度螢幕而調大的光柵圖片，畫面看起來會很明顯
但解析度卻很低
為避免這種縮放情形，顯示的圖片必須具有至少 800 像素的內建寬度。縮小時
在版面配置為 400 邏輯像素寬的版面配置中，這個 800 像素的圖片來源的像素密度是兩倍，在 DPR 為 2 的螢幕上，
圖片會很清晰
由於 DPR 為 1 的螢幕無法使用放大的圖片密度，因此系統會將圖片縮小以符合
顯示，「縮小」的圖片看起來沒有問題，適用於低密度螢幕，其中圖片適用於高密度螢幕
看起來就像任何其他低密度的圖片。
如同「圖片與效能」一文所述，低密度螢幕使用者查看圖片來源時，將圖片縮小為 400px
只需要需要相同寬度為 400px 的來源。雖然一張較大的圖片能讓所有使用者都能輕鬆瀏覽
在小型、低密度螢幕上顯示的高解析度圖片來源，將外觀和其他小型、低密度的圖片一樣，但速度較慢。
猜猜看， DPR 為 1 的行動裝置裝置很少。 但還是在電腦上的瀏覽情境：根據資料 由 Matt Hobbs 分享，截至 2022 年 11 月，在 GOV.UK 瀏覽工作階段中，約有 18% 的 DPR 為 1。雖然高密度圖片的「樣式」符合使用者的預期，但需要較高的頻寬和處理費用， 尤其是舊型和效能較差的裝置，仍可能出現低密度螢幕。
使用 srcset 可確保只有高解析度螢幕裝置接收的圖片來源夠大，可以清晰顯示，同時又不會傳遞相同的影像
減少頻寬成本。
srcset 屬性代表一或多個以半形逗號分隔的「候選項目」，用於算繪圖片。每位候選人
兩件事：一個網址，就跟在 src 中使用的一樣，以及用於「說明」圖片來源的語法。每位srcset候選人
以其固有的「寬度」(「w 語法」) 或預期「密度」(「x 語法」) 描述。
x 語法是「此來源適合具有此密度的螢幕」的簡寫，也就是後面的 2x 是
則適合 DPR 為 2 的螢幕。
<img src="low-density.jpg" srcset="double-density.jpg 2x" alt="...">
支援 srcset 的瀏覽器會顯示兩個候選項目：double-density.jpg，其中 2x 說明的性質適合適當。
表示 DPR 為 2 且 src 屬性中的 low-density.jpg 的螢幕；如果沒有其他適合的選項，就會選擇候選
在「srcset」中找到。如果是不支援 srcset 的瀏覽器，系統會忽略該屬性及其內容，也就是 src 的內容
按照慣例收到要求
很容易出錯 srcset 屬性中指定的值，以獲取操作說明。2x 會通知瀏覽器
關聯的來源檔案適用於 DPR 為 2 的顯示器 (來源本身相關資訊)。完全無從得知
瀏覽器應該使用這個來源，只告知瀏覽器如何使用來源。這是兩個細微卻重要的區別：
是雙密度「image」，而非用於雙密度「螢幕」的圖片。
說明「這個來源適合用於 2x 顯示」的語法以及顯示「在 2x 上使用這個來源」
顯示密度只是紙本內容，但顯示密度只是瀏覽器用來決定候選廣告的眾多相互關聯因素之一。
，但其中只有其中幾個可以轉譯舉例來說，您可以個別判斷使用者是否啟用了
透過 prefers-reduced-data 媒體查詢讓瀏覽器偏好節省頻寬，並能隨時選擇是否向使用者顯示低密度圖片。
與每個開發人員的網站顯示頻率不盡相同。
除非開發人員針對每個網站採用一致的方式導入，才能為使用者帶來什麼好處。
因此，他們可能在某個網站上看到比較尊重自己的偏好，然後在下次瀏覽圖片時看到放大頻寬。
如果 srcset/sizes 使用的資源選取演算法不明確，會留下空間供瀏覽器決定選取較低密度
為盡可能減少資料用量，或基於偏好減少資料用量，
選擇門檻瀏覽器性能更完善地處理責任與工作也毫無意義。
使用 w 說明寬度
srcset 接受適合圖片來源的第二種描述元。它的功能比以前更強大 但就本而言，
非常容易瞭解與其針對特定顯示密度的候選文字標記為適當尺寸，
w 語法說明每個候選來源的固有寬度。再次提醒，每個候選項目都是相同的維度儲存，也就是相同的
相同的裁剪和顯示比例但在這種情況下，您希望使用者的瀏覽器從兩種候選清單中選擇：
small.jpg 這個來源的寬度為 600px，而大於 1200px 的來源。
srcset="small.jpg 600w, large.jpg 1200w"
這並無法告訴瀏覽器該如何處理這些資訊，只是提供圖片的候選清單。
您必須先提供以下資訊，讓瀏覽器決定要轉譯哪個來源：
說明圖片在網頁上的顯示方式。方法是使用 sizes 屬性。
說明 sizes 的使用狀況
瀏覽器在傳送圖片方面效能非常出色。我們會長時間發出圖片素材資源請求 才能載入樣式表或 JavaScript 要求，而這通常是在系統完整剖析標記之前。瀏覽器 發出這些要求，但除了標記以外，沒有網頁本身的資訊，甚至可能沒有已發出要求 導入外部樣式表，請再自行套用。瀏覽器剖析標記並開始外部 其中只有瀏覽器層級的資訊，包括使用者可視區域的大小、螢幕的像素密度、 使用者偏好設定等等
這並非圖片呈現在網頁版面配置中的顯示方式，甚至無法使用可視區域。
做為 img 大小上限的 Proxy，因為它可能會佔用水平捲動容器。因此我們必須
將這些資訊提供給瀏覽器，並使用標記完成。這就是我們可用於這些要求的所有資訊。
和 srcset 一樣，sizes 是用來在剖析標記後，立即提供圖片相關資訊。和 srcset 一樣
屬性是「這裡是來源檔案及其固有大小」sizes 屬性是「此處」的簡寫
就是版面配置中算繪的圖片大小。描述圖片的方式與可視區域相關，同樣是可視區域
大小是發出圖片要求時，瀏覽器唯一可用的版面配置資訊。
這可能會聽起來有點複雜，但在實務上較為簡單：
<img
sizes="80vw"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
src="fallback.jpg"
alt="...">
此處的 sizes 值會通知瀏覽器，img 版面配置中的空間寬度為 80vw - 80%
檢視區域提醒您，這並非操作步驟，而是反映圖片在網頁版面配置中的尺寸說明。這裡並未說
佔可視區域 80% 的面積」但「當網頁轉譯完畢後，這張圖片就會佔據 80% 的可視區域」。
身為開發人員，您的工作完成了，您已正確說明 srcset 中的候選來源清單及圖片寬度
在 sizes 中，而如同 srcset 中的 x 語法，其他部分則是由瀏覽器決定。
不過，為了充分瞭解這些資訊的使用方式，請花點時間瞭解各項資訊的決策 使用者的瀏覽器發現下列標記時：
您已告知瀏覽器此圖片佔用 80% 的可用可視區域，所以如果我們在 img 上顯示該圖片
裝置寬度為 1000 像素的可視區域時，這個圖片將佔用 800 像素。瀏覽器就會取得這個值
這個函式的寬度，是我們在 srcset 中指定的每個圖片來源候選圖片的寬度。最小來源的固有大小為 600 像素
例如：600÷800=.75。我們的中型圖片寬度為 1200 像素：1200÷800=1.5。我們最大的圖片寬度為 2000 像素：2000÷800=2.5。
這些計算結果 (.75、1.5 和 2.5) 是有效且有效的 DPR 選項，根據使用者的
可視區域大小。由於瀏覽器本身也能掌握使用者的顯示密度資訊，因此做出了一系列決定：
在此可視區域大小中，無論使用者的螢幕密度為何，系統都會捨棄 small.jpg 候選，而且計算出的 DPR 較低
與 1 相比，這個來源需要為所有使用者擴充資源，因此這個來源並不適當。在 DPR 為 1 的裝置上，medium.jpg 會提供
最接近 - 該來源適合以 1.5 的 DPR 顯示，因此比必要稍大。但請注意，縮減資源大小是
可以透過流暢的工作流程在 DPR 為 2 的裝置上，large.jpg 是最相符的結果，因此系統會選取該值。
如果同一張圖片在 600 像素寬的可視區域中顯示，則所有數學的結果都會完全不同：80vw 現已變成 480 像素。
當我們劃分來源針對此寬度，我們可以取得 1.25、2.5 和 4.1666666667。套用這個可視區域大小時，系統會選擇 small.jpg
，medium.jpg 會在 2 部裝置上配對。
這張圖片在所有瀏覽環境中看起來都一樣：我們所有的來源檔案都與尺寸完全相同。
每個元素都會因使用者的螢幕密度正常顯示。但是，而不是向每位使用者顯示 large.jpg
為了容納最大可視區域和密度最高的顯示方式，系統一律會向使用者提供最小的適當內容。
使用描述性語法而非詳細語法，您就不必手動設定中斷點，同時考量未來的可視區域，
DPR：您只要提供資訊給瀏覽器，並讓瀏覽器判斷答案即可。
由於 sizes 值與可視區域有關，且與網頁版面配置完全無關，因此會加上小工具層。
圖片很少佔據一定百分比的可視區域，而且沒有任何固定寬度的邊界、邊框間距或影響
從頁面上其他元素中消失您需要使用單位組合來表示圖片的寬度；%、em、px 等
好消息是，您可以在這裡使用 calc()。任何內建支援回應式圖片的瀏覽器，也都支援 calc()，讓我們可以：
混搭的 CSS 單位，例如：佔據使用者可視區域完整寬度的圖片，減去兩側的 1em 邊界：
<img
sizes="calc(100vw-2em)"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w, x-large.jpg 2400w"
src="fallback.jpg"
alt="...">
說明中斷點
如果您已經花太多時間使用回應式版面配置，很可能會發現這些例子中缺少某些元素：
版面配置中圖片佔用的空間很可能會在版面配置的中斷點時變動。在此情況下，
以便向瀏覽器傳送更多詳細資料：sizes 接受一組以半形逗號分隔的候選項目，做為轉譯大小的
圖片，就像 srcset 可接受以半形逗號分隔的圖片來源候選項目。這些條件使用熟悉的媒體查詢語法。
系統會先比對這個語法：只要符合媒體條件，瀏覽器就會停止剖析 sizes 屬性，並停止剖析該值
會發生什麼事
假設您的圖片是用於佔據 80% 的可視區域，而且在可視區域超過 1200 像素的可視區域上，該圖片兩側加上一個 em 的邊框間距
較小的可視區域會佔滿可視區域的全寬度
<img
sizes="(min-width: 1200px) calc(80vw - 2em), 100vw"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
src="fallback.jpg"
alt="...">
如果使用者的可視區域大於 1200 像素，calc(80vw - 2em) 會說明版面配置中的圖片寬度。如果
(min-width: 1200px) 條件「不」相符，瀏覽器就會移至下一個值。由於
與這個值相關的媒體條件時，系統會使用 100vw 做為預設值。如果您要使用 sizes 寫入這個 屬性
max-width 媒體查詢：
<img
sizes="(max-width: 1200px) 100vw, calc(80vw - 2em)"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
src="fallback.jpg"
alt="...">
淺顯易懂的文字：「(max-width: 1200px)」達成比對嗎？如果問題仍未解決，請繼續進行其他步驟。下一個值 (calc(80vw - 2em)) 沒有合格條件，
也就是已選取的
現在，您已向瀏覽器提供 img 元素的所有相關資訊，包括可能來源、固有寬度、
以及您想要如何呈現圖片 — 瀏覽器採用了一套模糊規則來決定如何處理
這些資訊如果聽起來不清楚，就是為了設計問題。來源選取演算法採用
HTML 規格明確無法判斷應如何選擇來源。來源、描述元及其描述元
圖片算繪完成後，瀏覽器就可以自由做任何想做的事，也就是說，您「無法」判斷哪些圖片
瀏覽器選擇的來源
「在高解析度螢幕上顯示這個來源」的語法這雖然是可預測的，但無法解決核心問題 圖片採用回應式版面配置：節省使用者頻寬。螢幕的像素密度只會與網際網路相關 連線速度。如果您使用的是高階筆電，但透過計量付費連線瀏覽網路，可以共用網路共用 或者使用飛航模式的 Wi-Fi 連線不穩，因此建議您停用高解析度圖片來源。 螢幕品質
與瀏覽器做出最終訊息相較，效能大幅提升，我們透過嚴格規定
語法。舉例來說：在大多數瀏覽器中，使用 srcset 或 sizes 語法的 img 絕對不會要求尺寸較小的來源
大於使用者瀏覽器快取中的現有尺寸向來源提出新要求時的時間點
看起來會完全相同，是否能順暢縮減已取得的圖片來源？但如果使用者將應用程式
直到可視區域為止，為了避免放大圖片而必須建立新圖片，「該」要求仍會發出，因此系統會傳送所有內容
讓您目不轉睛
若缺乏明確控制權限，可能會讓您感覺有點不安，但因為使用的是完全相同的來源檔案
這就不太可能以「毀損」的方式向使用者呈現可以提升使用者對單一來源的src體驗，無論
做出決策
正在使用 sizes 和 srcset
無論是您、讀者還是瀏覽器，這裡都能提供豐富的資訊。srcset 和 sizes 都是稠密語法，
簡單介紹一些駭人聽聞的資訊也就是較好或更糟的，設計方式是：
這些語法不僅較不容易，使用者更容易剖析，也使得瀏覽器更難以剖析。
字串加入的複雜性越高，表示剖析器錯誤或行為發生意外差異的可能性就越大
在不同瀏覽器之間來回切換這裡還有一個不行，但機器更容易理解的語法比較容易寫出
。
「srcset」是明確的自動化做法。您很少可以為
正式環境，而是要透過 Gulp 等工作執行器自動處理相關程序；Gulp 是第三方廠商 Webpack 等工具組
如同 Cloudinary，或是所選 CMS 內建的功能掌握足夠的資訊來產生來源
第一，系統可能會獲得足夠的資訊，以便將這些資訊寫入可用的 srcset 屬性中。
sizes 的自動化難度較高。如您所知，系統在計算
轉譯版面配置是為了「轉譯」版面配置。幸好，我們提供了多種開發人員工具，
手動輸入 sizes 屬性的程序，以及手動比對效率。
舉例來說，respImageLint 是檢查 sizes 屬性的程式碼片段
。Lazysizes 專案入侵
將圖片要求延遲到版面配置建立完成，讓 JavaScript 可以
並為您產生 sizes 值如果使用 React 或 Vue 等完整的用戶端轉譯架構，
編寫和/或產生 srcset 和 sizes 屬性的解決方案數量，我們會在 CMS 和架構中進一步討論。