当前位置：首页 > news >正文

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

news 2025/7/20 0:37:53

个人博客：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。