📱
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 並同時產生響應式程式碼，輕鬆符合現代網路標準。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback sent successfully. Thank you for your cooperation!
An error occurred. Please try again later.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.