css雪碧图制作

什么是CSS雪碧图

CSS雪碧图（CSS Sprite）是一种将多个小图标或背景图片合并到一张大图中的技术。通过减少HTTP请求次数，可以显著提升网页加载性能。使用时通过background-position定位显示特定部分。

工具准备

• 图片编辑软件：Photoshop、GIMP或在线工具如SpriteCow
• 自动化工具：Webpack、Gulp配合postcss-sprites等插件
• 在线生成器：Spritegen、Toptal Sprite Generator

手动制作步骤

收集需要合并的小图标，确保风格和尺寸统一。使用图片编辑软件将所有图标排列到一张透明背景的PNG画布上，图标之间保留适当间距防止重叠。

导出合并后的雪碧图，记录每个小图标的坐标位置和尺寸。例如：

.icon-home {
  width: 32px;
  height: 32px;
  background: url(sprites.png) -10px -50px no-repeat;
}

自动化生成方案

使用Webpack配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-sprites')({
                  spritePath: './dist/images/'
                })]
              }
            }
          }
        ]
      }
    ]
  }
}

最佳实践

图标按功能或颜色分组创建多个雪碧图，避免单文件过大。横向排列图标比纵向排列通常性能更好。为Retina屏幕准备2倍尺寸雪碧图，通过background-size缩放显示。

注意事项

雪碧图不适合频繁更新的图片内容，每次修改都需要重新生成。动态内容或大图建议单独加载。使用will-change: transform可提升动画性能。