Lorem Picsum 佔位圖片產生器

Lorem Picsum / 佔位圖片產生器 是一款免費的瀏覽器工具，可為模型、線框圖、原型和前端開發創建畫素完美的佔位圖片。您可以設置最高達 4000 畫素的任何寬度和高度，選擇顏色，添加自定義文字，且基於畫布的預覽會立即更新——無需伺服器往返，無需等待。您可以將其下載為 PNG、JPG、WEBP 或 SVG，或者直接獲取適用於 HTML / Markdown / React 的代碼片段，以及 Lorem Picsum、Placehold.co 和 DummyImage 的外部鏈接 URL。

什麼是佔位圖片，為什麼我需要它？

佔位圖片是在網站或應用程式的設計與開發階段使用的臨時圖片。它為最終圖片預留空間，讓設計師和開發人員可以在真實照片或圖形準備好之前配置內容、測試響應式行為並審查模型。佔位符對於線框圖、原型、電子郵件模板和前端測試至關重要。沒有它們，版面會塌陷，CSS 規則會失效，利益相關者也無法想像完成後的設計。

常見使用場景

• 線框圖與模型 — 向客戶準確展示每張圖片的位置及其尺寸。
• 前端原型設計 — 在最終資產交付之前開發響應式佈局。
• CMS 測試 — 使用真實的圖片尺寸填充測試文章和產品頁面。
• 電子郵件模板 — 為行銷活動預留橫幅和產品圖片插槽。
• 文件與設計系統 — 說明長寬比、間距和斷點。
• 延遲載入 (Lazy-load) 測試 — 快速生成大圖以壓力測試圖片載入策略。

Lorem Picsum 和 Placehold.co 有什麼區別？

Lorem Picsum (picsum.photos) 返回所請求尺寸的隨機真實照片，非常適合寫實的模型。Placehold.co 和 DummyImage 返回中心印有尺寸的純色矩形，這對於線框圖和顯示給定尺寸圖片的確切位置非常理想。此產生器在一個地方為這兩種風格構建 URL，此外還會產生自己的畫布渲染純色、漸層或棋盤格圖片，您可以將其下載為文件。

如何生成一組支援 Retina 的佔位圖片？

設置您的基本寬度和高度，然後點擊「生成 URL 和代碼片段」展開結果面板，並點擊「下載 1x / 2x / 3x」。該工具會以 1×、2× 和 3× 比例生成同一佔位符的三個副本，可用於高 DPI 螢幕的 srcset 屬性。每個文件下載時都有清晰的文件名，如 [email protected]。

為什麼預覽更新不需要伺服器請求？

圖片完全是使用 HTML Canvas API 在您的瀏覽器中繪製的。寬度、高度、顏色或文字的每次更改都會立即重新渲染，無需網路往返。這意味著該工具速度極快，載入後可離線工作，且絕不會將您的設計選擇發送到任何伺服器。一旦您對預覽感到滿意，同一個畫布就可以導出為可下載文件或複製為 base64 資料 URL。

我可以下載哪些圖片格式？

您可以將生成的佔位符下載為：

• PNG — 無損，支援透明，最適合純色和清晰文字。
• JPG — 文件較小，適用於可接受少量壓縮失真的類照片內容。
• WEBP — 在同等質量下具有最佳壓縮率的現代格式。所有現代瀏覽器均支援。
• SVG — 向量格式，無限縮放，純色和漸層背景的文件體積極小。
• Base64 Data URL — 將圖片複製為行內文字，直接貼入 HTML 或 CSS。

如何使用此工具

1. 選擇尺寸： 以畫素為單位輸入寬度和高度，或點擊預設尺寸之一，例如頭像、橫幅、Hero 或 Twitter 卡片。
2. 選擇背景樣式： 純色用於平鋪顏色，漸層用於雙色混合，或棋盤格用於透明風格背景。
3. 設置顏色： 使用調色板、直接輸入十六進位代碼，或點擊快速調色板樣本。
4. 添加自定義文字（可選）： 留空則自動顯示尺寸（例如 600 × 400）。
5. 觀看即時預覽： 畫布會隨著每次輸入而更新——無需點擊提交。
6. 下載或生成 URL： 點擊「下載圖片」獲取即時文件，或點擊「生成 URL 和代碼片段」獲取外部鏈接 URL 和複製代碼。

快速尺寸參考

最佳效果提示

• 鎖定長寬比：調整大小時鎖定比例，以保持相同的比例——這對響應式集合很有用。
• 使用棋盤格模式：為透明疊加層設計時，模擬透明度的渲染效果。
• 選擇高對比顏色：選用淺背景深文字（或反之），以確保尺寸標籤清晰易讀。
• 保持文字簡短：長標籤會自動縮小，但 4 到 12 個字元看起來最整潔。
• 使用 SVG 進行清晰縮放：對於將以多種尺寸顯示的設計，SVG 在每個縮放級別都更清晰。
• 正式環境選用 WEBP：在同等質量下比 JPG 小約 30%，且瀏覽器支援良好。

我可以在商業項目中使用生成的圖片嗎？

由本工具的畫布產生器（您下載的純色預覽）創建的自定義圖片 100% 屬於您，可以不受限制地在任何地方使用。Lorem Picsum 照片根據 Unsplash 許可證獲得許可，可用於商業和個人用途。Placehold.co 和 DummyImage 也可以免費使用，但在發布正式版資產之前，請務必檢查各服務的當前條款。

常見問題

有最大圖片尺寸限制嗎？

此工具支援每邊最高 4000 × 4000 畫素的尺寸，這涵蓋了幾乎所有的實際使用場景，包括高 DPI 的 Hero 圖片和 4K 顯示器。由瀏覽器負責運算，因此在舊設備上，極大畫布的預覽可能會短暫變慢。

我可以生成透明的佔位符嗎？

可以——下載為 PNG 或 SVG，並使用棋盤格背景模式來觀察透明度的渲染效果。若要下載完全透明的圖片，請將背景顏色和次要顏色設置為相同值，並選擇 PNG 格式。

圖片可以在 Photoshop、Figma 或 Sketch 中使用嗎？

當然可以。PNG、JPG、WEBP 和 SVG 都是所有現代設計工具支援的標準圖片格式。將下載的文件拖放進您的畫布中，或直接在 CSS 中將資料 URL 用作行內背景。

為什麼要使用這個工具，而不是直接輸入 Placehold.co 的 URL？

三個原因：(1) 在提交 URL 之前進行即時視覺預覽——您能準確看到將獲得什麼；(2) 同時一鍵複製 HTML、Markdown、JSX、CSS 和 BBCode；(3) 可下載自託管文件，用於離線使用或無法依賴第三方服務的項目。

它在行動裝置上可以運作嗎？

可以，整個介面都能適應手機和平板電腦螢幕。畫布預覽會按比例縮放，控制項垂直排列，且所有下載 / 複製操作都通過行動裝置剪貼簿 API 運作。

我可以一次批量生成多個尺寸嗎？

「Retina 集合」按鈕可一鍵下載當前尺寸的 1×、2× 和 3×。對於其他批次，只需點擊各個預設晶片並下載——畫布以 60+ FPS 重新渲染，因此迭代速度非常快。

相關工具

• 圖片大小調整計算機 — 將現有照片調整為任何寬度 / 高度。
• 圖片壓縮計算機 — 在發布到正式環境前縮小文件體積。
• 配色方案產生器 — 為您的佔位符選擇調色板。
• CSS 漸層產生器 — 為背景設計漸層。

其他資源

• Lorem Picsum — 免費隨機照片服務
• Placehold.co — 現代佔位符服務
• MDN：img 元素與 srcset
• Lorem ipsum — 佔位內容歷史