网页最佳图片格式：PNG vs JPG vs WebP vs AVIF (2026)

发布于2026年3月28日 • 阅读时间12分钟

1. 为什么图片格式选择很重要

图片约占普通网页总重量的50%。根据HTTP Archive 2026年初的数据，中位数页面仅图片就加载了1.8MB。在图片密集的电商和作品集网站上，这个数字会超过4MB。选择错误的格式可能会使页面重量翻倍或三倍，而没有任何可见的质量改善。

页面速度直接影响收入。谷歌记录显示，加载时间增加100毫秒会使亚马逊损失1%的销售额。沃尔玛发现页面加载每改善1秒，转化率就会提高2%。对于使用4G连接的移动用户来说，180KB的WebP和680KB的JPEG之间的差异，每张图片大约会增加1.5秒的加载时间。

除了性能，格式选择还决定了你是否可以使用透明度、动画或渐进式加载。带有alpha透明度的PNG标志不能被JPEG替换而不丢失透明背景。动画产品演示需要GIF或WebP，而不是静态格式。了解每种格式的优势 — 以及它的不足之处 — 可以让你为网站上的每张图片做出正确的权衡。

搜索引擎将页面速度纳入排名因素。谷歌的核心网页指标，特别是最大内容绘制(LCP)，直接测量最大图片的加载速度。提供优化的格式是改善LCP并在仍在提供未优化JPEG的竞争对手中获得排名优势的最简单方法之一。

2. JPEG：通用标准

JPEG(联合图像专家组)自1992年格式标准化以来一直是网页图像的支柱。三十多年后，它仍然是互联网上使用最广泛的图片格式，根据W3Techs的数据，约占网络上所有图片的72%。

JPEG压缩的工作原理

JPEG使用基于离散余弦变换(DCT)的有损压缩算法。该过程分为三个阶段。首先，图像从RGB转换为YCbCr色彩空间，将亮度(明度)与色度(颜色)分离。人眼对亮度变化比对颜色变化更敏感，因此JPEG通过对色度通道进行下采样来利用这一点 — 通常在两个维度上将颜色分辨率减半(4:2:0子采样)。

接下来，图像被分成8x8像素块,每个块经过DCT,将空间像素数据转换为频率系数。高频细节(锐利边缘、精细纹理)由较高的系数表示。然后量化步骤将这些系数除以依赖于质量的矩阵,对结果进行四舍五入。这就是数据实际丢失的地方 — 更高的压缩意味着更激进的四舍五入,会丢弃更多高频细节。

最后,量化后的系数使用霍夫曼编码(或在较新的实现中使用算术编码)进行编码,以产生压缩的比特流。

质量设置：找到最佳平衡点

JPEG质量在0-100的范围内指定,但质量数字与文件大小之间的关系不是线性的。网页使用的实际范围是60-95:

优缺点

3. PNG：透明度和精确度

PNG(便携式网络图形)于1996年创建,作为GIF的无专利替代品,此前Unisys开始执行其LZW专利。它很快成为需要透明度或像素完美再现的图像的标准 — 标志、图标、截图、UI元素和带文字的图形。

PNG-8 vs PNG-24

PNG有两个主要变体。PNG-8使用最多256种颜色的索引调色板,类似于GIF。每个像素引用调色板条目而不是存储完整的颜色数据,从而为简单图形生成非常小的文件。纯色图标作为PNG-8可能只有2-5KB。PNG-8支持二进制透明度(完全透明或完全不透明),在某些实现中还支持基于调色板的alpha透明度。

PNG-24存储完整的24位RGB颜色(1670万种颜色)加上可选的8位alpha通道,用于平滑的透明度渐变。这使其成为需要适应任何背景颜色的标志、UI模型以及需要部分透明度(阴影、玻璃效果、抗锯齿边缘)的任何图像的首选格式。权衡是文件大小 — 带有alpha的PNG-24通常比等效的JPEG大5-10倍。

PNG压缩的工作原理

PNG使用DEFLATE压缩,与gzip和zlib背后的算法相同。在压缩之前,PNG对每行像素应用预测滤波器。滤波器根据相邻像素(左侧、上方、左上方)预测每个像素值,然后仅存储差异。对于具有大面积相似颜色的图像 — 扁平UI设计、图表、截图 — 这个预测步骤非常有效,通常在DEFLATE运行之前就将数据减少到接近零。

PNG还通过Adam7算法支持隔行扫描,该算法以七次分辨率递增的方式存储图像。这让浏览器几乎立即显示低分辨率预览,然后逐步细化。缺点是隔行扫描的PNG通常比非隔行扫描版本大5-10%。

优缺点

4. GIF：动画和简洁性

GIF(图形交换格式)可以追溯到1987年,是第一个广泛支持网页动画的格式。尽管有严重的技术限制,GIF在2026年仍然无处不在,原因只有一个:通用的、零摩擦的动画支持。每个浏览器、电子邮件客户端、消息应用程序和社交平台都可以渲染动画GIF,无需插件或特殊处理。

GIF每帧限制为256种颜色,使用LZW无损压缩,并将动画存储为具有每帧时序的完整或部分帧序列。这使得它对于摄影内容来说效率极低。480p的3秒GIF剪辑很容易达到5-10MB,而相同的剪辑作为WebP动画只需500KB-1MB。

对于静态图像,GIF已完全被PNG(压缩更好且支持更多颜色)和WebP取代。GIF唯一剩余的用例是在不支持WebP或视频的环境中的动画 — 主要是电子邮件活动和传统消息平台。对于网页使用,动画WebP或短MP4/WebM视频在各个可衡量的方面都是更好的选择:更小的文件、更多的颜色、更流畅的播放。

优缺点

5. WebP：现代标准

WebP由谷歌开发并于2010年发布,已成为2026年网页图像交付的事实标准。它支持有损和无损压缩、alpha透明度和动画 — 有效地用单一格式替代了JPEG、PNG和GIF。浏览器支持现在在全球超过97%,涵盖Chrome、Firefox、Safari(自版本14起)、Edge和Opera。

WebP如何实现更小的文件

有损WebP使用源自VP8视频编解码器的预测编码。与JPEG的固定8x8 DCT块不同,WebP使用最大64x64像素的可变块大小,并应用帧内预测 — 每个块从其邻居预测,只编码预测误差。这种自适应方法比JPEG的一刀切块更有效地处理平滑渐变和锐利边缘。

在实践中,有损WebP在相同视觉质量下产生的文件比JPEG小25-35%。谷歌自己对100万张随机选择的网页图像的研究发现平均减少30%。对于无损压缩,WebP平均比PNG小26%,使用的技术包括空间预测、颜色缓存、向后引用和霍夫曼编码。

WebP用于动画

动画WebP对每帧使用与有损WebP相同的压缩,并使用帧间预测仅编码帧之间的差异。根据谷歌的基准测试,结果是动画图像比等效的GIF小64%。2MB的动画GIF通常转换为400-700KB的动画WebP,具有更好的色深(24位vs 8位)和可选的alpha透明度。

实际考虑因素

WebP编码比JPEG稍慢(大约2-5倍),这对实时转换很重要,但对于预处理资产来说无关紧要。解码速度与JPEG相当。最大图像尺寸为16383x16383像素,涵盖几乎所有网页用例,但对于超高分辨率打印或全景图像可能有限制。

优缺点

6. AVIF：下一代压缩

AVIF(AV1图像文件格式)是网页图像格式领域的最新竞争者。基于开放媒体联盟(包括谷歌、苹果、Mozilla、微软、Netflix和亚马逊)开发的AV1视频编解码器,AVIF提供了当今最激进的压缩 — 在相同视觉质量下比JPEG小约50%,比WebP小约20%。

AVIF的工作原理

AVIF利用AV1的高级编码工具:从4x4到128x128的块大小,具有56种方向模式的帧内预测(相比WebP的10种),从亮度预测色度,以及复杂的环内滤波管道,在到达输出之前减少伪影。该格式支持10位和12位色深、HDR(PQ和HLG传输函数)和广色域(BT.2020),使其适用于正在成为手机和显示器标准的HDR显示器。

AVIF还支持有损和无损压缩、alpha透明度和动画(尽管动画AVIF支持在浏览器之间仍不一致)。它使用HEIF容器格式,与苹果的HEIC照片使用的容器相同。

编码速度权衡

AVIF的主要缺点是编码速度。在默认设置下,AVIF编码比JPEG慢10-100倍,比WebP慢5-20倍。编码单个1920x1080图像可能需要5-30秒,具体取决于质量设置和CPU。这使得实时转换对于大多数用例来说不切实际。然而,对于预处理资产(构建时转换、CDN管道),编码速度是一次性成本,可以通过永久更小的文件获得回报。

到2026年初,浏览器支持在全球达到93%,Chrome、Firefox、Opera和三星互联网提供完全支持。Safari在版本16.4(2023年)中添加了AVIF支持。剩余的差距主要是较旧的Safari版本和小众浏览器。

优缺点