批量CSS精靈圖生成器
將多個圖示或圖片合併為單一檔案，以減少 HTTP 請求並提升網站速度。自動生成完美的 CSS 代碼。
拖放圖標至此生成精靈圖
支援 PNG、JPG、WebP、AVIF。將多張圖片合併為一個 CSS 精靈圖表。
尝试使用示例
已加载的画廊
Sprite Studio
精靈圖表預覽
個別圖示
| 圖示 | 類別名稱 | 位置 | 尺寸 | 操作 |
|---|
精靈圖選項
批次應用
變更時自動重新生成
專業CSS精靈圖生成工具
透過將多個小圖像合併為單一精靈圖來優化網頁資源。降低延遲、節省頻寬，並簡化CSS工作流程。
提升網站速度
較少的HTTP請求意味著更快的頁面載入速度。通過將50個圖示合併為1個精靈圖，您可以消除49次往返伺服器的請求。
自動生成CSS
無需再手動計算像素。我們的工具會自動為圖標集中的每個圖標計算背景位置和尺寸。
智能佈局
選擇垂直、水平或最佳化網格佈局。調整間距以防止圖示縮放時產生「滲色」現象。
如何建立CSS精靈圖表
上傳您的圖標
拖放所有您想合併的小圖像或圖標。我們支援PNG、JPG、WebP和AVIF格式。
設定精靈設定
選擇佈局樣式，調整內邊距，並設定您的CSS類別前綴。預覽會即時更新。
匯出精靈圖與CSS
下載最終雪碧圖及對應CSS程式碼壓縮檔，可直接複製貼入專案使用。
常見問題
為什麼我應該使用CSS精靈圖？
CSS 雪碧圖是經典的效能優化技術，能減少 HTTP 請求次數，對於網路連線較慢或擁有大量圖示/UI 元素等小型資源的網站特別有益。
我應該選擇哪種佈局？
垂直與水平版面最易除錯，網格排列則能最大化壓縮圖像面積與檔案大小。
高DPI（視網膜）螢幕的支援情況如何？
您可以生成雙倍尺寸的圖示精靈表，並在CSS中使用「background-size」屬性縮小尺寸，以在高DPI螢幕上實現清晰渲染。