JPG、PNG、WebP：哪种图片格式最适合网页

为网页选对图片格式会影响加载速度、画质和兼容性。最常用的三种格式是 JPG、PNG 和 WebP，各有优缺点。本指南说明何时使用 JPG、PNG 和 WebP，各自的优缺点、简要对比表、如何用 FileFlip 在格式间转换，以及一个简单的选择指南。

JPG — 何时使用

是什么 — JPG（JPEG）是有损格式：通过丢弃部分细节来减小体积，多年来一直是网页和相机上照片的标准格式。

优点 — 浏览器、邮件和设备普遍支持。照片在较好画质下文件较小。无透明通道，结构简单。易于生成和分享。

缺点 — 不支持透明。有损压缩在低质量或多次编辑后可能出现可见块状或色带。不适合需要锐利边缘或文字的图形。

何时使用 — 照片、写实类图片、背景，以及任何不需要透明的场景。当兼容老系统或邮件最重要时选 JPG。

PNG — 何时使用

是什么 — PNG 为无损格式：每个像素都保留。支持透明（Alpha 通道）。

优点 — 无损画质；多次保存不会产生代际损失。完整透明支持。适合图形、Logo、截图和需要锐利边缘与文字的 UI 元素。

缺点 — 用于照片时文件往往比 JPG 或 WebP 大很多。不支持动画。若用于大尺寸照片类图片会拖慢页面。

何时使用 — Logo、图标、截图、带文字的图形，以及任何需要透明或像素级精确的场景。若重视页面速度，避免用 PNG 做大幅照片。

WebP — 现代标准

是什么 — WebP 是 Google 推出的格式，支持有损/无损压缩、透明和动画，目标是在相近画质下比 JPG/PNG 更小。

优点 — 在相近画质下通常比 JPG 小约 25–35%；对照片往往比 PNG 小很多。支持透明和动画。所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持。

缺点 — 很旧的浏览器（如老版 IE）不支持；要最大兼容可提供 JPG 或 PNG 回退。部分老邮件客户端或工具不支持 WebP。

何时使用 — 在能提供 WebP 的网站或应用中用于照片和一般图片（如通过 <picture> 或内容协商）。当受众使用现代浏览器时，可将 WebP 作为网页主格式。

对比表

| | JPG | PNG | WebP | |----------------|-----------|------------|----------------| | 压缩 | 有损 | 无损 | 有损或无损 | | 透明 | 否 | 是 | 是 | | 典型用途 | 照片 | 图形、Logo、截图 | 照片、网页图 | | 体积（照片） | 小 | 大 | 比 JPG/PNG 更小 | | 浏览器支持 | 通用 | 通用 | 仅现代（旧版需回退） | | 动画 | 否 | 否 | 是 |

仅供参考；实际体积取决于内容和设置。

如何用 FileFlip 在格式间转换

您可以在浏览器中不安装软件即可在格式间转换。FileFlip 在浏览器中运行，可在本地处理文件。

转为 WebP — 使用图片转 WebP 或 JPG 转 WebP 得到更小、适合网页的文件。
PNG 转 JPG — 使用 PNG 转 JPG 在不需要透明时减小体积。
进一步缩小 — 使用压缩图片在不改格式的前提下缩小，或与转换结合（如 PNG → WebP）达到最大节省。

无需账号。工具支持桌面和手机浏览器。

该选哪种格式？（选择指南）

是否需要透明（透明或半透明区域）？
→ 是：用 PNG 或 WebP。在浏览器支持时优先用 WebP 做网页。
→ 否：继续。
是否为照片或类照片（背景、横幅）？
→ 网页上优先 WebP。需要最大兼容（邮件、老系统）时用 JPG。
→ 若是图形、Logo 或截图：用 PNG 或 WebP。若希望更小且环境支持，优先 WebP。
受众是否使用很旧的浏览器或仅邮件？
→ 用 JPG（需要透明时用 PNG）以保证最大兼容。

简而言之：能在现代网页用 WebP 就用 WebP；JPG 用于兼容性和邮件中的照片；PNG 在需要无损或透明且无法用 WebP 时使用。

常见问题

WebP 是否到处都支持？
当前版本的 Chrome、Firefox、Safari、Edge 都支持 WebP。很旧的浏览器不支持，可为它们提供 JPG 或 PNG 回退（如用 <picture>）。

邮件里能用 WebP 吗？
支持情况不一。很多现代客户端支持；部分企业或老旧客户端不支持。重要邮件建议用 JPG 或 PNG。

转成 WebP 会损失画质吗？
有损 WebP 类似 JPG：您选择质量档位。在相近质量下 WebP 通常更小。无损 WebP 与 PNG 一样保持画质。

若 CMS 或工具不支持 WebP？ — 可先转为 JPG 或 PNG 上传，或使用在发布时生成 WebP 的插件。仍可用 FileFlip 准备 WebP 资源并在支持 WebP 的地方使用。

为网页优化图片：使用图片转 WebP 或 JPG 转 WebP 转换，在不需要透明时用 PNG 转 JPG，并用压缩图片进一步缩小体积。