图片格式选择

问题

PNG、GIF、JPG 三种图片格式有什么区别？如何根据场景选择合适的格式？

解答

格式对比

特性	JPG	PNG	GIF
压缩方式	有损	无损	无损
透明度	不支持	支持	支持（仅全透明）
动画	不支持	不支持	支持
色彩	1600万色	1600万色	256色
文件大小	小	较大	小

JPG (JPEG)

有损压缩，文件体积小，适合色彩丰富的图片。

<!-- 适合：照片、背景图、Banner -->
<img src="photo.jpg" alt="风景照片">
<div style="background-image: url('banner.jpg')"></div>

优点：压缩率高，加载快
缺点：有损压缩会降低画质，不支持透明

PNG

无损压缩，支持透明通道，画质清晰。

<!-- 适合：Logo、图标、需要透明背景的图片 -->
<img src="logo.png" alt="公司Logo">
<img src="icon.png" alt="透明图标">

PNG-8：256色，文件小，类似 GIF
PNG-24：1600万色，文件较大，画质好

GIF

支持动画和透明，但只有 256 色。

<!-- 适合：简单动画、表情包 -->
<img src="loading.gif" alt="加载动画">
<img src="emoji.gif" alt="动态表情">

选择建议

function chooseFormat(image) {
  // 1. 需要动画 → GIF 或 WebP
  if (image.needAnimation) return 'gif';
  
  // 2. 需要透明 → PNG
  if (image.needTransparency) return 'png';
  
  // 3. 照片/复杂图像 → JPG
  if (image.isPhoto || image.hasComplexColors) return 'jpg';
  
  // 4. 图标/Logo/简单图形 → PNG 或 SVG
  if (image.isIcon || image.isLogo) return 'png';
  
  // 5. 默认选择
  return 'jpg';
}

现代格式补充

<!-- WebP：Google 推出，兼顾体积和质量 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="兼容写法">
</picture>

<!-- AVIF：更高压缩率，兼容性较差 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="渐进增强">
</picture>

关键点

• JPG：有损压缩，体积小，适合照片和复杂图像
• PNG：无损压缩，支持透明，适合图标、Logo
• GIF：256色限制，支持动画，适合简单动画
• 选择原则：透明用 PNG，动画用 GIF，照片用 JPG
• 现代方案：优先考虑 WebP，用 <picture> 做兼容