网站图片最佳格式选择：格式选择矩阵与实作建议

选对图片格式，有时比任何压缩技巧都更有效。同一张图片，存成不同格式，档案大小可能差距数倍，视觉品质却几乎看不出差异。本文带你彻底了解各种图片格式的适用场景，以及如何在 Core Web Vitals 时代做出最佳选择。

主流图片格式一览

在深入比较之前，先了解各主流格式的基本特性：

• JPEG（.jpg/.jpeg）：发布于 1992 年，至今仍是网路上最常见的照片格式。有损压缩，不支援透明度，色彩表现优秀，压缩率高。
• PNG（.png）：无损压缩，支援透明度（Alpha 通道），适合需要保留精确细节的图片。同样内容的 PNG 通常比 JPEG 大 3–5 倍。
• GIF（.gif）：最多 256 色，支援简单动画，不适合高品质静态图片。
• SVG（.svg）：向量格式，以 XML 描述图形，可无限缩放不失真，适合图示和插图。
• WebP（.webp）：Google 于 2010 年发布，同时支援有损和无损，支援透明度和动画，是现代网站的首选格式之一。
• AVIF（.avif）：基于 AV1 编解码器，2019 年正式规格化，压缩效率领先所有格式，但编码较慢。

格式选择矩阵

根据图片类型和使用场景选择格式：

• 照片（风景、人物、产品）：首选 WebP（有损），次选 JPEG。不建议 PNG（档案过大）。
• LOGO / 品牌识别：首选 SVG（向量，可缩放），若必须使用点阵图则选 PNG（需要透明背景）。
• 图示（Icon）：首选 SVG，不适合缩放的复杂图示可用 PNG，Icon Font 也是选项。
• 截图、UI 示意图：首选 PNG（无损，边缘清晰），次选 WebP 无损。
• 动画：简单动画首选 CSS 动画或 Lottie（SVG 动画），复杂动画选 WebP 动画或 MP4（影片格式），避免 GIF（品质差、档案大）。
• 插图、扁平设计：有限色彩的插图选 SVG，复杂渐层插图选 WebP 或 PNG。
• 印刷品转网页：选 JPEG 或 WebP，并根据网页显示尺寸重新取样。

格式对 Core Web Vitals 的影响

自 2021 年 Google 将 Core Web Vitals 纳入搜寻排名因素后，图片格式的选择变得更加重要。三个核心指标中，两个与图片直接相关：

LCP（Largest Contentful Paint）

LCP 测量页面最大可见内容的载入时间，目标是 2.5 秒以内。最大可见内容通常是英雄图（Hero Image）。对 LCP 的影响：

• 使用 WebP 替代 JPEG，可让英雄图缩小 25–35%，直接缩短载入时间
• 为英雄图加上 <link rel="preload">，让浏览器提前下载
• 避免在英雄图使用 CSS background-image（不会被 preload 扫描器侦测到）

CLS（Cumulative Layout Shift）

CLS 测量页面布局稳定性。图片载入前后若未预留空间，会导致页面跳动。解决方式：

• 在 <img> 标签上明确指定 width 和 height 属性
• 使用 CSS 的 aspect-ratio 属性预留图片空间

WebP 的全面推荐

WebP 已成为现代网站的最佳实践格式，原因如下：

• 相同视觉品质下，比 JPEG 小 25–34%，比 PNG 小 26%
• 同时支援有损和无损压缩，一种格式应对多种场景
• 支援 Alpha 透明通道，可完全取代 PNG
• 支援动画，可作为 GIF 的替代品（且品质更好、档案更小）
• 浏览器支援率：截至 2024 年，全球 97% 以上的浏览器支援 WebP

在 HTML 中使用 <picture> 元素提供 WebP 优先、JPEG 备用的方案：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="产品描述">
</picture>

AVIF：效率最高但需要衡量成本

AVIF 在压缩效率上全面超越 WebP，但有几个实际考量：

• 优点：同品质下比 WebP 小 20–50%，支援 HDR、10-bit 色彩
• 缺点：编码速度比 WebP 慢 10–20 倍，大量图片的网站需考虑服务器或建置时间成本
• 浏览器支援：Chrome 85+、Firefox 93+、Safari 16.4+（2023 年以后的设备已接近普及）
• 建议策略：使用 <picture> 元素提供 AVIF → WebP → JPEG 三层降级方案

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="产品描述">
</picture>

SVG：被低估的网页格式

SVG（可缩放向量图形）在网站设计中的使用仍然不够普遍，但它对许多场景都是最佳选择：

• LOGO 和品牌识别必须使用 SVG，确保在任何萤幕尺寸（包括 Retina）下都清晰
• 图示系统（Icon system）使用 SVG sprite 或 inline SVG，可轻易控制颜色和大小
• 资讯图表、图解、地图等复杂向量图形，SVG 既清晰又可互动
• SVG 可直接嵌入 HTML，免去额外 HTTP 请求
• 可通过 SVGO 工具优化 SVG 档案大小，通常可缩小 20–50%

实作建议清单

1. 网站上所有的 JPEG 照片，计划逐步替换为 WebP
2. 为英雄图和关键图片加上 AVIF 版本，使用 <picture> 三层降级
3. 所有 LOGO、图示改用 SVG 格式
4. 停止在静态图片上使用 GIF，改用 CSS 动画、WebP 动画或 MP4
5. 为所有 <img> 标签指定明确的 width 和 height，防止 CLS
6. 对非首屏图片使用 loading="lazy" 延迟载入
7. 整合图片 CDN（Cloudinary、imgix 等），自动依浏览器能力回传最佳格式

格式选择的常见误区

• 误区一：“照片一律用 PNG 才清晰”。PNG 对照片来说代价极高，且视觉上不比 WebP/JPEG 好多少。照片请用 WebP 或 JPEG。
• 误区二：“WebP 所有浏览器都不支援”。这已是过时资讯。2024 年 WebP 支援率超过 97%，大胆使用。
• 误区三：“SVG 只能用在简单图形”。SVG 支援复杂滤镜、动画和渐层，可表现相当复杂的视觉效果。
• 误区四：“格式转换只要换副档名”。真正的格式转换需要重新编码，仅改副档名不会改变实际格式。

结语

在现代网站开发中，WebP 是几乎所有场景的最佳起点，搭配 SVG 处理向量元素，以及 <picture> 元素提供的格式降级机制，你可以在不牺牲兼容性的前提下，让网站图片尽可能地轻量化。随着 AVIF 浏览器支援持续提升，未来几年内它将成为新的标准首选。

不上传的做法

如果这个档案是机密的，最安全的做法是让它根本不离开你的电脑。图片最佳化完全在浏览器里执行：档案从你的硬碟读进记忆体、在本机处理、再写回硬碟，不会送到任何服务器。

1. 开启图片最佳化。
2. 从你的电脑选择档案。它是在本机读取的，不会上传。
3. 选择压缩程度，和原图比对结果。
4. 下载结果。原始档案留在原处。

在浏览器里直接完成，档案不会离开你的电脑：图片最佳化