网页常用图片格式

问题

网页制作会用到哪些图片格式？各自有什么特点和适用场景？

解答

JPEG/JPG

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

<!-- 适合：照片、背景图 -->
<img src="photo.jpg" alt="风景照片">

• 不支持透明
• 压缩率高，但会损失画质
• 适合照片、渐变色图片

PNG

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

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

• PNG-8：256 色，文件小
• PNG-24：真彩色，文件较大
• 支持 Alpha 透明
• 适合图标、Logo、需要透明的图片

GIF

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

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

• 最多 256 色
• 支持简单动画
• 只支持全透明，不支持半透明
• 适合简单动画、色彩简单的图标

WebP

Google 开发的现代格式，压缩率优于 JPEG 和 PNG。

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

• 同时支持有损和无损压缩
• 支持透明和动画
• 比 JPEG 小 25-35%
• 需要考虑浏览器兼容性

SVG

矢量图格式，基于 XML 描述。

<!-- 内联 SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#3498db"/>
</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>

• 比 WebP 压缩率更高
• 支持 HDR
• 浏览器支持逐渐完善

ICO

网站图标专用格式。

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

关键点

• JPEG 适合照片，体积小但有损压缩
• PNG 适合需要透明的图片，无损但体积较大
• SVG 适合图标和简单图形，矢量可缩放
• WebP/AVIF 是现代格式，压缩率高但需注意兼容性
• 实际项目中常用 <picture> 元素做格式降级兼容