雪碧圖產生器

關於 GeekFormat

點擊上傳圖片

支援格式：PNG, JPG, WebP

佈局

圖片間距: 10px

050

上傳圖片以預覽雪碧圖

線上合併多張小圖示產生 CSS 雪碧圖，瀏覽器本機處理零上傳，支援橫向、縱向、網格三種版面自動輸出 background-position 定位程式碼。

什麼是雪碧圖（CSS Sprite）？

雪碧圖（CSS Sprite）是把多個小圖合併為一張大圖，然後用 background-position 定位顯示單一圖示的技術。「Sprite」這個詞源於早期遊戲機，把多個動畫幀合併到一張大圖裡反覆切換顯示。Web 前端借用了這個概念，把頁面裡大量小圖示合併成一張圖載入。

**為什麼需要雪碧圖？** HTTP 1.1 時代每個圖片檔案都會產生一次 HTTP 請求，含 TCP 握手、TLS 握手、請求標頭開銷。100 個圖示 = 100 次請求。雪碧圖把所有圖示放在 1 張圖裡，1 次請求完成所有圖示載入，顯著加快首屏渲染。HTTP/2 多路複用雖然降低了這部分優勢，但雪碧圖對 CDN 快取、gzip 壓縮、HTTP/1.1 相容仍有價值。

**基本原理：** 假設雪碧圖 200×60 包含 3 個 60×60 圖示橫向排列。在 CSS 中給一個 60×60 元素設定 `background: url(sprite.png); background-position: 0 0;` 顯示第一個；改為 -60px 0 顯示第二個；改為 -120px 0 顯示第三個。本工具會自動輸出這些座標值。

**現代替代方案：** SVG + use/symbol（推薦，向量、可變色、可動畫）、Icon Font（相容性好、跨平台）、HTTP/2 Server Push、Web 字型圖示等。每種方案有不同適用場景，建議根據專案實際情況選擇。

適用場景

網頁專案中有大量小圖示需要合併成雪碧圖減少 HTTP 請求、提升首屏載入速度
前端開發時需要統一管理專案圖示資源，自動產生 CSS 背景定位程式碼
圖示資源準備就緒後批次產生雪碧圖 + CSS 程式碼，直接交付給團隊使用
合併後大圖搭配 [圖片壓縮工具](/image/compress/) 進一步減小總體積，最佳化 LCP 效能指標
App / Electron / 桌面應用內嵌靜態圖示資源打包合併為單張圖
郵件 HTML 模板或靜態部落格需要多張圖示但又受限於郵件客戶端相容性
設計師交付圖示資源時提供雪碧圖形式方便前端工程師快速整合
為 Retina 螢幕專門輸出 2x 解析度雪碧圖，透過 background-size 配適 1x 與 2x 螢幕

使用方法

點擊上傳區域或拖曳多張圖片到上傳區（支援 JPG / PNG / WebP / GIF 等格式）
在左側圖片列表中透過拖曳把手或上下按鈕調整圖示順序
在左側版面區域選擇「橫向」「縱向」或「網格」三種排列方式之一
透過間距滑桿調整圖示之間的像素間距（建議 1-5px）
右側即時預覽雪碧圖效果，確認後點擊「下載」儲存 PNG 圖片，並「複製」CSS 程式碼到專案

功能特點

多圖一鍵合併：上傳多張小圖示或圖片，自動合併為單張雪碧圖
三種版面方式：橫向、縱向、網格版面自由切換，配適不同使用場景
間距可調：0-50px 像素間距滑桿，靈活控制圖示間留白
拖曳排序：列表中拖動圖示可調整合併順序，CSS 座標自動同步更新
行動裝置排序：支援上下按鈕調整順序，行動裝置瀏覽器也能方便操作
CSS 自動產生：自動輸出每張子圖的 background-position、寬高等完整定位程式碼
即時預覽：圖片或參數變化時立即重新產生雪碧圖，所見即所得
一鍵複製 CSS：內建複製按鈕，一鍵複製完整樣式表程式碼到剪貼簿
一鍵下載 PNG：合併後大圖直接儲存到本機，檔名固定為 sprite.png
本機瀏覽器處理：Canvas API 本機合併，圖片不上傳伺服器保護隱私
多格式輸入：支援 JPG、PNG、WebP、GIF 等主流圖片格式上傳
透明背景保留：輸出 PNG 保留原圖示透明通道，適合圖示合成

最佳实践

Retina 螢幕 2x 配適：用 2x 原始檔產生雪碧圖

如果目標使用者使用 Retina 螢幕（Mac、iPhone、HiDPI Windows），建議上傳 2x 解析度原始檔（如 32×32 圖示）產生雪碧圖，然後在 CSS 中用 background-size: 32px auto 縮放回 16×16 顯示。這樣 1x 螢幕不會模糊，2x 螢幕同樣清晰。一次產生配適所有裝置。

HTTP/2 專案下雪碧圖仍有價值

HTTP/2 多路複用降低了請求數瓶頸，但雪碧圖依然在 CDN 快取復用、gzip/Brotli 高壓縮率、內網代理穿透、HTTP/1.1 相容回退這四個場景下有顯著優勢。企業內網、政府/銀行系統、郵件 HTML 模板仍然以 HTTP/1.1 為主，雪碧圖無可取代。

PNG-8 vs PNG-24 選擇：圖示用 PNG-8，漸層圖用 PNG-24

雪碧圖輸出固定為 PNG，但產生前請用合適位元深度的原始檔：純色或單色圖示用 PNG-8（無損透明，體積比 PNG-24 小 60-80%）；含漸層、陰影、高光用 PNG-24。本工具不限制原始格式，建議先用 PNG 壓縮工具最佳化後再合併。

CDN 快取策略：檔名加 hash 永久快取

合併後 sprite.png 不要固定檔名，建議用內容 hash 重新命名（如 sprite.a3f2b1.png）實現永久快取（Cache-Control: max-age=31536000）。這樣瀏覽器只下載一次，後續存取走本機快取，比 HTTP/2 節省更多流量。本工具下載檔名固定為 sprite.png，可下載後重新命名。

gzip / Brotli 壓縮讓雪碧圖更省流量

合併後大圖的像素值連續性強，gzip/Brotli 壓縮率遠高於散落小圖。Nginx + gzip 1 級即可讓雪碧圖再縮小 60-80%，Brotli 可達 85%+。HTTP 標頭開啟 Content-Encoding 後，1MB 雪碧圖實際傳輸可能僅 200-300KB，是雪碧圖最被低估的隱藏優勢。

CSS Modules / Vue scoped 配適：用 :global() 包裝

如果專案使用 CSS Modules 或 Vue scoped CSS，工具輸出的 .icon-home、.sprite 類別名稱會被局部雜湊化失效。建議在 .module.css 中用 :global(.sprite) { ... } 包裝公用類別，再在 scoped 區塊外引入。或不使用 CSS Modules，僅靠 BEM 命名空間管理。

與 Icon Font 混合使用：核心圖示用 Font，複雜圖示用雪碧圖

實務上最穩的方案是混合：UI 通用小圖示（設定、關閉、搜尋、用戶）用 Icon Font（變色、向量、跨平台）；複雜彩色圖示（產品標誌、營運橫幅圖示）用雪碧圖。兩種方案優勢互補，避免任一方案全量使用帶來的維護成本。

工程化專案用 spritesmith 自動化，本工具做原型

長期維護專案建議用 spritesmith（Webpack）或 gulp.spritesmith 把雪碧圖產生接入建置流程：原始碼改圖示後自動重跑、輸出 hash 檔名、自動產生 SCSS/LESS 變數。本工具定位是零依賴快速原型和小專案交付，CI/CD 流水線場景用建置外掛更合適。

現代專案可從雪碧圖遷移到 SVG symbol

如果專案支援現代瀏覽器（Chrome / Safari / Firefox / Edge 全量、IE 11+），建議從雪碧圖遷移到 SVG symbol：單一檔案管理所有圖示、CSS 控制顏色和動畫、無 background-position 座標維護成本。本工具輸出的雪碧圖是一次性資產，可作為遷移前的過渡方案。

常見問題

什麼是雪碧圖？為什麼要把多張圖合併成一張？

雪碧圖（CSS Sprite）是把多張小圖合併為一張大圖，再用 background-position 定位顯示單一圖示的技術。合併後只需 1 次 HTTP 請求就能載入所有圖示，相比逐個載入數十張小圖能顯著減少請求數、加快首屏渲染，是前端效能優化的經典手段。

怎麼線上把多張圖示合併成雪碧圖？

上傳多張圖片後工具會自動按所選版面合併，並即時預覽。同時在右側自動輸出每張子圖對應的 CSS 背景定位程式碼（background-position）和寬高值，複製到樣式表即可使用。產生的雪碧圖為 PNG 格式，可一鍵下載。

產生的 CSS 程式碼怎麼用？

把下載的 sprite.png 放到專案目錄（如 /img/sprite.png），把工具輸出的 CSS 貼到樣式表。然後給需要顯示圖示的元素加 .sprite 類別和對應的 .icon-xxx 類別即可顯示對應圖示。例如：<i class="sprite icon-home"></i>。類別名稱由工具根據原始檔名自動產生。

支援哪幾種排列方式？

支援三種：橫向排列（圖示按列從左到右並排）、縱向排列（圖示按行從上到下堆疊）、網格排列（按圖示數量自動均分為方陣，欄數取平方根向上取整）。可以用左側面板切換模式預覽效果。

能調整圖示之間的間距嗎？

可以。左側有像素間距滑桿，範圍 0-50px，建議 1-5px。合理間距能避免 CSS 定位時邊緣像素干擾，但不影響最終使用——間距是雪碧圖內部的邊距，CSS 呼叫時只使用 background-position 精確座標。

能改變圖示的排列順序嗎？

可以。左側圖片列表中每張圖都支援拖曳排序（用左側的拖曳把手），也支援行動裝置上下按鈕調整順序。調整後雪碧圖會按新順序重新產生，CSS 座標也會同步更新。

支援哪些圖片格式？

支援 JPG、PNG、WebP、GIF 等所有常見圖片格式輸入。輸出統一為 PNG 格式（保留透明背景）。建議圖示使用 PNG 輸入，PNG 透明通道在合併後的雪碧圖中能正常保留。

現代專案還需要雪碧圖嗎？

HTTP/2 普及後，多路複用降低了一部分雪碧圖優勢，但雪碧圖對 CDN 快取、gzip 壓縮、首屏關鍵圖示載入仍有價值。如果圖示數量不多（< 10 個）或需要變色、動畫，建議改用 SVG symbol 或 Icon Font；如果是大量靜態 PNG 圖示，雪碧圖仍然是穩定可靠的方案。

Retina 螢幕下雪碧圖會變模糊嗎？怎麼配適？

會模糊。Retina 螢幕（Mac、iPhone、HiDPI Windows）物理像素是 CSS 像素的 2 倍或 3 倍，普通 1x 雪碧圖會被拉伸到 2x 像素顯示導致邊緣模糊。解決方案是上傳 2x 解析度原始檔（32×32 替代 16×16）產生雪碧圖，CSS 中用 background-size: 32px auto 縮放回 16×16 即可。

圖示合併會損失畫質嗎？

不會損失畫質。合併過程只是把多張圖按位置排列到一張大畫布上，不進行任何重取樣、壓縮或顏色調整。輸出 PNG 保持原圖品質。如果需要進一步減小合併後檔案體積，可以下載後用 [圖片壓縮工具](/image/compress/) 進一步處理。

雪碧圖圖片會傳到伺服器嗎？安全嗎？

不會。所有圖片合併都在你的本機瀏覽器內透過 Canvas API 完成，檔案不會上傳到任何伺服器，處理完即焚。即使是含敏感資訊的內部圖示、未公開的標誌設計稿也能安心處理。

產生的雪碧圖怎麼下載？

上傳圖片後工具自動產生預覽。點擊左側「下載」按鈕即可儲存為 sprite.png 到本機。如果有 CSS 程式碼需求，工具會自動輸出完整 CSS，點「複製」按鈕即可複製到剪貼簿。

class 名稱能不能自訂？

目前版本 class 名稱由工具根據原始檔名自動產生，固定使用 .icon- 前綴。例如上傳 home.png 會產生 .icon-home。規範命名（用英文、數字、連字號）的檔案能得到更清晰的 CSS 類別名稱。

雪碧圖、Icon Font、SVG Symbol 該選哪個？

看場景：大量靜態 PNG 圖示、需要相容 IE 舊版 → 雪碧圖；UI 通用小圖示、需要變色、跨平台 → Icon Font；現代專案、需要變色和動畫、希望單一檔案管理 → SVG Symbol 是首選。實務上常混合使用：核心 UI 圖示用 Icon Font，複雜彩色圖示用雪碧圖。

雪碧圖合併後大圖能不能用 [圖片壓縮工具](/image/compress/) 進一步減小體積？

可以。本工具固定輸出 PNG 無損格式，體積可能較大。建議流程：本工具產生雪碧圖 → 用 [圖片壓縮工具](/image/compress/) 減小 PNG 體積或轉 JPG（如果不需要透明）→ 用 [圖片轉檔工具](/image/convert/) 按需求轉 WebP。組合使用能最大化載入效能。

術語表

雪碧圖（CSS Sprite）: 把多張小圖合併為一張大圖，再用 background-position 定位顯示單一圖示的技術。Web 前端經典效能優化手段。
background-position: CSS 屬性，指定背景圖顯示的起始座標。雪碧圖透過負值讓背景圖向左 / 上滾動到目標圖示位置。例如：background-position: -60px 0 表示顯示 60px 偏移處的圖示。
background-size: CSS 屬性，指定背景圖顯示尺寸。Retina 螢幕配適關鍵：上傳 2x 原始檔產生雪碧圖後，CSS 中用 background-size: 32px auto 縮放回 1x 尺寸，1x 和 2x 螢幕都能清晰顯示。
網格版面（Grid Layout）: 本工具的網格模式按圖示數量自動計算欄數（取平方根向上取整），按列優先排列成方陣。例如 9 個圖示會排成 3×3 網格。
圖示間距（Padding）: 雪碧圖中每張子圖之間的像素留白。建議 1-5px，能避免 CSS 定位時邊緣像素干擾，但不影響最終使用——CSS 呼叫時只用精確座標值。
PNG 透明通道: PNG 格式支援 Alpha 通道，圖示背景可設定為透明。雪碧圖輸出保留 PNG 格式，透明圖示合併後仍能正常顯示。
HTTP/2 多路複用: HTTP/2 通訊協定支援在單一連線上平行處理多個請求，降低了一部分雪碧圖優勢。但 HTTP/2 在 CDN 配置、舊瀏覽器相容、gzip 壓縮上仍不如合併後的大圖。
SVG Symbol: SVG 的 <symbol> 元素 + <use> 引用機制，把所有圖示合併到一個 SVG 檔案，CSS 控制 fill / stroke / 動畫。雪碧圖在現代專案的首選替代方案。
DPR（裝置像素比）: Device Pixel Ratio，物理像素與 CSS 像素的比值。Retina 螢幕 DPR=2，CSS 16×16 圖示實際需要 32×32 物理像素。雪碧圖配適 Retina 螢幕的核心參數。

雪碧圖三種版面模式對比

版面模式	排列規則	典型用途
橫向排列	圖示按列從左到右並排	導覽列、Tab 按鈕、水平工具列
縱向排列	圖示按行從上到下堆疊	垂直選單、列表項前綴、上下結構
網格排列	按數量自動均分成方陣	通用場景、未知數量圖示的最佳起點

雪碧圖間距 Padding 建議值

間距像素	適用場景	使用建議
`0px`	圖示邊緣乾淨、已自帶透明 padding	極限緊湊，但邊緣像素可能互相干擾
`1-2px`	高品質圖示，邊緣留極少安全區	建議值，平衡緊湊與穩定
`3-5px`	普通圖示、含陰影或描邊	安全距離，主流建議
`6-10px`	圖示尺寸差異大、含描邊	避免大圖示遮蓋小圖示
`10-50px`	除錯期、人眼可見分組	僅用於開發預覽，生產環境不建議

Retina 螢幕 2x 雪碧圖配適參數對照

螢幕 DPR	CSS 尺寸	原始檔尺寸	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`