图像格式讲解：PNG、JPG、GIF、WebP、SVG

选对图像格式，是让页面更快更清晰最简单的办法之一。选错了，你会得到一个模糊的 logo，或一张比应有大小重五倍的照片。这里讲讲每种常见格式各自擅长什么，好让你把格式和图像对上号。

两大家族

首先，一个能解释其余一切的区分。位图（Raster） 格式（PNG、JPG、GIF、WebP）存的是一格格像素，所以放大时会模糊或出现马赛克。矢量（Vector） 格式（SVG）把形状存成数学，所以在任何尺寸都保持刀锋般清晰。照片总是位图；logo 和图标最好用矢量。

各种格式

JPG / JPEG

为 照片 而生的有损压缩。对照片内容体积出色、到处都支持，但不支持透明，过度压缩会出现可见的伪影。在 WebP 不可用时，它是照片的默认选择。

PNG

无损，带 透明。对 logo、图标、截图，以及任何有锐利边缘、文字或平涂色块的东西都完美。因为无损，存成 PNG 的照片体积会很大。

GIF

一种限于 256 色 的老格式，如今几乎只用于简单的 动画。对静态图它被 PNG 完胜；对动画，现代格式（动画 WebP 或视频）更小、质量更高。

WebP

一种样样都行的现代格式：有损或无损，带透明和动画。在相同视觉质量下，它通常生成比 JPG 或 PNG 小 25~35% 的文件，而且每个现行浏览器都支持。对今天大多数网页图像，WebP 是最好的默认。

SVG

以 XML 定义的矢量图形。对 logo、图标和插画 理想 —— 可无限缩放、简单形状极小，还能用 CSS 定制样式。不适合照片。

快速决策指南

• 照片 → WebP（或为最大兼容性用 JPG）
• logo 或图标 → SVG（若需要位图副本则 PNG）
• 带文字的截图或图形 → PNG（或 WebP）
• 需要透明 → PNG、WebP 或 SVG
• 简单动画 → 动画 WebP

选好格式后，我们的 图像压缩指南 讲了怎么把体积降下来。用 SVG 转换器 和 图像缩放器 在格式间转换，用 图像压缩器 缩小文件 —— 全在你的浏览器里。