srcset 和 sizes 屬性是 HTML5 中 <img> 標籤的兩個重要屬性，它們協同工作，允許瀏覽器根據不同的螢幕尺寸和解析度選擇最合適的影像源，從而最佳化頁面載入效能和使用者體驗。
srcset 屬性：
srcset 屬性指定多個影像源以及每個影像源的寬度描述符或畫素密度描述符。瀏覽器會根據這些描述符和自身的條件（例如螢幕寬度、畫素密度、網路連線速度等）選擇最合適的影像進行載入。
- 寬度描述符 (w)： 例如
image.jpg 500w，表示image.jpg的寬度為 500 畫素。瀏覽器會根據視口寬度選擇合適的影像。 - 畫素密度描述符 (x)： 例如
image.jpg 2x，表示image.jpg的畫素密度為裝置畫素密度的兩倍。瀏覽器會根據裝置畫素密度選擇合適的影像。
sizes 屬性：
sizes 屬性定義了一組媒體條件（類似於 CSS 媒體查詢）以及每個媒體條件下影像所佔視口寬度的百分比或具體畫素值。瀏覽器會根據當前的媒體條件選擇對應的值，然後結合 srcset 中的寬度描述符計算出每個影像的有效畫素密度，最終選擇最合適的影像。
- 示例:
sizes="(max-width: 768px) 100vw, 50vw"表示：- 如果視口寬度小於等於 768px，影像將佔據 100% 的視口寬度。
- 如果視口寬度大於 768px，影像將佔據 50% 的視口寬度。
協同工作：
瀏覽器會根據以下步驟選擇最佳影像：
- 評估
sizes屬性中的媒體條件，選擇合適的槽大小（slot size）。 - 使用槽大小和
srcset中的寬度描述符計算每個影像的有效畫素密度。 - 選擇有效畫素密度最接近裝置畫素密度的影像。
應用場景：
- 響應式圖片：
srcset和sizes屬性的主要應用場景是實現響應式圖片，根據不同的螢幕尺寸載入不同大小的影像，避免在小螢幕上載入過大的圖片，從而提高頁面載入速度和節省頻寬。 - 高畫質螢幕： 對於 Retina 螢幕等高畫素密度裝置，可以使用
srcset提供高解析度的影像，以保證影像的清晰度。 - Art Direction： 除了根據解析度選擇不同大小的圖片外，還可以根據不同的螢幕尺寸選擇不同裁剪方式或構圖的圖片，以提供最佳的視覺體驗。例如，在小螢幕上可能需要裁剪掉圖片的邊緣部分，以突出主體內容。
- 網路頻寬最佳化： 透過提供不同質量的影像，可以讓瀏覽器根據使用者的網路連線速度選擇合適的影像，從而最佳化頁面載入效能。例如，在網路連線較慢的情況下，可以選擇載入較低質量的影像。
示例：
<img src="image-480.jpg"
srcset="image-480.jpg 480w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
alt="Responsive Image">
在這個例子中，瀏覽器會根據視口寬度選擇合適的影像：
- 視口寬度小於等於 600px 時，選擇
image-480.jpg。 - 視口寬度在 601px 到 900px 之間時，選擇
image-800.jpg。 - 視口寬度大於 900px 時，選擇
image-1200.jpg。
總結：
srcset 和 sizes 屬性是實現響應式圖片的關鍵技術，它們可以幫助開發者根據不同的螢幕尺寸和解析度提供最佳的影像，從而提高頁面載入效能和使用者體驗。 理解這兩個屬性的協同工作方式對於構建高效能的 Web 應用至關重要。