Tool-生成雪碧圖(sprite)
阿新 • • 發佈:2018-12-13
前言
網站開發時,我們會使用會多小圖示,很多小圖示的呼叫一直都是個問題。
小圖示使用方法
圖示字型(例如:阿里出品的iconfont)雪碧圖(CSS Sprite)等等...
雪碧圖(CSS雪碧)
CSS雪碧 即CSS Sprite,也有人叫它CSS精靈,是一種CSS影象合併技術,該方法是將小圖示和背景影象合併到一張圖片上,然後利用css的背景定位來顯示需要顯示的圖片部分。
雪碧圖優點
1. 減少載入網頁圖片時對伺服器的請求次數
可以合併多數背景圖片和小圖示,方便在任何位置使用,這樣不同位置的請求只需要呼叫一個圖片,從而減少對伺服器的請求次數,降低伺服器壓力,同時提高了頁面的載入速度,節約伺服器的流量
2. 提高頁面的載入速度
sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時,單張圖片的載入時間);單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
生成雪碧圖
PhotoShop(傻瓜方式)
通過PhotoShop把圖片合成一張大圖,讓後手動寫css,定位到圖示
Gulp生成雪碧圖(專案連結)
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function() { // var DEST_NAME = args[1]; var spriteData = gulp.src('src/sprite-images/*.png').pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css', imgPath: '../images/sprite.png' })); spriteData.css.pipe(gulp.dest('public/styles')); spriteData.img.pipe(gulp.dest('public/images')); });
合併前
合併後
Webpack生成雪碧圖(專案連結)
var SpritesmithPlugin = require('webpack-spritesmith'); module.exports = { plugins: [ new SpritesmithPlugin({ src: { cwd: 'src/sprite-images', glob: '*.png' }, target: { image: 'public/images/sprite.png', css: 'public/styles/sprite.css' }, apiOptions: { cssImageRef: "../images/sprite.png" } }) ] }