01 · 從一張原圖開始
選擇一張高解析度圖片，並按頁面版面配置設定寬度和格式。原始檔案不會被修改。
可發布的圖片資源 / 01
網站圖片資源生成器
一張原圖，適配各種螢幕。匯出完整圖片集和響應式 HTML，直接用於網站。
一張圖片，適配網站
你的發布資源包
320px640px1280px
一張原圖，適配各種螢幕。
比較實際檔案大小，再下載圖片和響應式 HTML。
生成後即可檢視實測大小，不使用估算或預填結果。
從一張圖片到完整資源包
02 · 比較實際結果
生成檔案後，選擇一行即可預覽，並比較各寬度下的實際檔案大小。
03 · 下載完整資源包
設定替代文字和 sizes 屬性，然後用一個 ZIP 下載圖片、HTML 和檔案清單。
發布之前
調整尺寸和編輯會生成新檔案。請保留原圖和必要署名，並按要求披露 AI 使用情況。
常見問題
ZIP 中包含哪些檔案？
包含編碼後的圖片、picture.html 程式碼片段、記錄尺寸和位元組大小的清單，以及簡短使用說明。HTML 引用與實際匯出檔案名稱一致。
工具會放大圖片嗎？
不會。每個寬度均以原圖寬度為上限，重複寬度會合併，圖片保持原比例，HTML 使用實際輸出尺寸。
每種格式都能保留透明背景嗎？
WebP 和 AVIF 可以保留透明度。JPG 不支援透明，會使用所選背景色。關閉透明度後，所有格式都會鋪設該背景色。
如何使用 srcset 和 sizes？
將圖片放在匯出的 HTML 旁，或將 URL 改為資源目錄。根據各斷點的實際 CSS 顯示寬度設定 sizes，瀏覽器會從列出的寬度中選擇圖片。首屏主圖請移除懶載入。
匯出是無損的，或會保留中繼資料嗎？
不是。圖片會調整尺寸並重新編碼，不會複製原始中繼資料。壓縮可能改變細節和顏色表現。請保留原圖中的編輯、來源和版權記錄。如需不重新編碼且經過驗證的中繼資料清理，請使用 AI Metadata Checker。