無法獲得srcset加載正確的圖像

Question

我使用的HTML以下&（使用響應開發工具時），150×150的圖像總是被加載使用Chrome，但無論是瀏覽器的寬度測試。如果我正確理解它，我認爲當瀏覽器寬度小於150像素時，它會加載60x60圖像？

<a href="/"> 
    <img src="https://dummyimage.com/60x60/000/fff" 
    sizes="100vw" 
    srcset="https://dummyimage.com/150x150/000/fff 150w"> 
</a> 

Answer 1

它始終加載150像素的圖像，因爲這是您在srcset屬性中列出的唯一一個圖像。

這裏是你應該做的：

<img 
    src="https://dummyimage.com/60x60/000/fff" 
    sizes="100vw" 
    srcset="https://dummyimage.com/60x60/000/fff 60w, 
      https://dummyimage.com/150x150/000/fff 150w"> 

瀏覽器將然後加載60像素圖像，如果全視（100vw在sizes屬性）是介於60至150像素，接近60比150，取決於瀏覽器的實現。

如果視是61px，那就沒有什麼意義載入真正做大像素的圖片，所以60像素應該下載。

但如果視口是149px，放大60像素的圖像會顯得難看，所以爲150px一者應下載。

這至少是如何在瀏覽器中實現。