Make Tools
2026-04-11

图片压缩：不损失质量减小文件大小

了解图片压缩的工作原理，选择正确的格式，在浏览器中直接压缩图片并实时比较质量。

图片网页性能开发工具

为什么要压缩图片？

图片占平均网页总大小的 50% 以上。现代相机拍摄的未压缩照片可能有 5-15 MB——对于需要快速加载的网站来说太大了。图片压缩在保持视觉质量的同时减小文件大小，提升页面速度、SEO 排名和用户体验。

Google 的 Core Web Vitals 直接衡量加载性能，大图片是最常见的低分原因。我们的 图片压缩器 在浏览器中直接压缩图片——无需上传，保护隐私。

有损 vs 无损压缩

有损压缩

有损压缩会永久移除部分图片数据以实现更小的文件大小。关键是选择人眼无法察觉差异的质量等级：

  • JPEG 质量 85-95：与原图几乎无差异，文件缩小 40-70%
  • JPEG 质量 60-75：近距离可察觉差异，文件缩小 70-90%
  • WebP 有损：同等质量下比 JPEG 小 25-34%

无损压缩

无损压缩在不损失任何质量的情况下减小文件大小——每个像素都被精确保留。PNG 和 WebP 无损使用这种方式。最适合截图、图表和含文字的图片。

格式     | 类型   | 最佳用途             | 典型节省
---------|--------|----------------------|----------
JPEG     | 有损   | 照片、渐变           | 60-80%
PNG      | 无损   | 截图、文字、UI       | 10-30%
WebP     | 两者   | 现代网页（全能）     | 比 JPEG 小 25-35%
AVIF     | 两者   | 前沿网页             | 比 JPEG 小 40-50%

浏览器端压缩的工作原理

现代浏览器可以使用 Canvas API 调整大小和重新编码图片。流程如下：

  1. 将图片加载到 <img> 元素或 createImageBitmap()
  2. 绘制到 <canvas> 上（可选择缩小尺寸）
  3. 使用 canvas.toBlob() 和质量参数导出
async function compressImage(file, quality = 0.8) {
  const bitmap = await createImageBitmap(file);
  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0);

  const blob = await canvas.convertToBlob({
    type: 'image/jpeg',
    quality: quality
  });

  return blob;
}

// 使用方式
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const compressed = await compressImage(file, 0.85);
  console.log(`原始: ${(file.size / 1024).toFixed(0)} KB`);
  console.log(`压缩后: ${(compressed.size / 1024).toFixed(0)} KB`);
});

选择正确的格式

网站用图

以 WebP 为主要格式，JPEG/PNG 作为备选。WebP 在质量、大小和浏览器支持方面提供最佳平衡。

<!-- 响应式图片带格式降级 -->
<picture>
  <source srcset="photo.webp" type="image/webp" />
  <source srcset="photo.jpg" type="image/jpeg" />
  <img src="photo.jpg" alt="描述" />
</picture>

社交媒体

照片用 JPEG，需要透明度的图形用 PNG。大多数平台会重新压缩上传内容，所以在它们压缩之前尽量保持高质量。

电子邮件

每张图片控制在 200 KB 以内。邮件总大小应保持在 10 MB 以下以避免投递问题。质量 80 的 JPEG 是最佳平衡点。

调整尺寸以获得最大节省

最有效的压缩技术是缩小尺寸。一张 4000×3000 的照片显示在 800×600 的区域中是浪费带宽：

原始:  4000×3000 JPEG = 4.2 MB
调整后: 800×600 JPEG  = 180 KB  (减少 95%!)
调整后: 800×600 WebP  = 95 KB   (减少 97.7%!)

我们的 图片压缩器 让你一步完成调整大小和压缩，实时显示大小对比。

构建流水线中的自动化压缩

# 使用 sharp-cli
npm install -g sharp-cli
sharp -i '*.jpg' -o dist/ --resize 1200 --quality 85

# 使用 imagemin (Node.js)
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

await imagemin(['images/*.{jpg,png}'], {
  destination: 'dist/',
  plugins: [
    imageminMozjpeg({ quality: 85 }),
    imageminPngquant({ quality: [0.6, 0.8] })
  ]
});

图片优化清单

  • 使用正确的格式：现代网站用 WebP，照片用 JPEG，需要透明度用 PNG
  • 调整到最大显示尺寸——不要在 600px 的容器中提供 4K 图片
  • 照片压缩到质量 80-85——视觉上相同，体积大幅减小
  • 使用 srcset 为不同屏幕尺寸提供响应式图片
  • 使用 loading="lazy" 懒加载屏幕外的图片
  • 设置明确的 width 和 height 属性防止布局偏移

常见问题

JPEG 的最佳质量设置是多少？

80-85 提供最佳平衡。低于 70 时伪影变得明显。高于 95 时文件大小急剧增加但视觉改善甚微。

应该用 WebP 还是 JPEG？

WebP 在相同质量下文件更小。以 WebP 为主要格式，JPEG 作为旧浏览器的备选。2026 年 WebP 的浏览器支持率超过 97%。

压缩会减小图片尺寸吗？

压缩减小文件大小，不改变尺寸。调整大小同时减小两者。最佳做法是先调整大小，再压缩。

浏览器端压缩和服务器端一样好吗？

对大多数用途来说是一样的。浏览器 Canvas 压缩使用相同的底层算法。服务端工具如 MozJPEG 或 MozPNG 优化略好，但对网页用途差异不大。

总结

图片压缩是加速网站最简单的方法之一。通过正确的格式、质量设置和尺寸，可以将图片大小减少 70-95%，且没有可见的质量损失。我们的 图片压缩器 让这一切即时完成——拖放、下载，全部在浏览器中。

试试这个工具？

打开工具 →
← 返回博客