LESSON-10 · TOPIC 03
能用 srcset 提供不同 intrinsic widths，並用 sizes 告訴瀏覽器圖片在各 breakpoint 的預期顯示槽寬。
能用 srcset 提供不同 intrinsic widths，並用 sizes 告訴瀏覽器圖片在各 breakpoint 的預期顯示槽寬。
只有 srcset 沒有正確 sizes，瀏覽器可能高估顯示寬度而下載過大圖片，浪費行動網路與解碼時間。
要修改的檔案：files/starter/index.html
定位：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。｜依 starter-3 定位，只修改「srcset 與 sizes」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
桌機圖片實際只佔半欄，但瀏覽器仍依 100vw 選擇 1280px 候選。
起始狀態：img 有兩個 width descriptor candidates，sizes 暫為 100vw。
runtime 的 sizes attribute 真正更新；完整 image probe 在不同 viewport 回報 currentSrc、naturalWidth 與選中候選。
驗收證據：現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth
同一內容圖片在手機佔滿寬、桌機只佔半欄，需要避免所有裝置都下載最大檔時。
常見混淆：sizes 不是圖片檔案本身的尺寸，也不會直接設定 CSS width；它是候選選擇提示。
這段程式是理解起點，不是要你直接跳過 Starter。
srcset 是可選圖片清單，sizes 是告訴瀏覽器『這個位置大約會顯示多寬』。
正式說法：Width-descriptor srcset supplies candidate intrinsic widths；sizes defines the source size used with device pixel ratio to select a candidate before layout completes。
<img src="service-640.svg" srcset="service-320.svg 320w, service-640.svg 640w" sizes="(max-width:480px) 100vw, 50vw" alt="到府服務人員整理空間">每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/index.html 定位：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。。
檔案：files/starter/index.html 定位：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
要做：執行實驗將圖片 sizes attribute 由 100vw 改為 `(max-width:480px) 100vw, 50vw`；完整 probe 再於兩個寬度讀 currentSrc。
預期：runtime 的 sizes attribute 真正更新；完整 image probe 在不同 viewport 回報 currentSrc、naturalWidth 與選中候選。
證據：現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth
卡住先查：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
檔案：files/starter/index.html 定位：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 sizes attribute 真正更新；完整 image probe 在不同 viewport 回報 currentSrc、naturalWidth 與選中候選。
證據：現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth
卡住先查：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先確認 srcset 每個候選都有正確 w descriptor。
手機槽寬 100vw、桌機半欄 50vw，據此寫 sizes。
完整解答與原因：瀏覽器用 sizes 推估 slot，再結合 DPR 選 srcset 候選；正確 sizes 才能避免桌機半欄下載過大圖。