前面的話
前面已經介紹過，描述性圖片最終要合並為雪碧圖。本文是photoshop巧用系列第五篇——雪碧圖
定義
css雪碧圖(sprite)是一種網頁圖片應用處理方式，它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中。使用雪碧圖的處理方式可以實現兩個優點：
【1】減少http請求次數
【2】減少圖片大小，提升網頁加載速度 (多張圖片加載速度小於拼合成的圖片的加載速度)
凡事都不完美，實現優點的同時也帶來了缺點，即提高了網頁的開發和維護成本。
應用場景
前面提到過，並不是所有的圖片都可以用來制作雪碧圖，只有描述性圖片才適合
【1】對於img標簽設置的內容性圖片，是不能合並到雪碧圖的，如果合並這些圖片會影響頁面可讀性，語義化降低且可調整的范圍小
【2】對於橫向和縱向都平鋪的圖片，也不能合並到雪碧圖中。如果是橫向平鋪，只能將所有橫向平鋪的圖合並成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪，只能將所有縱向平鋪的圖合並成一張大圖，只能水平排列，不能豎直排列
合並
雪碧圖的制作實際上就是零星小圖合並成一張大圖，但小圖合並需要遵循以下規則：
【1】圖片在合並之前必須保留空隙
1、如果是小圖標，留的空隙可適當小一些，一般20像素左右
2、如果是大圖標，要留的空隙就要大一點，因為大圖標在調整的時候，影響到的空間也會比較大
【2】圖片排列方式有橫向和縱向
【3】合並分類的原則
有三種合並分類的原則，分別是基於模塊、基於大小和基於色彩
a、把同屬一個模塊的圖片進行合並
b、把大小相近的圖片進行合並
c、把色彩相近的圖片進行合並
【4】合並推薦
在實際的雪碧圖制作中，一般采用兩種方法：一種是只本頁用到的圖片合並；另一種是有狀態的圖標合並
手工維護
【放大畫布】
圖像 -> 畫布大小<alt+ctrl+c> -> 選擇定位位置(一般為左上角)
 |
 |
 |
【減小畫布】
[注意]PNG8的顏色模式默認為索引顏色模式，在修改png8圖片時需要更改其顏色模式為RGB模式，步驟為圖像 -> 模式 -> RGB顏色
 |
 |
1、選擇 圖像 -> 裁切 選擇基於左上角像素顏色，可以實現自動裁切的效果
 |
 |
 |
 |
2、先選定要保留的區域，然后選擇 圖像 -> 裁剪或者選擇工具欄中的裁剪工具按鈕進行裁剪
 |
 |
 |
【移動圖標】
1、若圖標為獨立圖層，則用移動工具拖動即可
 |
 |
2、若圖標為非獨立圖層
a、先用選區工具選中圖標區域，再用移動工具拖動圖標，這樣可以移動該圖層
b、先用選區工具選中圖標區域，再剪切<ctrl+x>，粘貼<ctrl+v>，可以將原來的圖層分成兩個圖層，更有利於操作
 |
 |
 |
客戶端實現
在以前，我們可能需要手動實現雪碧圖，這是一件非常麻煩的且容易出錯的事情。現在有了很多方便的工具來制作雪碧圖。我經常使用是一個叫做css背景合並工具的小工具。
使用方法如下圖所示：
在線實現
https://www.toptal.com/developers/css/sprite-generator是一個在線制作雪碧圖的網站，實現非常簡單
gulp實現
gulp中有一個gulp.spritesmith插件可以用於雪碧圖的制作
首先，安裝gulp及gulp.spritesmith插件
npm install gulp gulp.spritesmith
然后在gulpfile.js中輸入如下配置代碼
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('img', function() {
return gulp.src('src/img/*')
.pipe(spritesmith({
'imgName':'sprite.png',
'cssName':'sprite.css',
'padding':5 //合並時兩張圖片的距離
}))
.pipe(gulp.dest('dist/img'));
});
運行gulp后，會在dist/img目錄下，輸出sprite.png和sprite.css這兩個文字，sprite.css文件的內容如下
.icon-emails {
background-image: url(sprite.png);
background-position: -107px 0px;
width: 46px;
height: 49px;
}
.icon-news {
background-image: url(sprite.png);
background-position: 0px -54px;
width: 46px;
height: 49px;
}
.icon-tels {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 49px;
height: 49px;
}
.icon-top {
background-image: url(sprite.png);
background-position: -54px 0px;
width: 48px;
height: 48px;
}
webpack實現
在webpack中自動生成雪碧圖，需要使用postcss-sprits插件
npm install postcss-sprites
配置非常簡單
"plugins": {
"postcss-sprites": {
spritePath: 'dist/assets/imgs/sprites/'
}
}
}