如何在 Vue 项目中自动将图片转为 WebP 并优雅降级？

ლ茜茜提问于 2026-03-17 20:09:20 阅读 74

优化

我最近在做性能优化，想把项目里的 JPG/PNG 自动转成 WebP，但又怕老浏览器不支持。试了下用 webpack 插件生成 WebP，但不知道怎么在 Vue 模板里自动切换格式，现在只能手动写两套？

比如我现在这样写，明显不够自动化，每次换图都得改两处：

<picture>
  <source srcset="@/assets/images/banner.webp" type="image/webp" />
  <img src="@/assets/images/banner.jpg" alt="banner" />
</picture>

有没有办法在构建时自动生成 WebP，并在运行时自动选择最优格式？

我来解答赞 7 收藏

反馈

1 条解答

书生シ恩贝 Lv1

这个问题很常见，我来给你一个完整的解决方案。思路是：构建时自动生成 WebP 版本，运行时通过组件自动选择最优格式。

步骤一：安装依赖

首先需要安装图片处理插件，在项目根目录执行：

npm install imagemin-webp-webpack-plugin --save-dev

# 或者用 sharp（更稳定）

npm install sharp imagemin-webpack-plugin --save-dev

步骤二：配置 webpack 自动生成 WebP

在 vue.config.js 中添加配置：

const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');



module.exports = {

  chainWebpack: config => {

    // 图片处理规则

    config.module

      .rule('images')

      .test(/.(png|jpe?g|gif|svg)(?.*)?$/)

      .use('file-loader')

      .loader('file-loader')

      .options({

        name: 'img/[name].[hash:8].[ext]',

        esModule: false

      });



    // 添加 WebP 生成插件

    config.plugin('webp').use(ImageminWebpWebpackPlugin, [{

      config: [

        {

          test: /.(jpe?g|png)$/,

          options: {

            quality: 75  // WebP 质量，0-100

          }

        }

      ],

      overrideExtension: false  // 保留原扩展名，生成 xxx.webp

    }]);

  }

};

这样配置后，每次构建会自动在输出目录生成对应的 .webp 文件。比如 src/assets/images/banner.jpg 会变成 dist/img/banner.webp。

步骤三：创建智能图片组件

创建一个 WebpImage.vue 组件，运行时自动检测浏览器支持情况：

步骤四：在页面中使用

现在就可以很简洁地使用了：

原理说明

1. 构建时：webpack 插件会扫描所有 jpg/png 图片，用 imagemin 库压缩并转换为 WebP 格式输出到 dist 目录。文件名自动加 .webp 后缀。

2. 运行时：组件在 created 阶段通过加载一个 1x1 的 base64 WebP 图片来检测浏览器支持情况。如果加载成功（width=1, height=1），说明支持 WebP，就渲染标签；否则直接用原图。

3. 降级逻辑：浏览器会自动选择第一个支持的 source。如果支持 WebP 就用 webp 图片，不支持就跳过 source 直接用 img 标签的原图。

进阶优化

如果你的图片很多，构建速度会变慢。可以考虑只在生产环境生成 WebP，或者用 CDN 的图片处理服务（上传时自动转）。另外注意 webpack5 的 asset module 机制和 vue-cli 的图片处理有些差异，如果遇到问题可以检查 file-loader 或 url-loader 的配置是否冲突。

这样一套下来，你只需要写一次图片路径，组件会自动处理格式切换的事情。

2026-03-18 08:07