图片格式

网页图片格式指南:JPEG、PNG、WebP、AVIF 与 SVG

约 4 分钟阅读简体中文版

先看内容,再选格式

照片含有复杂的颜色和纹理,适合使用 JPEG、WebP 或 AVIF。标志、图标和示意图若有矢量源文件,可使用 SVG。截图、文字及需要精确保留像素的图形适合 PNG。格式改变并不等于画质提升,转换无法恢复原文件已经丢失的细节。

有损与无损

JPEG 通常采用有损压缩,以舍弃部分细节换取较小体积。PNG 使用无损压缩并支持透明度。WebP 同时支持有损和无损模式;AVIF 也支持透明度,通常有较高压缩效率,但编码耗时和目标软件支持需要考虑。保留原始文件,避免反复压缩同一个有损文件。

透明度和动画

JPEG 没有透明通道。将透明图片导出为 JPEG 时,需要检查填充背景。GIF 适合简单动画,但调色板最多 256 色,渐变和照片可能出现色带。较长动画可考虑 MP4 或 WebM,并按播放场景提供合适的控制。

矢量和栅格的区别

SVG 描述路径及形状,放大时通常不会出现像素锯齿。把 PNG 放入 SVG 容器不会自动变成矢量。将 SVG 转换为 PNG 时应先确定输出像素尺寸,因为栅格化以后放大仍会损失清晰度。

实际选择流程

先确定显示尺寸和是否需要透明,再对候选格式导出样本。在实际显示比例下比较边缘、文字、渐变和文件大小。网页可通过 picture 提供新格式及 JPEG 或 PNG 后备版本。iPhone 的 HEIC 照片可先转换为目标系统支持的格式。

动手处理文件

保留原始文件,先用一个样本检查结果,再处理其他文件。imgpact 在您的浏览器中处理所选文件;首次加载软件仍需要网络连接。

打开相关工具

继续阅读