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自動合併多張小圖