网页常用图片格式

问题

网页制作中常用的图片格式有哪些？各自的特点和适用场景是什么？

解答

JPEG/JPG

有损压缩格式，文件体积小，不支持透明。

<!-- 适合照片、色彩丰富的图片 -->
<img src="photo.jpg" alt="风景照片">

特点：压缩率高，适合照片，不适合文字、线条图。

PNG

无损压缩格式，支持透明通道。

<!-- PNG-8: 256色，文件小 -->
<img src="icon.png" alt="图标">

<!-- PNG-24: 真彩色，支持半透明 -->
<img src="logo.png" alt="带透明背景的Logo">

特点：质量高，支持透明，文件较大。

GIF

支持动画和透明（仅全透明，不支持半透明），最多 256 色。

<!-- 简单动画 -->
<img src="loading.gif" alt="加载动画">

特点：支持动画，色彩有限，适合简单图形。

WebP

Google 开发的现代格式，同时支持有损和无损压缩。

<!-- 使用 picture 元素做兼容 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图片">
</picture>

特点：压缩率比 JPEG/PNG 高 25-35%，支持透明和动画。

SVG

矢量图格式，基于 XML，可无限缩放不失真。

<!-- 直接嵌入 -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#007bff"/>
</svg>

<!-- 作为图片引用 -->
<img src="icon.svg" alt="矢量图标">

特点：无限缩放，文件小，可用 CSS/JS 控制，适合图标、Logo。

AVIF

新一代图片格式，压缩效率更高。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图片">
</picture>

特点：压缩率最高，浏览器支持逐步完善。

ICO

网站图标专用格式。

<link rel="icon" href="favicon.ico">

格式选择速查

场景	推荐格式
照片	JPEG / WebP
透明背景	PNG / WebP
图标/Logo	SVG
简单动画	GIF / WebP
追求最小体积	AVIF / WebP

关键点

• JPEG 适合照片，有损压缩，不支持透明
• PNG 适合需要透明的图片，无损但体积大
• SVG 是矢量图，适合图标，可缩放不失真
• WebP 是现代格式，兼顾体积和质量，需做兼容处理
• 使用 <picture> 元素可实现格式降级兼容