Web前端——圖片壓縮與合并

概述

Web前端需要做的漂亮，必定引入很多圖片和圖標來美化界面，但是嵌入式設備Flash有限，總共就那么幾M空間，可用于Web資源存放區(qū)域很受限制，本文記錄一種用于Web前端的圖片壓縮與合并方法，將多個制作好的圖片和圖標合并到一張圖片中，既減小了占用Flash大小，又使得瀏覽器一次加載便可加載到所有圖片

CSS Sprite Generator

要使用一個在線圖片壓縮合并工具，CSS Sprite Generator，鏈接地址：http://spritegen.website-performance.org/
進入后在網(wǎng)頁左上方一片區(qū)域，有open、Setting、Clear、Downloads和About，點擊open打開所需合并的圖片，該工具會自動優(yōu)化對齊

做一個例子，如下圖加載進來一些圖片后，會自動對齊

點擊其中一個圖標，在右側的設置區(qū)域可看到其坐標

這坐標怎么用？回到左邊的區(qū)域，點擊Downloads，右邊區(qū)域會更改為下載選擇，點擊spritesheet會下載合并后的圖片，點擊stylesheet會下載所有圖標的樣式，如下圖是合并后的圖片

stylesheet樣式文件內容如下

.sprite?{
????background-image:?url(spritesheet.png);
????background-repeat:?no-repeat;
????display:?block;
}

.sprite-icon-delete-normal?{
????width:?50px;
????height:?50px;
????background-position:?-5px?-5px;
}

.sprite-icon-modify-normal?{
????width:?50px;
????height:?50px;
????background-position:?-5px?-65px;
}

每個圖標有width、height和background-position三個屬性，這其實就是對應css樣式，可按如下格式建立一個刪除圖標的樣式

.icon-delete-normal?{
????width:50px;
????height:50px;
????overflow:?hidden;
????background-repeat:?no-repeat;
????background-image:?url('../img/spritesheet.png');
????background-position:?-5px?-5px;
}

其中url中為從這個工具下載的spritesheet合并圖片，HTML中就可以使用

......>來完全顯示該圖標了