WebP格式是什么？为什么建议你用它？

一、WebP 是什么

WebP 是 Google 在 2010 年发布的一种现代图片格式，目标是在相同画质下，比 JPG/PNG/GIF 体积更小。

WebP 的特点：

• 支持有损压缩（替代 JPG）
• 支持无损压缩（替代 PNG）
• 支持透明通道（替代 PNG 的 alpha）
• 支持动画（替代 GIF）

也就是说，WebP 一种格式就能替代 JPG、PNG、GIF 三种格式。再加上它的压缩效率普遍比传统格式高 25%-35%，WebP 已经成为现代 Web 图片的事实标准。

二、WebP vs JPG vs PNG vs GIF

我们用表格对比四种格式：

实际测试数据（同一张图片，不同格式）：

可以看到，无论哪种图片类型，WebP 的体积都比原格式小 25%-35%。

三、压缩原理简述

有损 WebP

采用 VP8 视频编码的帧内压缩技术。和 JPG 类似都是基于变换编码，但 WebP 用了更先进的预测算法和自适应量化，在相同画质下能省更多字节。

无损 WebP

使用空间预测、颜色缓存、颜色去重等技术。和 PNG 的 deflate 相比，能更好地利用图像中的空间冗余。

动画 WebP

基于 VP8 和 VP8L 编码，支持多帧组合。和 GIF 相比，WebP 动画支持真彩色（GIF 只有 256 色），压缩率也高得多。

四、浏览器兼容性

WebP 刚推出时，只有 Chrome 支持，这是阻碍它普及的最大问题。但到了 2026 年，情况已经完全不同：

综合统计，2026 年全球浏览器对 WebP 的支持率已经超过 99%。这意味着可以直接把网站图片全部换成 WebP，几乎不会有用户受影响。

五、为什么网站该用 WebP

1. 节省带宽，加快加载

假设一个电商网站每天有 100 万次页面访问，每个页面平均 2MB 图片，用 WebP 后能省 30%：

• 每天节省带宽：100 万 × 2MB × 30% = 600 GB
• 每月节省带宽：18 TB
• 用户每页加载时间减少 1-2 秒

对高流量网站，这是一笔非常可观的成本节省。

2. 提升 SEO

Google 在 2020 年把 Core Web Vitals 列为搜索排名因素，其中 LCP（最大内容绘制时间）直接受图片加载速度影响。换成 WebP 能显著改善 LCP，间接提升搜索排名。

3. 移动端体验更好

移动网络下，图片体积对加载时间影响最大。WebP 能让移动用户在弱网下也能快速看到图片，降低跳出率。

4. 替代多种格式

一张图同一份 WebP 就能满足照片、透明、动画三种需求，简化资源管理。

六、如何批量转换 WebP

命令行工具 cwebp

Google 官方提供 cwebp 命令行工具：

# 单个文件
cwebp -q 80 input.jpg -o output.webp

# 批量转换
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

参数说明：

• -q 80：质量 0-100，80 是常用的画质和体积平衡点
• -lossless：无损模式
• -m 6：压缩力度 0-6，6 最慢但压缩率最高

Node.js 脚本（sharp）

const sharp = require("sharp");

sharp("input.png")
  .webp({ quality: 80 })
  .toFile("output.webp");

构建工具集成

Webpack（image-webpack-loader）：

module.exports = {
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: [
        { loader: "file-loader" },
        {
          loader: "image-webpack-loader",
          options: { webp: { quality: 80 } }
        }
      ]
    }]
  }
};

Vite（vite-plugin-imagemin）：

import { imagetools } from "vite-imagetools";

export default {
  plugins: [imagetools({ defaultDirectives: () => ({ format: "webp" }) })]
};

在线工具

如果只是临时转几张图，在线工具最方便，下文会推荐。

七、HTML 里的优雅降级

虽然 WebP 支持率已经 99%，但为了那 1% 的老浏览器，通常用 标签做降级：

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

浏览器会优先加载 source 里的 WebP，不支持时自动 fallback 到 img 里的 JPG。

CSS 里没有原生降级机制，但可以用 JS 检测：

function supportsWebp() {
  return document.createElement("canvas")
    .toDataURL("image/webp")
    .startsWith("data:image/webp");
}

if (supportsWebp()) {
  document.documentElement.classList.add("webp");
}

.bg { background-image: url("image.jpg"); }
.webp .bg { background-image: url("image.webp"); }

八、WebP 的局限

虽然 WebP 很好，但也不是没有缺点：

随着时间推移，这些局限正在逐渐消失。

九、其他现代格式展望

除了 WebP，近几年还有几种新格式：

AVIF 是下一代最有潜力的格式，Safari 16+、Chrome 85+、Firefox 93+ 已支持。但短期内 WebP 仍是最实用的选择。

十、实践推荐

把网站图片批量转换成 WebP 是最直接的前端性能优化之一，立竿见影。日常遇到需要转换的场景，在线工具最省事：

• 图片压缩/转换工具：https://52tool.net/tools/image/compress

支持 JPG、PNG、GIF 转 WebP，可调质量参数，批量上传批量下载。压缩后体积明显减小，画质肉眼几乎无差别，是网站优化和图片瘦身时的常用工具。