《CSS Sprite》將佈景中多張圖片合併,提升網站效能

梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能
  雖然說現在透過CSS3,可繪製出各式各樣的圖案,但還是免不了有些東西還是得透過圖片才能呈現出來,而為了有經驗的網頁設計師,都知道圖片能小盡量小,且將圖片製作成四方連續的方式來作延展,所以當每次將網頁的版型製作完成時,在images的資料夾中,就會有許多的圖檔,雖然說這些檔案都不大,因此當使用者向伺服請求檔案時,當讀取完畢就釋放了,但各位若平常有在拷貝檔案時,是否會發現到,當把一堆檔案壓成一個壓縮檔時,在傳輸上快許多,因此相同的道理,若將多張切好的圖片拼成一張雖然檔變大,但這樣只需對主機請求一次,相對的速度會快許多,而光想到要將已切好的小圖,再一一的用PS將檔案組成一大張時,是否會感到相當的麻煩,最近梅干發現一個好用的平台,可將多張圖片自動合併成一大張外,還會將每張圖片的位置,產生出CSS碼,讓使用者可快速套用,因此身為網頁設計的你,也趕快來看看囉!

CSS Sprite:
網站名稱:CSS Sprite
網站網址:http://spritegen.website-performance.org/

Step1
首先,將要合併的圖檔,全選並壓縮起來。
梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能
Step2
接著進到「CSS圖片合併產生器」的網站後,先點上方的語系,再點下方的選擇檔案鈕。
梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能
Step3
選擇剛所壓縮好的圖片檔。
梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能
Step4
接著再設定每個圖片的間距,以及合併後要輸出的檔案格式,和CSS輸出的前綴詞,當都設定後,再按下的合併鈕。
梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能
Step5
這時就會將合併好的圖片位置,產生出一連串的CSS碼,方便之後使用就不用位置算半天啦!另外別忘了也將合併好的圖片檔給下載回來喔!
梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能
Step6
當下載回來的圖檔,可看到全部的圖片已合併在一起了,且還是全透明的,是不是超方便的呀!
梅問題-《CSS Sprite》將佈景中多張圖片合併,提升網站效能

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 0 留言