圖片在手機顯示很小，為什麼還下載大檔？查srcset與currentSrc

換了模板，圖片在手機只佔一小格，載入卻還是慢。先別只看畫面尺寸：CSS可以把圖片縮小，瀏覽器仍可能下載原本的大檔。要找出原因，得看它實際選了哪個檔案。

先分清顯示寬度與下載來源

src是圖片來源，srcset提供不同尺寸的候選檔，sizes描述圖片在版面裡預計佔多寬。瀏覽器再依裝置像素密度等條件選圖；currentSrc才是當下選到的URL。僅改CSS的width，不會自動產生一張容量更小的圖片。

WordPress有產生響應式圖片來源的機制，但前台是否輸出候選檔，也受圖片中繼資料與主題輸出方式影響。直接貼一個圖片URL，不能據此假設它已有完整srcset。

用同一張照片看選檔結果

以下例子準備400、800、1200像素寬的同一張地球照片。桌機圖片欄寬720px；窄螢幕左右各留24px：

<img
  src="earth-1200.webp"
  srcset="earth-400.webp 400w, earth-800.webp 800w, earth-1200.webp 1200w"
  sizes="(max-width:768px) calc(100vw - 48px), 720px"
  alt="阿波羅17號拍攝的地球">

在像素密度1的Chrome中，1280px視窗選到800px圖；390px視窗的圖片顯示寬342px，選到400px圖。高密度螢幕可能選較大的候選檔，瀏覽器也可能沿用已快取的大圖，不能把這兩個結果當成所有手機的固定規則。

回到自己的網站，照這個順序查

先在瀏覽器開發者工具選到那張正文圖，核對有沒有srcset和sizes，再讀currentSrc。接著到Network找同一個URL，核對檔案大小與載入紀錄。畫面小卻載入大檔時，先查候選圖是否存在、sizes是否把欄寬報太大；不要只把CSS再縮小。

調整前保留原HTML與圖片檔，先用一張圖確認桌機、窄螢幕都不模糊，再套到其他頁。這和裁切是兩件事：圖片主體被切掉，可接著看object-fit卡片裁切的用法。選到合適檔案能減少不必要的下載，但不代表整站速度或搜尋排名已改善。

參考資料

資料核對：2026年10月4日。文件與瀏覽器行為可能更新。