在 HTML 中，img 元素通常用於在網頁中插入圖片。img 元素有兩個相關的屬性：src 和 srcset。

src 屬性指定影像的 URL，它是必需的。瀏覽器將使用該 URL 載入影像並將其顯示在頁面上。

srcset 屬性允許您指定一系列不同大小或解析度的影像檔案，以便瀏覽器可以根據裝置的畫素密度和螢幕大小選擇最合適的影像。srcset 屬性的值是一個逗號分隔的列表，其中每個專案都有一個影像檔案的 URL，後跟一個空格和一個解析度描述符。描述符指定影像的解析度，並告訴瀏覽器如何選擇最合適的影像。通常使用畫素密度（如“1x”或“2x”）或影像寬度（如“320w”或“640w”）作為描述符。

在使用 srcset 屬性時，可以選擇一個預設的影像檔案，將其 URL 放在 img 元素的 src 屬性中。如果瀏覽器不支援 srcset 屬性或無法選擇最合適的影像，則將載入預設的影像檔案。

總的來說，src 屬性用於指定影像的 URL，而 srcset 屬性用於指定一系列不同大小或解析度的影像檔案，以便瀏覽器可以選擇最合適的影像來適應不同的裝置和螢幕大小。

下面是一個具體的例子。

![](https://img-blog.csdnimg.cn/img_convert/aa4502d0669a1e47d2de7d0b321ebeaf.png)

![](https://img-blog.csdnimg.cn/img_convert/fda58ecdf7f111dac7658768090e4c14.png)

src 裡的 NmOQ 是預設值，型別為 zoom：
![](https://img-blog.csdnimg.cn/img_convert/8e5a27e39fbf56fe7bb207bf25e5b2f4.png)

在現代瀏覽器中，當瀏覽器遇到一個帶有 `srcset` 屬性的 `img` 標籤時，它將根據以下步驟來渲染圖片：

1. 首先，瀏覽器會根據 `devicePixelRatio` （裝置畫素比）確定螢幕的實際畫素密度。例如，Retina 顯示螢幕的 `devicePixelRatio` 為 2。

2. 接下來，瀏覽器會將 `srcset` 屬性的值解析為一組可用的圖片資源和它們的尺寸。每個圖片資源都包含了一個圖片 URL 和一個描述該圖片的寬度，例如：`https://example.com/image-1000w.jpg 1000w`。

3. 瀏覽器根據螢幕的寬度和每張圖片的寬度來計算出最 佳的圖片大小，這個大小就是要顯示的圖片的實際畫素尺寸。例如，如果裝置的寬度為 500px，瀏覽器會選擇一個最接近 500px 的圖片資源，例如圖片寬度為 600px 的那張圖片。

4. 最後，瀏覽器將選中的圖片資源的 URL 賦給 `img` 元素的 `src` 屬性，然後載入並顯示該圖片。

總之，瀏覽器會根據裝置畫素比、可用圖片資源和裝置寬度來自動選擇和載入最 佳的圖片，從而實現高畫質晰度和響應式圖片的效果。

HTML 裡 img 元素的 src 和 srcset 屬性有何區別？

相關文章