為了構(gòu)建響應(yīng)式網(wǎng)站，開發(fā)人員應(yīng)使用SRCSET和尺寸HTML屬性根據(jù)設(shè)備條件提供優(yōu)化的圖像。 1。 SRCSET屬性允許定義具有寬度或像素密度描述符的多個(gè)圖像源，從而使瀏覽器能夠根據(jù)屏幕尺寸和分辨率選擇最合適的圖像。 2。大小屬性通過通知瀏覽器在不同的佈局條件下將佔(zhàn)用多少空間來補(bǔ)充SRCSET，從而確保了準(zhǔn)確的圖像選擇。 3.最佳實(shí)踐包括提供後備SRC屬性，使用一致的單元，避免圖像變化過多，跨設(shè)備和網(wǎng)絡(luò)速度進(jìn)行測試，以及在可能的情況下自動(dòng)化圖像。 4。一個(gè)常見的錯(cuò)誤是濫用尺寸=“ 100VW”，即使圖像不填充屏幕，可能會(huì)降低性能。 SRCSET和大小一起改善了頁面速度和用戶體驗(yàn)，尤其是在移動(dòng)設(shè)備上，而無需JavaScript或複雜的服務(wù)器邏輯。

在構(gòu)建響應(yīng)式網(wǎng)站時(shí)，開發(fā)人員通常會(huì)面臨將正確圖像大小提供給不同設(shè)備的挑戰(zhàn)。這是srcset和sizes HTML屬性發(fā)揮作用的地方。它們可以幫助瀏覽器根據(jù)屏幕尺寸，分辨率和佈局上下文選擇最佳的圖像源，而無需依賴JavaScript或複雜的服務(wù)器邏輯。

srcset的作用

srcset屬性使您可以為不同設(shè)備條件定義多個(gè)圖像源。它通常放置在<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175087206657654.jpeg" class="lazy" alt="響應(yīng)式圖像的SRCSET和大小HTML屬性是什麼？" >標(biāo)籤中，並列出幾個(gè)圖像URL及其寬度描述符（ w ）或像素密度描述符（ x ）。

例如：

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175087206719359.jpeg"  class="lazy"  src =“ image-small.jpg”
     srcset =“ image-small.jpg 480w，
             Image-Medium.jpg 800W，
             圖像large.jpg 1200W“
     alt =“響應(yīng)式圖像”>

這是其工作原理：

• 瀏覽器檢查頁面上圖像的可用空間。
• 它還考慮了設(shè)備的屏幕分辨率。
• 然後，它從srcset中的列表中選擇最合適的圖像。

如果您針對(duì)的是諸如視網(wǎng)膜顯示器之類的高分辨率屏幕，則可以使用像素密度描述符：

 srcset =“ image-normal.jpg 1x，image-retina.jpg 2x”

這告訴瀏覽器在高密度屏幕上加載image-retina.jpg 。

sizes如何幫助瀏覽器決定

雖然srcset提供替代圖像，但sizes屬性告訴瀏覽器在不同條件下屏幕上的圖像將在屏幕上佔(zhàn)用多少空間。這有助於它從srcset列表中選擇最佳擬合圖像。

如果沒有sizes ，瀏覽器就必須猜測圖像的大小，這可能會(huì)導(dǎo)致選擇不佳 - 例如在移動(dòng)屏幕上加載巨大的圖像。

這是一個(gè)例子：

 <img src =“ image-small.jpg”
     srcset =“ image-small.jpg 480w，
             Image-Medium.jpg 800W，
             圖像large.jpg 1200W“
     尺寸=“（最大寬度：600px）100VW，
            （最大寬度：900px）50VW，
            33VW“
     alt =“響應(yīng)式圖像，尺寸為大小”>

讓我們分解這意味著什麼：

• 在屏幕較窄的屏幕上，圖像佔(zhàn)據(jù)了全視口寬度（ 100vw ）。
• 在600px和900px之間，它使用了一半的視口（ 50vw ）。
• 在較大的屏幕上，它使用了觀看口的三分之一（ 33vw ）。

有了此信息，瀏覽器可以更好地將圖像大小與實(shí)際佈局需求匹配。

使用srcset和sizes時(shí)的實(shí)用提示

• 始終將src屬性作為不支持srcset的舊瀏覽器的後備。
• 在列出srcset的寬度和sizes的尺寸時(shí)，請使用一致的單元。不小心混合px ， %和vw會(huì)混淆瀏覽器。
• 在不同的屏幕尺寸和網(wǎng)絡(luò)速度上測試您的設(shè)置。 Chrome DevTools網(wǎng)絡(luò)面板等工具可讓您模擬較慢的連接並查看圖像加載的表現(xiàn)。
• 不要過度。提供太多的圖像變化會(huì)增加複雜性，但可能不會(huì)顯著提高性能。
• 如果可能的話，請使用工具或CMS功能自動(dòng)化圖像大小。手動(dòng)創(chuàng)建每個(gè)圖像的多個(gè)版本是不可持續(xù)的。

一個(gè)常見的錯(cuò)誤是將sizes設(shè)置為"100vw" ，即使圖像實(shí)際上並未跨越完整的視口。這可能會(huì)欺騙瀏覽器選擇比所需的更大圖像，從而不必要地減慢事物。

總結(jié)

使用srcset和sizes一起可以使您更多地控製圖像如何跨設(shè)備的行為。這不是魔術(shù)，但它確實(shí)在性能和用戶體驗(yàn)上有明顯的差異，尤其是在移動(dòng)設(shè)備上。一旦您了解了它們?nèi)绾我黄鸸ぷ?，?shí)施它們就變得直接。

以上是響應(yīng)式圖像的SRCSET和大小HTML屬性是什麼？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！