使用react-image-file-resizer缩放图片后体积增大，如何缩小文件？

问题核心 #

使用react-image-file-resizer库调整图片尺寸后，文件体积反而变大，即使将质量参数从100调低至50也无效果。

问题排查点 #

1. 格式匹配错误：直接沿用原文件后缀作为输出格式，若库对后缀识别异常，可能将JPG转为无压缩/低压缩效率格式；
2. 强制放大原图：固定设置900x900尺寸，若原图实际尺寸小于该值，图片被放大后像素总量增加，导致体积上升；
3. 质量参数无效：若输出格式为PNG这类无损压缩格式，质量参数不会生效。

解决方案 #

1. 强制指定高效压缩格式 #

不要依赖原文件后缀，明确指定JPEG或WEBP作为输出格式：

import Resizer from "react-image-file-resizer";
export const resizeFile = (file, width = 900, height = 900) =>
  new Promise(resolve => {
    // 强制设置输出格式为JPEG，可替换为'WEBP'获得更高压缩率
    const outputFormat = 'JPEG';
    Resizer.imageFileResizer(
      file,
      width,
      height,
      outputFormat,
      50,
      0,
      uri => {
        resolve(uri);
      },
      "file"
    );
  });

2. 仅缩小不放大，保持原图比例 #

先获取原图尺寸，计算合理缩放比例，避免强制放大小图：

import Resizer from "react-image-file-resizer";
export const resizeFile = (file, maxWidth = 900, maxHeight = 900) =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      let width = img.width;
      let height = img.height;

      // 仅当原图超过限制尺寸时才缩放
      if (width > maxWidth || height > maxHeight) {
        const scaleRatio = Math.min(maxWidth / width, maxHeight / height);
        width = Math.round(width * scaleRatio);
        height = Math.round(height * scaleRatio);
      }

      const outputFormat = 'JPEG';
      Resizer.imageFileResizer(
        file,
        width,
        height,
        outputFormat,
        50,
        0,
        uri => resolve(uri),
        "file"
      );
    };
    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });

3. 切换为WEBP格式 #

WEBP在相同视觉质量下体积比JPG小30%左右，适合需要压缩体积的场景：

// 仅修改输出格式即可
const outputFormat = 'WEBP';

4. 更新库版本 #

确保使用最新版react-image-file-resizer，旧版本可能存在格式处理的bug。

验证方式 #

处理后打印文件体积确认效果：

image = await resizeFile(fileUpload);
console.log('处理后体积:', (image.size / 1024).toFixed(2), 'KB');

内容的提问来源于stack exchange，提问作者Andrew Nguyen Vo