Srcset 產生器
新依你提供的寬度產生含 srcset 與 sizes 的響應式 <img> 標記。
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
在同一個地方產生 srcset、sizes 和 picture 標記
手動撰寫響應式圖片標記相當繁瑣——srcset 清單、對應的 sizes 屬性、含有 WebP 和 AVIF 後備方案的 <picture> 區塊——一個錯字就會導致瀏覽器悄悄下載錯誤的檔案。這個 srcset 產生器為您建立完整的標籤：輸入檔名和寬度，便可產生帶有正確描述符、延遲載入和非同步解碼的完整可複製響應式 <img> 或 <picture> 元素。
這是一個完全在瀏覽器中執行的免費響應式圖片產生器——無需註冊，不會上傳任何內容，載入後離線也可正常使用。
srcset 和 sizes 詳解
響應式圖片需要兩個部分協同運作。srcset 是檔案清單及其實際寬度——hero-640.jpg 640w 告知瀏覽器該檔案寬度為 640 像素。sizes 描述圖片在版面中的顯示寬度，例如 (max-width: 600px) 100vw, 600px。瀏覽器讀取 sizes，乘以裝置像素比，再下載最接近的 srcset 候選檔案。
將描述符切換為 x 可取得像素密度標記——logo.png 1x, logo@2x.png 2x——非常適合視網膜螢幕上的固定尺寸圖片（如標誌和圖示），此時使用 w 描述符和 sizes 會顯得多餘。
何時改用 picture 元素
普通 srcset 處理解析度切換——同一張圖片的不同尺寸。當您需要更多控制時請使用 <picture> 元素：提供帶後備方案的新一代格式，或藝術指導（行動裝置和桌面版使用不同的裁切方式）。
在 <picture> 模式下，此工具會輸出一個 <source type="image/avif">、一個 <source type="image/webp"> 和一個 JPEG 或 PNG <img> 後備方案，使現代瀏覽器取得最小的格式，舊版瀏覽器也能看到圖片。
在本機將圖片調整為每種寬度
標記只是工作的一半——您還需要實際調整大小後的檔案。將圖片拖入工具，它會在 HTML canvas 上將其調整為每種寬度，然後讓您下載完整的檔案組，檔名與產生的標記完全相符（hero-320.jpg、hero-640.jpg 等）。
無需上傳，無需建置管道。由於放大超過原始尺寸只會增加模糊度，工具會標記任何大於來源圖片的寬度，確保您的圖片組準確無誤。
與 Squoosh、Responsivebreakpoints.com 和 Cloudflare Image Resize 的比較
Squoosh（來自 Google）擅長單張圖片的壓縮和轉換——非常適合為 WebP 或 AVIF 選擇合適的品質設定。但它不會產生 srcset 標記，也不會產生可貼入 HTML 的完整響應式圖片標籤。它是壓縮工具，而非標記產生器。
Cloudinary 的 Responsivebreakpoints.com 會將您的圖片上傳至 Cloudinary 伺服器以計算最佳斷點並產生調整大小後的圖片。結果不錯，但您的檔案會離開您的裝置，且須遵守 Cloudinary 的條款。Cloudflare Image Resize 和 Imgix 是 CDN 服務——它們在傳遞時處理圖片，但需要帳戶設定、API 整合和持續計費。UtiloKit 的 srcset 產生器處於不同位置：它在用戶端本機產生完整的 HTML 標記並調整圖片大小，無需上傳、無需帳戶、無需費用，也沒有檔案大小限制。
寬度、斷點和核心網頁指標
可靠的寬度組合是 320、640、960、1280 和 1920，每步大約加倍，涵蓋手機到大型視網膜顯示器；為全出血主圖新增 2560。提供適當大小的圖片是改善核心網頁指標最大的收益之一：更少的位元組意味著更快的最大內容繪製 (LCP)，新增 width 和 height 屬性可防止影響使用者和排名的版面偏移 (CLS)。
為螢幕外的圖片新增 loading="lazy"，使其僅在滾動到檢視範圍時才載入；為主圖新增 fetchpriority="high"，使其優先載入——兩者在此都是一鍵切換。
私密、即時且可離線——在任何裝置上均可執行
無需安裝任何東西，也無需建立帳戶。每個標籤都在您輸入時於瀏覽器中組合，您調整大小的任何圖片都使用 canvas API 在本機處理——從不上傳任何內容。產生器在頁面載入後可離線使用，因此您可以在任何地方建立響應式 img srcset 和 <picture> 標記——在飛機上、在手機上、沒有 Wi-Fi 時。
Frequently asked questions
srcset 是什麼，有什麼用途？
srcset 屬性讓您列出同一張圖片在不同寬度下的多個版本，瀏覽器可以下載最適合裝置的那個。不必向每位訪客傳送一個大型檔案，您只需撰寫 srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w"，瀏覽器就會選擇看起來仍然清晰的最小圖片——在手機上節省頻寬，在視網膜筆記型電腦上提供清晰圖片，所有這些都無需 JavaScript。
什麼時候應該使用 srcset？
當圖片在不同螢幕上以不同尺寸顯示時——主圖橫幅、文章圖片、產品照片，任何流動元素——都應使用 srcset。它是解析度切換的正確工具：同一張圖片，只是更大或更小。如果您需要在某些斷點更改裁切方式或實際圖片（藝術指導），請使用 picture 元素。小型固定尺寸的圖示和標誌根本不需要 srcset。
如何同時使用 srcset 和 sizes？
srcset 列出檔案及其實際像素寬度（640w 表示該檔案寬 640 像素）；sizes 告知瀏覽器在計算版面之前圖片的顯示寬度。配合使用：srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px"。瀏覽器讀取 sizes——'600px 以下時為全視口寬度，否則為 600px'——計算所需像素（顯示寬度 × 裝置像素比），再選擇最接近的 srcset 候選檔案。
w 描述符和 x 描述符有什麼差別？
w 描述符描述每個檔案的實際像素寬度——image-640.jpg 640w——必須與 sizes 配合使用；瀏覽器隨後為任何螢幕進行計算。x 描述符僅描述像素密度——image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x——適合固定尺寸圖片，如只需在視網膜螢幕上顯示清晰的標誌。對於流動的、版面驅動的圖片使用 w，對於固定尺寸的圖片使用 x。
如何提供帶後備方案的 WebP 和 AVIF？
使用 picture，每種現代格式對應一個 source，並用普通 img 作為後備方案：source type="image/avif" srcset="…"，然後 source type="image/webp" srcset="…"，然後 img src="hero.jpg" …。瀏覽器使用它支援的第一種格式，如果不支援任何格式則回退到 JPEG 或 PNG img——舊版瀏覽器仍能看到圖片。在 picture 模式下啟用 AVIF 和 WebP，此工具會撰寫完整的區塊，包括所有描述符。
應該產生哪些圖片寬度？
可靠的通用組合是 320、640、960、1280 和 1920——每步大約加倍，涵蓋小型手機到大型視網膜螢幕；為全出血主圖新增 2560。對於從不超過 800px 寬的內容，不需要超過約 1600（800 × 2 用於視網膜）的寬度。不要產生太多導致步驟毫無意義；四到六個寬度通常就夠了。
為什麼我的 srcset 不起作用？
常見原因：(1) 您在瀏覽器正確判斷不需要最大檔案的螢幕上測試——調整視窗大小或降速到慢速連線以觀察切換；(2) sizes 缺失或錯誤，導致瀏覽器假設 100vw 並下載大檔案；(3) 列出的檔案在那些路徑上實際不存在（檢查網路標籤中的 404 錯誤）；(4) 快取在提供已下載的尺寸。srcset 是一個提示，瀏覽器可以選擇較大的快取圖片——這是設計使然。
