Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖
製作網站通常會有很多小圖案，但是每一張圖案都單獨使用會增加網站的請求連線數，讓網頁載入變慢。因為出現了一種所謂的「CSS Sprite」，幫你把所有的小圖拼貼成一張大圖，只要請求一張圖片，就能把所有小圖一併請求，加快網站的載入速度而不把網站連線數浪費在等這些小圖的請求。不過拼貼圖片的時候該怎麼操作呢？
拼貼這些CSS用的小圖，最簡單的方式就是自己開一個空白透明底圖，把圖片放上去排列好，但是當你要引用圖片的時候，你知道這些小圖的座標嗎？相信你應該會用到很辛苦，光是算座標就算到天荒地老。是否有更快的方式可以處理？其實有線上版的圖片合併服務，不過香腸平常做網頁偏好使用「Cyotek Spriter」這個免費軟體，他會自動幫你合併輸出圖片、輸出CSS、輸出HTML，讓你快速可以使用這些小圖。
這個Cyotek Spriter是一款免費的CSS圖片合併軟體，可以讓你自設圖片的間距、合併模式、圖片輸出自動壓縮、自動修改CSS名稱，並提供即時預覽、CSS原始碼、轉存後的圖片、實際的HTML碼，非常簡單又好用，雖然畫面全英文，但是如果你熟悉此軟體，產生出CSS合併圖片僅需10秒鐘，就可以輕鬆搞定CSS與圖片。
- 軟體名稱：Cyotek Spriter
- 軟體性質：免費軟體
- 軟體語言：英文
- 官方網站：http://www.cyotek.com/cyotek-spriter
- 軟體下載：下載Cyoteck Spriter
第1步 開啟軟體後，點選左上角的空白圖案。
【註】快速鍵：Ctrl + N
第2步 點選【Project】→【Add Images】，選擇要加入的圖片。
【註】快速鍵：圖片選取直接拖曳到左邊藍底視窗。
第3步 圖片加入成功後如下，如果要再額外加圖可以如上操作。如果要取消圖片，右邊區塊上的【Files】可以點一下。
第4步 接著調整壓縮模式，點選【complex】這是比較強化的壓縮模式。
第5步 下方可以切換預覽【Preview】查看。
第6步 想要查看CSS也可以點下方【CSS】瀏覽，如果想替CSS改名等設定，右側可以搭配【CSS】頁籤進入調整。
第7步 如果設定都調整完畢，接下來輸出CSS合併圖片，點選【Project】→【Export】。
【註】快捷鍵：F5
第8步 這邊可以決定要輸出的檔案，軟體提供CSS、HTML、圖片輸出。一般香腸習慣只輸出CSS和圖片，所以只勾選「Export CSS」和「Export Spritesheet」，然後設定輸出位置。最後點﹝確定﹞開始輸出。
第9步 輸出完畢後電腦會有聲響，點擊﹝Close﹞即可關閉。
第10步 開啟CSS和圖檔，是不是都幫你合併好了呢？
![[教學]如何用EZ WAY易利委實名認證申報包裹？](https://i0.wp.com/sofree.cc/wp-content/uploads/2022/05/20220522002944_8.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用EZ WAY易利委實名認證申報包裹？")
![[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？](https://i1.wp.com/sofree.cc/wp-content/uploads/2024/04/20240402230128_0.png?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？")
![[教學]如何申請台北捷運誤點證明？](https://i0.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何申請台北捷運誤點證明？")
![[教學]如何機車自主開單繳費停車省5元？台北市限定優惠！](https://i0.wp.com/sofree.cc/wp-content/uploads/2022/05/20220515025108_22.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何機車自主開單繳費停車省5元？台北市限定優惠！")
