Vite中实现图片无损压缩与格式转换，关键在于选用支持无损模式的插件（如vite-plugin-image-optimizer），并显式配置png.lossless: true、webp.lossless: true及SVGO自动无损精简，而JPEG XL和AVIF当前暂未开放用户可控的无损转码选项。
在 TypeScript 项目中用 Vite 实现图片无损压缩与格式转换，关键不是盲目追求“无损”，而是根据场景选择真正支持无损的工具链和参数——因为多数现代压缩插件默认是有损的，而真正的无损压缩（如 PNG 的 OptiPNG、SVG 的 SVGO）需要显式启用或搭配特定配置。
选对插件：优先用纯 JS 实现、支持无损选项的方案
vite-plugin-image-optimizer 是目前最稳妥的选择。它基于 @squoosh/lib，纯 JavaScript 实现，Windows/macOS/Linux 全平台开箱即用，且明确支持无损模式：
-
PNG：默认使用
oxipng引擎，开启lossless: true即可无损压缩（不降质、只优化编码） -
WebP：设置
lossless: true（注意：此时quality参数会被忽略） - AVIF：暂不支持无损，建议仅用于有损高压缩场景
- SVG：自动调用 SVGO，默认即为无损精简（移除注释、空白、冗余属性等，不改变渲染效果）
vite.config.ts 配置示例（TypeScript 环境）
以下配置启用 PNG/WebP 无损压缩 + SVG 自动优化，并保留原始文件用于开发比对：
import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
export default defineConfig({
plugins: [
ViteImageOptimizer({
png: {
lossless: true, // ✅ 无损压缩
compressionLevel: 9 // oxipng 级别（0–9），越高越慢但体积略小
},
webp: {
lossless: true, // ✅ WebP 无损模式
},
svg: {
plugins: [ // 可选：自定义 SVGO 插件（如保留 viewBox、移除 title）
{ name: 'removeTitle', active: true },
{ name: 'removeViewBox', active: false }
]
},
include: /\.(png|jpe?g|gif|svg|webp)$/i,
exclude: /node_modules|public\//,
// 开发环境也处理（便于实时预览效果）
disable: false
})
]
});
补充说明：JPEG XL 和 AVIF 的“无损”现实
虽然 JPEG XL 官方支持无损压缩，但截至 Vite 6.3（2026 年中），其构建时的 无损转码尚未暴露为用户可配选项；AVIF 在 vite-plugin-image-optimizer 中仍以有损为主。因此当前阶段，若强依赖无损输出，应聚焦于 PNG 和 WebP 的 lossless: true 路径，并把 SVG 当作天然无损矢量方案来用。
验证是否真无损：两个简单办法
- 对比像素：用
pixelmatch工具比对原图与输出图的像素数据，差异应为 0 - 查看元信息：用
file img.png或在线工具检查，无损 PNG 应显示color type=6 (RGBA)且无色度抽样；无损 WebP 应含VP8L标识而非VP8
