网页常用图片格式
前端开发中常见图片格式的特点和使用场景
问题
网页制作中常用的图片格式有哪些？各自的特点和适用场景是什么？
解答
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>元素可实现格式降级兼容
目录