随着互联网的发展，图片作为最直观的内容展示方式逐渐在系统中占用越来越多的版面，但是随之而来的就是系统性能的大幅度下滑。传统的 JPEG、PNG、GIF 各有优点，也各有弊端，“大一统”的图片格式被需要，于是 WebP 诞生了。

需求

WebP 格式文件产生的原因主要是源于对 网络图像传输效率 的需求以及 现有图像格式在某些方面的局限性 。

在现代互联网网页中图片和视频占据了很大比例。为了提供更吸引人的用户体验，网站需要加载 大量的高质量图像 。

同时智能手机和平板电脑的普及推动了 移动互联网 的快速发展。在移动设备上，网络速度通常比桌面端慢，且用户的流量是有限的。

而 JPEG、PNG 和 GIF 等传统图像格式各有其优点 #技术分享，但也存在不足之处。

例如，JPEG 虽然非常适合照片，但仅支持有损压缩且不支持透明度；PNG 支持透明度但文件大小通常较大；GIF 支持动画但色彩范围有限，且文件体积相对较大。

产生

WebP 是一种由 Google 开发的图像文件格式，旨在提供更高效的图片压缩，适用于网络图像传输和展示。

1. 高压缩效率 ：WebP采用了先进的压缩算法，可以提供比JPEG更高的压缩率而不会明显损失图像质量。这意味着使用WebP格式可以在不牺牲视觉体验的情况下显著减少图片文件的大小，从而加快网页加载速度。
2. 支持透明度 ：与JPEG不同，WebP支持alpha通道（即透明度），这使得它在需要背景透明效果的应用场景中成为PNG的一个有力替代者，同时还能以更低的文件大小实现这一功能。
3. 动画支持 ：除了静态图像外，WebP还支持动画，作为一种更加有效的替代GIF的方案。相比GIF，WebP能够以更小的文件尺寸提供更高品质的动画效果和更多的色彩支持。
4. 广泛兼容性 ：虽然WebP最初由Google推出，但它逐渐获得了广泛的浏览器和其他平台的支持，包括Chrome、Firefox、Edge、Safari等主流浏览器，以及各种操作系统和图像处理软件。

局限

1. 浏览器兼容性 ：虽然大多数现代浏览器已经支持WebP格式，但仍有少数旧版浏览器可能不完全支持或根本不支持这种格式。在转换的同时也需要准备适当的回退方案（如提供JPEG或PNG版本的图像）。
2. 性能问题 ：尽管WebP通常能提供更好的压缩率和质量比，但在某些情况下，转换过程可能会增加服务器负载，尤其是在需要实时生成WebP图像的情况下。
3. 特定需求和偏好 ：一些网站可能基于设计、品牌或其他技术要求而选择特定的图像格式。例如，对于需要极高保真度的专业摄影展示，可能仍然倾向于使用TIFF或高质量JPEG格式。

使用

在线格式转换

1. SO JSON 在线格式转换 www.sojson.com/image/forma…
2. Convertio convertio.co/zh/image-co…
3. ILoveImg www.iloveimg.com/zh-cn/featu…
4. ALL TO ALL www.alltoall.net/

程序格式转换

Python：可以使用 Pillow 库（PIL 的一个分支）结合 webp 的支持来进行转换。

// 安装 pip install Pillow

from PIL import Image im = Image.open("input.png") im.save("output.webp", "WEBP")

也可以使用 Node.js 来转换。

这里使用 egg.js 作为服务端框架

前端

<template>

<div class="wrap">

<a-upload v-model:file-list="fileList" name="file" action="/api/uploadImg" :accept="['.jpeg','.png','.jpg','.gif']" @change="handleChange" >

<a-button>

上传文件 </a-button>

</a-upload>

<div class="diff-wrap">

<div class="old-img">

<img style="max-width: 400px;max-height: 500px;" :src="oldImg" alt=""/>

</div>

<div class="new-img">

<img style="max-width: 400px;max-height: 500px;" :src="newImg" alt=""/>

</div>

</div>

</div>

</template>

<script setup>

import { ref } from 'vue'; const oldImg = ref(''); const newImg = ref('');

const handleChange = info => { const file = info.file;

// 使用 FileReader 进行本地文件预览（无论上传是否成功） const reader = new FileReader(); reader.onload = () => { oldImg.value = reader.result; // 将本地文件的 Base64 赋值给 oldImg }; reader.readAsDataURL(file.originFileObj); // 读取原始文件对象

// 原有上传完成逻辑可保留用于处理服务器返回结果 if (file.status === 'done' && file.response) { console.log(file) newImg.value = file.response.url; // 如果上传成功，使用服务器返回的 URL } };

const fileList = ref([]); </script>

<style scoped>

.diff-wrap { width: 800px; margin: 20px auto; border: 1px solid #ddd; display: flex; }

.old-img { flex: 1; height: 500px; border-right: 1px solid #ddd; }

.new-img { flex: 1; height: 500px; } </style>

服务端

使用 Node.js 的图像处理库 sharp 进行格式转换，安装 sharp。

npm install sharp

示例代码

const { Service } = require('egg');
const fs = require('fs');
const path = require('path');
const sharp = require('sharp');

class HomeService extends Service { async index() { return 'hello world'; }

async uploadImg() { const { ctx } = this;

try { const stream = await ctx.getFileStream();

const allowedMimes = [ 'image/jpeg', 'image/png', 'image/gif', 'image/webp' ]; if (!allowedMimes.includes(stream.mime)) { throw new Error('Unsupported image format'); }

const tempInputPath = path.join(this.config.baseDir, 'app/public', `temp_${Date.now()}.tmp`); const outputFilename = `converted_${Date.now()}.webp`; const outputFilePath = path.join(this.config.baseDir, 'app/public', outputFilename);

const writeStream = fs.createWriteStream(tempInputPath); await new Promise((resolve, reject) => { stream.pipe(writeStream); stream.on('end', resolve); stream.on('error', reject); });

await sharp(tempInputPath) .webp({ quality: 80 }) .toFile(outputFilePath);

fs.unlinkSync(tempInputPath);

return { url: `/public/${outputFilename}`, filename: outputFilename, }; } catch (err) { ctx.logger.error('Image upload or conversion failed:', err); throw new Error('Image processing failed: ' + err.message); } } }

module.exports = HomeService;