CyotekSpriter:網站圖片拼接CSS工具

Cyotek Spriter 是一款支援網站開發的工具,可以幫助設計師們把網站上的圖片拼接起來然後生成CSS程式碼,可以讓你自設圖片的間距、合併模式、圖片輸出自動壓縮、自動修改CSS名稱,並提供即時預覽、CSS原始碼、轉存後的圖片、實際的HTML碼,非常簡單又好用。

CyotekSpriter:網站圖片拼接CSS工具

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

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

猜你喜歡

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *