(奶綠茶) 網頁效能最佳化 image spritesheet

為了減少網頁 request 次數，會把多張圖片拼成一張，
有許多線上服務有提供這樣的功能，當然要用 Code 跑呀！

gulp spritesmith 套件
https://www.npmjs.com/package/gulp.spritesmith

設定好後，自動拼成一張圖片 + css ，是不是很方便。

問題來了：

如果我想要其中一張圖片，也能夠隨 div 寬度 100 縮放呢?
這時就需要手動的新增 css template 讓 gulp.spritesmith 使用
再加一點點的數學。

live demo：
https://milkmidi.github.io/gulp_spritesmith_example/

gulp.spritesmith template 是使用 handlebar 格式
所以我們可以自定任意的函數

gulp.js 針對 handlebar 寫一個函式cssHandlebarsHelpers: {
  bgPosition(spriteSize, imgSize, offset) {
  const result = (offset / (imgSize - spriteSize)) * 100;
  if (Number.isNaN(result)) {
    return '0';
  }
  return `${result}%`;
}

就完成啦。

github：
https://github.com/milkmidi/gulp_spritesmith_example

 

原文 https://medium.com/@milkmidi/網頁效能最佳化-image-spritesheet-5cefb1ebf8c5