网页可用的图片格式比以往任何时候都多，这是好事——每一种都为不同任务而生，选对了能让页面在用户毫无察觉的情况下轻 5–10 倍。本文是 2026 年值得一记的七大格式速查：JPG、PNG、WebP、AVIF、SVG、GIF、HEIC。
JPG / JPEG —— 照片默认格式
1992 年发布，至今仍是照片的通用格式。有损压缩、24 位色、不支持透明度。浏览器兼容 100%。处理连续色调（照片、渐变）依然出色，但 WebP 和 AVIF 在同等画质下文件已更小。
用：需要最大兼容性、邮件发送、相机直出。不用：Logo、截图、有锐边或需要透明的图。
延伸阅读：JPG 和 PNG 到底怎么选？
PNG —— 无损与透明
1996 年问世，用来取代 GIF。无损压缩，支持 Alpha 透明，图形最优。代价是体积：同一张照片，PNG 通常比 JPG 大 5–10 倍。
用：需要透明、Logo、图标、截图、清晰图形。不用：生产环境的照片——先用 PNG 转 WebP 工具压一遍。
WebP —— 现代默认格式
由 Google 出品，2010 年起稳定。2026 年最该作为大多数网页图片"统一答案"的格式。同时支持有损/无损、Alpha 透明和动画。同等画质下通常比 PNG 小 25–35%、比 JPG 小 25%。浏览器兼容超 97%。
用：网页发布。不用：邮件附件（部分客户端处理不佳）、归档母版。
延伸阅读：PNG vs WebP：为什么 WebP 是网页图片的未来
AVIF —— 带宽冠军
基于 AV1 视频编解码，是现代格式里最小的。同等画质下通常再小 20–30%，支持 HDR、广色域、透明、动画。2025 年后浏览器兼容 95% 以上。代价是编码慢，部分编辑工具尚未完全支持。
用：带宽敏感场景（移动优先、图片量大的站）。在 <picture> 中先 AVIF、再 WebP、最后 JPG/PNG。不用：内部尚未支持 AVIF 的工作流。
SVG —— 矢量、无限分辨率
SVG 本质完全不同：它是描述形状的 XML，不是像素网格。Logo、图标、图表、插画在任何缩放下都不糊。写得好时体积极小，可以用 CSS 美化、用 JS 动画。
用：Logo、图标、信息图、扁平插画。发布前一定过一下 SVG 优化器。不用：照片（它处理的是矢量，不是像素）。
GIF —— 古早动图
1987 年问世。支持动画，但天生低效：256 色、文件大、没有真正的音频。2026 年大多数动图应换成 MP4 视频、动画 WebP 或动画 AVIF。
用：对方平台（如某些聊天软件）只能接收 GIF。不用：你能控制的现代网站上几乎所有场景。
延伸阅读：GIF vs MP4：用哪个？
HEIC / HEIF —— iPhone 格式
iOS 11 起 iPhone 默认拍照格式。同等质量下大约只占 JPG 一半空间，支持 HDR 和实况照片。代价是浏览器支持有限、桌面工具链不齐全。
用：iPhone 拍摄并存于 iCloud。不用：直接用于网页发布。先用 HEIC 转 JPG 工具转一下。
常见用例对照
- 落地页首屏大图 →
<picture>内 AVIF + WebP + JPG 兜底 - 页头品牌 Logo → SVG（必要时 PNG 兜底）
- 文档页 UI 截图 → 无损 WebP（或 PNG 求最大兼容）
- 电商列表商品图 → AVIF + WebP，懒加载
- 动画教程演示 → MP4（autoplay/muted/loop），永远不要 GIF
- 邮件签名 → JPG（通用兼容）或 PNG（需要透明）
- 摄影师归档母版 → 原始 RAW + JPG 副本；只有图形工作才保留 PNG。
现代 picture 元素写法
<picture> 是你的好帮手。让现代浏览器拿到现代格式，老浏览器自然降级：
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/24picture/photo.jpg" alt="..." width="1600" height="1067" loading="lazy" decoding="async">
</picture>浏览器自上而下挑选第一个支持的格式，结尾的 <img> 是终极兜底。
速查决策表
- 网页照片 → AVIF（兜底 WebP/JPG）
- 归档照片 → 高质量 JPG
- Logo / 图标 / 插画 → SVG
- UI 截图 → 无损 WebP 或 PNG
- 网页透明图 → WebP
- 动画 → MP4（或动画 WebP）
- iPhone 拍摄 → HEIC，发布到网页前转 WebP/JPG
会真的用到的工具
- JPG 转 PNG——加透明度
- PNG 转 WebP——上线图形
- HEIC 转 JPG——iPhone 照片
- 图片压缩——任意格式瘦身
- SVG 优化——Logo 和图标
- 批量转换——一键处理整文件夹
小贴士：每种素材类型选定一种生产格式。照片 → AVIF/WebP；图形 → SVG 或无损 WebP；动画 → MP4。其他都是兜底或例外。
结论
图片格式不是宗教信仰，而是工具箱。JPG 和 PNG 承载过去，WebP 和 AVIF 撑起现在，SVG 包揽几何图形，GIF 基本是历史遗产。每张图选对工具，页面就快、画面就锐、流量账单就稳。
