【性能优化篇】-图片压缩优化前端性能

前端压缩工具

1. 使用压缩图片网站

Tinypng

2. 压缩插件压缩图片

browser-image-compression 压缩PNG格式插件。PNG格式的图片特点，高保真，支持透明度处理，但是它也有明显的问题就是体积过大。不过在经过 browser-image-compression 压缩后，PNG 格式的图片体积过大的缺点会得到十分有效的改善。

• 获取上传的图片文件
• • 点击上传：点击上传使用的是 choose-to-file[38] 实现点击上传功能获取上传文件。
  • 拖拽上传：使用的是drop事件获取上传文件，同时使用dragover、dragleave事件判断拖拽进入和离开。
  • 复制上传，利用的是 paste事件[39] 监听window的粘贴事件，从而获取到上传文件。
• 使用 browser-image-compression 进行压缩
• 调用接口，上传压缩后的图片文件

async function handleImageUpload(event) {
  const imageFile = event.target.files[0];
  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
    useWebWorker: true,
  }
  try {
    const compressedFile = await imageCompression(imageFile, options);
    console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

    await uploadToServer(compressedFile); // write your own logic
  } catch (error) {
    console.log(error);
  }

}

Node.js压缩技术

安装依赖

npm i sharp

压缩逻辑实现

// index.js
const fs = require('fs');
const path = require('path');
const sharp = require('sharp');

// 设置要压缩的图片目录
const directory = './assets';

// 获取目录中的所有图片文件
fs.readdir(directory, (err, files) => {
  if (err) {
    console.error(err);
    return;
  }

  // 遍历图片文件并压缩
  files.forEach((file) => {
    const filepath = path.join(directory, file);
    if (isImageFile(file)) {
      compressImage(filepath, 80); // 压缩图片并设置质量为80
    }
  });

  console.log('图片压缩完成！');
});

// 检查文件是否为图片
function isImageFile(filename) {
  const ext = path.extname(filename).toLowerCase();
  return ['.jpg', '.jpeg', '.png'].includes(ext);
}

// 压缩图片并保存
function compressImage(filepath, quality) {
  sharp(filepath)
    .resize(null, null, {
      withoutEnlargement: true,
    })
    .toBuffer((err, buffer, info) => {
      if (err) {
        console.error(err);
        return;
      }

      sharp(buffer)
        .jpeg({ quality: quality })
        .png({ quality: quality })
        .toFile(filepath, (err) => {
          if (err) {
            console.error(err);
            return;
          }
          console.log('压缩成功:', filepath);
        });
    });
}

压缩命令执行

node index.js

压缩命令执行后，assets目录下图片会被压缩

压缩前

压缩后