CSS Sprites線上產生器，SEO網頁最佳化減少讀取次數及加快載入

初期在學做網頁時，

我一直都偏愛像Google一樣的簡樸風，

 

用色塊及線條取代圖片的使用，運用CSS還可以加一點圓角效果，

最大的好處，當然就是網頁可以縮很小...

 

--summary--

 

 

但是網頁的快速發展，icon的應用變多了，

不只在工作上或自己在設計網頁時，

很時常的在大量使用精美的icon來美化選單按鈕，

甚至用了許多圖在網頁的邊角底圖，

 

此時大量的圖片，即使檔案壓縮了很小，

但因為每讀一個檔案，就會請求HTTP讀取一次的指令，

對於網站搜尋蜘蛛機器人來說，

超過一定次數時，可能就不讀離開了...

 

所以若在進行網站搜尋最佳化SEO，以及facebook的自動取得圖片，

勢必得將網站中所有非內容的圖片，皆利用CSS Sprites合併起來，

才能獲得最好的效果！

 

以下提供兩個合併圖片及自動產生CSS語法的CSS Sprites線上工具

 

 

==================================

CSS SPRITES GENERATOR

CSS 圖片合併產生器

==================================

 

 

成功範例：星樂園

早期在分享網址到facebook時，

若沒有使用OpenGraph Protoco來指定圖片時，

很容易會讀取到選單中的小icon圖片及LOGO，

讀了一堆小圖，卻讀不到文章中的圖...

 

在使用了CSS Sprites後，

現在只會讀到文章中的圖片了，

而其他雜七雜八的圖片，通通不再出現了！

 

而開啟頁面時，以前硬碟燈閃了好幾次，圖片一張張的打開！

現在硬碟燈只閃一下，圖片一次展開，

也有效減少了http request的次數，對硬碟的存取減少了！

重點是檔案大小總合也差不多（類似的圖在同一張比較小，或者自己併一下圖）