Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

發表時間：

製作網站通常會有很多小圖案，但是每一張圖案都單獨使用會增加網站的請求連線數，讓網頁載入變慢。因為出現了一種所謂的「CSS Sprite」，幫你把所有的小圖拼貼成一張大圖，只要請求一張圖片，就能把所有小圖一併請求，加快網站的載入速度而不把網站連線數浪費在等這些小圖的請求。不過拼貼圖片的時候該怎麼操作呢？

拼貼這些CSS用的小圖，最簡單的方式就是自己開一個空白透明底圖，把圖片放上去排列好，但是當你要引用圖片的時候，你知道這些小圖的座標嗎？相信你應該會用到很辛苦，光是算座標就算到天荒地老。是否有更快的方式可以處理？其實有線上版的圖片合併服務，不過香腸平常做網頁偏好使用「Cyotek Spriter」這個免費軟體，他會自動幫你合併輸出圖片、輸出CSS、輸出HTML，讓你快速可以使用這些小圖。

這個Cyotek Spriter是一款免費的CSS圖片合併軟體，可以讓你自設圖片的間距、合併模式、圖片輸出自動壓縮、自動修改CSS名稱，並提供即時預覽、CSS原始碼、轉存後的圖片、實際的HTML碼，非常簡單又好用，雖然畫面全英文，但是如果你熟悉此軟體，產生出CSS合併圖片僅需10秒鐘，就可以輕鬆搞定CSS與圖片。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第1步  開啟軟體後，點選左上角的空白圖案。

【註】快速鍵：Ctrl + N

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第2步  點選【Project】→【Add Images】，選擇要加入的圖片。

【註】快速鍵：圖片選取直接拖曳到左邊藍底視窗。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第3步  圖片加入成功後如下，如果要再額外加圖可以如上操作。如果要取消圖片，右邊區塊上的【Files】可以點一下。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第4步  接著調整壓縮模式，點選【complex】這是比較強化的壓縮模式。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第5步  下方可以切換預覽【Preview】查看。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第6步  想要查看CSS也可以點下方【CSS】瀏覽，如果想替CSS改名等設定，右側可以搭配【CSS】頁籤進入調整。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第7步  如果設定都調整完畢，接下來輸出CSS合併圖片，點選【Project】→【Export】。

【註】快捷鍵：F5

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第8步  這邊可以決定要輸出的檔案，軟體提供CSS、HTML、圖片輸出。一般香腸習慣只輸出CSS和圖片，所以只勾選「Export CSS」和「Export Spritesheet」，然後設定輸出位置。最後點﹝確定﹞開始輸出。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第9步  輸出完畢後電腦會有聲響，點擊﹝Close﹞即可關閉。

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

第10步  開啟CSS和圖檔，是不是都幫你合併好了呢？

Cyotek Spriter 網站圖片合併軟體，懶人CSS自動合併多張小圖

在Google News上追蹤我們最新文章