在 Mac 上製作 CSS Sprite 圖
將圖示打包成一張影像，附上顯示各圖示的 CSS 和 HTML 預覽。
在 Mac 上使用「Sprite 圖產生器」
App 的截圖，使用範例檔案。
如何使用「Sprite 圖產生器」
- 1
拖入你的圖示
加入兩張以上的影像。每個檔案名稱都會成為一個 CSS class，所以請先取好名稱，例如「search.png」和「cart.png」。
- 2
設定間距和前綴
選擇圖示間距和 CSS class 前綴。
- 3
標示 Retina 圖示
如果你的圖示是 @2x，請開啟 Retina 選項，讓圖示以一半大小清晰顯示。
- 4
按一下「製作圖紙」
圖示會排成多列並儲存為 sprite.png，連同 sprite.css 和 preview.html 頁面，一起放在「下載項目」› OneMacTools 中以日期命名的資料夾。
- 5
用在你的網站上
將 sprite.png 和 sprite.css 放在一起，連結 CSS，並為元素加上 class。打開 preview.html 即可查看每個 class。
「Sprite 圖產生器」的功能
任何大小的圖示都會緊密排成多列，每個圖示都有自己的 CSS class，帶有正確的位置和大小，預覽頁面則會顯示所有圖示。你可以設定圖示間距、class 前綴，以及圖示是否為 @2x，讓 Retina 螢幕顯示更清晰。
適合用於
- 以一次請求載入一整組圖示
- 製作遊戲用的 Sprite 圖
- 為網站打包國旗或表情符號
選項說明
- 圖示間距
- 0、2、4 或 8 px，預設為 2 px。留一點間距，可避免網頁縮放時相鄰圖示互相滲入。
- 圖示為 @2x（以一半大小顯示，在 Retina 螢幕上更清晰）
- 預設關閉。開啟時，CSS 會以一半的像素尺寸顯示每個圖示，並相應縮放整張圖，讓雙倍解析度的圖示在 Retina 螢幕上清晰銳利。
- CSS class 前綴
- 每個 class 名稱的開頭；留空則為「icon」。使用前綴 icon 時，「search.png」會變成 .icon-search。
最佳做法
- 開始前請用小寫字母和連字號為檔案命名。class 名稱會取自檔名，「@2x」也會自動移除。
- 請使用透明背景的圖示，讓圖檔在任何頁面顏色上都適用。
- 將 Retina 圖示製作成剛好是顯示尺寸的兩倍，且像素尺寸為偶數，讓減半後的尺寸都是整數像素。
- 之後再用「壓縮 PNG」壓縮 sprite.png；對圖示圖集來說，調色盤 PNG 通常會小很多。
- 如果圖示會被縮放或在頁面放大時顯示，請將間距設為 2 px 以上。
搭配使用
- 輸入
- 兩張以上的影像，通常是 PNG 圖示，尺寸不限。
- 輸出
- sprite.png（所有圖示打包在一起）、sprite.css（每個圖示一個 class，包含其大小和位置）以及 preview.html。
- 不同大小的圖示會緊密排成多列，最高的排在最前面。
- 同名的檔案會產生加上編號的 class（例如 -2），因此不會遺漏任何一個。
關於「Sprite 圖產生器」的問題
什麼是 CSS Sprite 圖？
一張包含許多圖示的影像，搭配透過移動背景讓每個元素只顯示一個圖示的 CSS。只需一次請求就能載入所有圖示。
如何在我的網站上使用 Sprite 圖？
將 sprite.png 和 sprite.css 上傳到同一個資料夾，在網頁中連結該 CSS，並為元素加上 class="icon icon-search" 之類的 class。
class 名稱是如何產生的？
取自每個檔名，在你的前綴之後，轉為小寫，空格和符號換成連字號。例如「Shopping Cart.png」加上前綴 icon 會變成 .icon-shopping-cart。
可以使用不同尺寸的圖示嗎？
可以。每個圖示都保留自己的尺寸，其 CSS class 會取得相應的寬度和高度。
如何讓 Sprite 在 Retina 螢幕上保持清晰？
以顯示尺寸的兩倍製作圖示，並開啟 @2x 選項。CSS 會以一半大小顯示，在高解析度螢幕上看起來很清晰。
可以用於遊戲 Sprite 嗎？
可以。sprite.css 列出了每張圖片在圖檔上的位置和大小，你可以將它讀入遊戲引擎或 canvas 程式碼。
「Sprite 圖產生器」會上傳我的檔案嗎？
不會。「Sprite 圖產生器」完全在你的 Mac 上執行，檔案絕不會離開你的 Mac，也能離線使用。
「Sprite 圖產生器」會更改我的原始檔案嗎？
不會。結果會另存為新檔案，放在「下載項目 › OneMacTools」中以日期命名的資料夾；除非你開啟了另有說明的選項，否則原始檔案會完全保持原樣。
「Sprite 圖產生器」需要什麼？
只需要一台搭載 macOS 26 或以上版本的 Mac。不需另外安裝任何東西。
接下來這樣做
透過減少顏色將 PNG 縮小 60–80%，並保留透明度 — 非常適合截圖、標誌和圖示。
影像轉 Base64將影像轉成 Base64 data URI，可直接貼到 HTML、CSS 或 JSON 中。
