请放弃使用JPEG、PNG、GIF格式的图片！

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

需求

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

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

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

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

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

产生

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

局限

使用

在线格式转换

程序格式转换

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 {
// 1. 获取上传的文件流
const stream = await ctx.getFileStream();

// 2. 检查是否为支持的图片格式（可选）
const allowedMimes = [ 'image/jpeg', 'image/png', 'image/gif', 'image/webp' ];
if (!allowedMimes.includes(stream.mime)) {
throw new Error('Unsupported image format');

            }

// 3. 定义路径
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);

// 4. 写入临时原始文件
const writeStream = fs.createWriteStream(tempInputPath);
await new Promise((resolve, reject) => {

                stream.pipe(writeStream);

                stream.on('end', resolve);

                stream.on('error', reject);

            });

// 5. 使用 sharp 转换为 webp
await sharp(tempInputPath)

                .webp({ quality: 80 }) // 可设置压缩质量

                .toFile(outputFilePath);

// 6. 清理临时文件

            fs.unlinkSync(tempInputPath);

// 7. 返回 WebP 图片地址
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;