JS—图片格式：1分钟掌握图片选择

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–精灵图与Base64
• 三–常见图片格式对比

二. 精灵图与Base64

2.1 定义与实现

​精灵图： 将多个小图标或图片合并成一张大图，通过 CSS background-position 定位显示特定区域。
Base64： 将图片数据编码为文本格式（Data URI），直接嵌入 HTML/CSS/JS 文件中，无需单独请求图片文件。

2.2 核心目的

• 两者均用于减少 HTTP 请求，但实现方式不同：
  • 精灵图通过合并图片减少请求次数。
  • Base64 通过内联图片数据避免额外请求。

2.3 优缺点

• 精灵图
  • 优点：适合大量小图标复用，缓存后性能更优。
  • 缺点：维护复杂（需调整坐标），大图加载初期可能延迟渲染。
• Base64
  • 优点：适合极小的图片（如 1x1 占位图），或无法外链资源的场景（如邮件模板）。
  • 缺点：数据体积膨胀约 33%，增加 HTML/CSS 文件大小，可能影响加载速度和缓存效率。

2.4 适用场景

• 精灵图：高频使用的图标组（如导航栏、按钮）。
• Base64：微小且无需复用的图片（如背景纹理小图）。

三. 常见图片格式对比

3.1 JPEG/JPG

特点： 有损压缩、不支持透明度。
​适用场景： 照片、颜色丰富的图片（如 Banner 图）。
​优化： 调整压缩比（60-80% 为常见平衡点）。

3.2 PNG

​特点： 支持透明度（PNG-8/PNG-24）、无损或带透明度的有损压缩（如 PNG-8）。
​适用场景： 需透明背景的图标、Logo、简单图形。
​注意： 文件通常比 JPEG 大，复杂图片推荐用 WebP 替代。

3.3 SVG

特点： 矢量图形、无损缩放、代码可编辑。
​适用场景： 图标、Logo、图表等需响应式缩放的图形。
​优化： 删除冗余路径数据，使用工具压缩（如 SVGO）。

3.4 WebP

特点： Google 推出的现代格式，支持有损/无损压缩、透明度，压缩率优于 JPEG/PNG。
​适用场景： 替代 JPEG/PNG 以优化体积（尤其是移动端）。
​兼容性： 主流浏览器已支持，需为旧浏览器提供兜底格式（如 picture 标签）。

格式选择建议：
​追求性能： 优先使用 ​WebP​（有损/无损按需选择）。
​矢量图形： ​SVG​（图标、Logo）。
​复杂照片： ​JPEG 或 ​有损 WebP。
​简单透明图形： ​PNG 或 ​无损 WebP。
​动画： 优先 ​WebP 动图 或 ​MP4 视频，避免 GIF。