图片格式
网页图片格式指南:JPEG、PNG、WebP、AVIF 与 SVG
先看内容,再选格式
照片含有复杂的颜色和纹理,适合使用 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 在您的浏览器中处理所选文件;首次加载软件仍需要网络连接。