📱
responsive image generator,
響應式圖片產生器 srcset 程式碼產生工具
在瀏覽器中將圖片批次縮放成多種寬度。
支援打包成 ZIP 儲存及 HTML 程式碼產生。
📏
批次調整大小
自動產生多種寬度的圖片
📋
程式碼產生
輸出 srcset / picture 標籤
🔒
安全處理
圖片不會傳送至任何伺服器
🔒
隱私保護
圖片在您的瀏覽器中安全處理，不會傳送至任何伺服器。
📸
點擊或將圖片拖曳到此處
支援 JPEG / PNG / WebP
⚙️ 設定
80%
📋 產生的程式碼
🖼️ 預覽與儲存
about,
關於響應式圖片產生器
響應式圖片產生器是一個從單一圖片檔案，自動產生對應於各種中斷點（螢幕寬度）的多個調整大小後的圖片工具。
透過為智慧型手機、平板電腦和桌上型電腦等不同裝置提供最佳尺寸的圖片，您可以顯著提升網站的載入速度和 Core Web Vitals 分數。
因為所有的圖片處理完全在您的瀏覽器中完成，即使是高度機密的圖片也能安全使用。
how to,
使用方法
STEP 1
選擇圖片
透過拖放或點擊選擇來載入您要處理的圖片（JPEG、PNG、WebP）。您的圖片絕對不會傳送至伺服器，確保您的隱私安全。
STEP 2
設定中斷點與格式
選擇輸出的目標寬度（例如 320px、640px、1024px），並調整輸出格式（推薦 WebP）及品質。
STEP 3
複製程式碼並儲存圖片
複製自動產生的包含 srcset 或 picture 元素的 HTML 程式碼，並將調整大小後的圖片打包成 ZIP 檔案一次儲存。
glossary,
名詞解釋
- 響應式圖片 (Responsive Images)
- 一種根據使用者裝置的螢幕尺寸和解析度，提供最佳圖片資料的技術。對於提升頁面載入速度至關重要。
- srcset 屬性
- 新增到 HTML
<img>標籤的屬性，用於向瀏覽器提供候選圖片檔案及其各自尺寸的清單。 - sizes 屬性
- 一個屬性，用於告訴瀏覽器相對於視口寬度，圖片在螢幕上的顯示寬度。
- picture 元素
- 一個包含
<source>和<img>子元素的 HTML 標籤，讓開發人員不僅能根據螢幕尺寸，還能根據格式支援（如 WebP）來提供不同的圖片。 - WebP
- 由 Google 開發的圖片格式，與傳統的 JPEG 或 PNG 格式相比能大幅減少檔案大小，強烈建議作為現代的網路標準。
- 中斷點 (Breakpoint)
- 在網頁設計中，版面配置或顯示的圖片改變以適應裝置尺寸時的特定螢幕寬度（以像素為單位）。
- 像素密度 (DPR)
- 顯示器上實體像素與 CSS 像素的比率（例如，Retina 顯示器為 2 倍）。需要更高解析度的圖片才能在這些顯示器上清晰呈現。
- 延遲載入 (Lazy Loading)
- 一種延遲載入圖片直到它們即將出現在螢幕上的技術。藉由添加
loading="lazy"屬性即可輕鬆實作，加快初始頁面載入速度。 - 寬高比 (Aspect Ratio)
- 圖片寬度和高度之間的比例關係。建議根據原始比例在 HTML 中指定
width和height屬性，以防止版面偏移 (Layout Shifts)。 - 網站核心指標 (Core Web Vitals)
- 由 Google 提倡的關鍵指標，用於提供卓越的使用者體驗。提供適當尺寸的圖片可大幅改善 LCP（最大內容繪製）分數。
faq,
常見問題
- Q.我該如何選擇中斷點？
- 我們建議根據典型的裝置尺寸來設定寬度：智慧型手機 (320px-480px)、平板電腦 (768px)、筆記型電腦 (1024px) 和桌上型電腦 (1280px+)。主流 CSS 框架的預設值也是很好的起始點。
- Q.產生的圖片會傳送到伺服器嗎？
- 不會。從載入圖片到調整大小以及產生 ZIP 檔案，所有的處理都完全在您的瀏覽器（本地環境）內完成，非常安全。
- Q.我應該選擇哪種圖片格式？
- 我們通常建議使用「WebP」，因為它的檔案尺寸較小且畫質更好。如果您絕對需要相容於非常舊的瀏覽器，請選擇 JPEG 或 PNG。
- Q.我應該使用 img+srcset 還是 picture 元素？
- 如果您只是想根據螢幕寬度提供不同的尺寸，「img+srcset」簡單且最適合。如果需要為不支援 WebP 的瀏覽器提供備用圖片，或是想根據螢幕寬度改變圖片的長寬比或構圖（藝術指導 Art Direction），請使用「picture」元素。
- Q.如果我指定了比原始圖片更大的中斷點會怎樣？
- 將圖片放大超過原始尺寸會降低畫質（使其模糊）。因此，本工具會自動排除大於原始圖片的中斷點，或以原始尺寸輸出。
use cases,
使用場景
🎨
網站速度最佳化
為行動用戶提供輕量化的小圖片，為 PC 用戶提供高解析度圖片，大幅改善頁面載入速度。
📱
行動優先 UI 設計
在節省行動數據使用量的同時，為 Retina 等高像素密度顯示器提供美麗清晰的圖片。
🛒
電子商務產品圖片
對於使用大量圖片的線上商店，提供最佳尺寸的圖片可防止跳出率並有助於提高銷售額。
🖼️
轉移至現代格式
透過本工具將現有的 JPEG 圖片轉換為 WebP 並同時產生響應式程式碼，輕鬆符合現代網路標準。
發送反饋/請求
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
這不是工具的輸入欄位
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.