PHP小码农

Appearance

图片格式与选择 ​

Web 开发中有多种图片格式可供选择，每种格式都有其优势和适用场景。本节将全面对比 JPEG、PNG、GIF、WebP、AVIF、SVG 等主流格式的特点，帮助你在实际项目中做出正确的格式选择。

前置知识

阅读本节前，建议先了解：懒加载 loading

基础概念 ​

选择合适的图片格式是 Web 性能优化的重要环节。不同格式有不同的压缩方式、色彩支持、透明度能力和动画支持。理解各格式的特点，能在保证视觉质量的前提下最小化文件体积。

现代 Web 开发中，除了经典的 JPEG、PNG、GIF，WebP 和 AVIF 等新格式提供了更好的压缩效率。SVG 作为矢量格式，在图标和插画方面有独特优势。

语法 ​

各格式的 HTML 用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片格式</title>
</head>
<body>
  <h1>各格式的用法</h1>

  <!-- JPEG：照片类 -->
  <img src="photo.jpg" alt="风景照片" width="600" height="400">

  <!-- PNG：需要透明背景 -->
  <img src="logo.png" alt="公司 Logo" width="200" height="60">

  <!-- GIF：简单动画 -->
  <img src="animation.gif" alt="加载动画" width="32" height="32">

  <!-- WebP：更好的压缩（配合 picture 做回退） -->
  <picture>
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="风景照片" width="600" height="400">
  </picture>

  <!-- AVIF：最佳压缩率（配合 picture 做回退） -->
  <picture>
    <source type="image/avif" srcset="photo.avif">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="风景照片" width="600" height="400">
  </picture>

  <!-- SVG：矢量图标和插画 -->
  <img src="icon.svg" alt="搜索图标" width="24" height="24">
</body>
</html>

详细说明 ​

格式对比总览 ​

格式压缩类型透明度动画适用场景压缩效率
JPEG有损不支持不支持照片、复杂图像中等
PNG无损支持不支持截图、图标、透明图较低
GIF无损支持支持简单动画、像素风低
WebP有损/无损支持支持通用替代格式高
AVIF有损/无损支持支持新一代通用格式最高
SVG矢量支持支持（SMIL）图标、Logo、插画最优（简单图形）
ICO有损/无损支持不支持网站图标（favicon）低

JPEG ​

html
<!-- JPEG 最适合照片类内容 -->
<img src="landscape.jpg" alt="风景照片" width="800" height="533">

<!-- JPEG 支持渐进式编码（Progressive JPEG） -->
<!-- 渐进式 JPEG 在加载时先显示模糊版本，逐步变清晰 -->
<img src="progressive-landscape.jpg" alt="渐进式加载的风景照片" width="800" height="533">
特点说明
压缩方式有损压缩（DCT 变换）
色彩空间1600 万色+
透明度不支持
文件体积较小（照片场景）
质量可调（质量参数 1~100）
适用照片、渐变色、复杂色彩图像
不适用文字、线条、纯色区域（会有伪影）

PNG ​

html
<!-- PNG 最适合需要透明背景的图片 -->
<img src="logo-with-alpha.png" alt="透明背景 Logo" width="200" height="60">

<!-- PNG-8：类似 GIF，最多 256 色，支持索引透明 -->
<img src="icon-png8.png" alt="PNG-8 图标" width="32" height="32">

<!-- PNG-24：真彩色，支持 Alpha 通道透明 -->
<img src="screenshot-png24.png" alt="PNG-24 截图" width="800" height="600">

WebP ​

html
<!-- 有损 WebP（替代 JPEG） -->
<picture>
  <source type="image/webp" srcset="photo-lossy.webp">
  <img src="photo.jpg" alt="风景照片" width="800" height="533">
</picture>

<!-- 无损 WebP（替代 PNG） -->
<picture>
  <source type="image/webp" srcset="screenshot-lossless.webp">
  <img src="screenshot.png" alt="截图" width="800" height="600">
</picture>

<!-- WebP 动画（替代 GIF） -->
<picture>
  <source type="image/webp" srcset="animation.webp">
  <img src="animation.gif" alt="动画" width="64" height="64">
</picture>

WebP 的优势

相比 JPEG，WebP 有损压缩体积可减少 25~35%。相比 PNG，无损压缩体积可减少 26%。相比 GIF，动画体积可减少 80% 以上。几乎所有现代浏览器都支持 WebP。

AVIF ​

html
<!-- AVIF 三级回退：AVIF -> WebP -> JPEG -->
<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="风景照片" width="800" height="533">
</picture>

AVIF 支持

AVIF 基于 AV1 视频编码，压缩效率比 WebP 再提升约 20%。Chrome 85+、Firefox 93+、Safari 16.1+ 支持。编码速度较慢是当前的主要缺点。

SVG ​

html
<!-- 通过 img 标签引入 SVG -->
<img src="logo.svg" alt="Logo" width="120" height="40">

<!-- 内联 SVG（直接嵌入 SVG 代码） -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
  <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2"/>
  <line x1="12" y1="12" x2="16" y2="14" stroke="currentColor" stroke-width="2"/>
</svg>
特点说明
类型矢量图形（XML 描述）
缩放无损缩放到任意大小
文件体积简单图形极小，复杂图形可能很大
适用图标、Logo、插画、图表
不适用照片、复杂色彩图像
优势可用 CSS 样式化、可操作 DOM

实战示例 ​

为图片选择最佳格式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片格式最佳实践</title>
</head>
<body>
  <header>
    <!-- SVG：Logo 和图标（矢量，无损缩放） -->
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40"
         aria-label="网站 Logo">
      <rect width="120" height="40" rx="8" fill="#4285f4"/>
      <text x="60" y="26" text-anchor="middle" fill="white"
            font-size="18" font-weight="bold">MyBrand</text>
    </svg>
  </header>

  <main>
    <!-- JPEG/WebP/AVIF：照片（有损压缩，体积小） -->
    <picture>
      <source type="image/avif" srcset="hero.avif">
      <source type="image/webp" srcset="hero.webp">
      <img src="hero.jpg" alt="城市天际线照片"
           width="1200" height="600" loading="eager">
    </picture>

    <h2>我们的产品</h2>

    <!-- PNG/WebP：产品图需要透明背景 -->
    <picture>
      <source type="image/webp" srcset="product-transparent.webp">
      <img src="product-transparent.png" alt="产品效果图"
           width="400" height="400" loading="lazy">
    </picture>

    <h2>功能特点</h2>
    <ul>
      <!-- SVG 图标 -->
      <li>
        <svg width="20" height="20" viewBox="0 0 20 20">
          <circle cx="10" cy="10" r="8" fill="#4caf50"/>
        </svg>
        高效性能
      </li>
      <li>
        <svg width="20" height="20" viewBox="0 0 20 20">
          <circle cx="10" cy="10" r="8" fill="#2196f3"/>
        </svg>
        安全可靠
      </li>
    </ul>
  </main>
</body>
</html>

注意事项 ​

  • JPEG 不适合包含文字和线条的图片（压缩伪影明显）
  • PNG 不适合照片（文件体积过大）
  • GIF 的 256 色限制和低压缩效率使其几乎被 WebP 取代
  • AVIF 编码速度较慢，不适合实时生成场景
  • SVG 不适合照片和复杂色彩图像
  • .ico 格式仅用于 favicon，尺寸通常为 16x16、32x32、48x48
  • 多种尺寸的 favicon 应使用 <link rel="icon"> 声明

最佳实践 ​

  • 照片使用 JPEG（质量 80~85），配合 WebP/AVIF 提供
  • 需要透明背景的图片使用 PNG，配合 WebP 提供
  • 动画使用 WebP 动画或 MP4 视频（替代 GIF）
  • 图标和 Logo 使用 SVG
  • 使用 <picture> 实现 AVIF → WebP → JPEG/PNG 的格式回退
  • 使用 Squoosh、Sharp 等工具进行图片压缩和格式转换
  • 建议文件体积目标：JPEG/WebP < 200KB，Hero 图 < 500KB

下一节

继续学习：audio 音频

参考链接 ​