標籤:CSS圖片合併

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

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

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