Why is 80% quality considered the magic number?

Across a lot of before-and-after testing at real viewing size, JPEG or WebP quality around 80% is where the file has shrunk 60–70% from maximum but the artifacts are still invisible without pixel-peeping. Go higher and you pay a lot of bytes for detail no one sees; go much lower and gradients start to band. It's the best balance for web use, which is why it's the default I reach for.

What is the best image format for websites in 2026?

WebP is the best default — roughly 25–35% smaller than JPEG with effectively universal browser support. For maximum savings, use AVIF (about 50% smaller than JPEG) served with a WebP fallback in a element. Convert with the Format Converter. Keep genuine vector art like logos as SVG rather than compressing them as raster.

What is the difference between lossy and lossless compression?

Lossless compression rearranges data more efficiently without discarding any of it, so the result is pixel-for-pixel identical to the original — PNG works this way. Lossy compression permanently removes data your eye is unlikely to notice, achieving far higher savings — JPEG works this way. Lossless typically yields 10–40% reduction; lossy commonly yields 60–90%. Use lossless for text and graphics, lossy for photographs.

Should I resize an image before or after compressing?

Always resize first. Compressing a large image and then shrinking it wastes compression effort on pixels that the resize discards, leaving a file that's both bigger and lower quality than it should be. Resize to the display dimensions first, then compress the smaller image — that order produces the smallest, cleanest result.

Is it safe to compress images with an online tool?

Most online compressors upload your images to their servers to process them, which is a concern for personal photos or client work. The Image Compress tool on toolz.dev runs entirely in your browser using the canvas API, so your images never leave your device — safe for anything private or proprietary.

Why is compressing the same image twice a bad idea?

Lossy compression discards detail, and doing it twice discards it twice — the second pass adds fresh artifacts on top of the first pass's, and none of it comes back. This is why you should always keep the original and generate every compressed version from it, rather than compressing a file that was already compressed once.

How do I know if my images are too large?

Run Google Lighthouse or PageSpeed Insights against your page; both flag oversized images and suggest better sizes. A quick rule of thumb: if any single image is over 200 KB, it's worth optimizing, and hero images especially should sit well under that since they drive Largest Contentful Paint. Feed the offenders through the resize-convert-compress workflow and re-audit.

How do I compress an image to a specific file size like 200 KB or 1 MB?

Resize to the display dimensions first, then step the quality down until you clear the target: start at 80%, and if you're still over, try 70%, then 60%. The Image Compress tool shows the output size as you move the slider, so you can watch it cross the threshold rather than guessing and re-exporting. Switching the format to WebP usually buys you another 25–35% at the same quality setting, which is often enough on its own.

Does compressing an image reduce its resolution or dimensions?

No — compression and resizing are separate operations. Compressing a 3000×2000 photo leaves it 3000×2000; it just stores those pixels using fewer bytes, at the cost of some fine detail. If you want fewer pixels, that's a resize, and it's the change that usually saves the most weight. Doing both, in that order, is what turns a 6 MB camera file into a 90 KB web image.

图像压缩指南:减少文件大小而不损失质量

React代码中出现渲染bug,我曾经花了一个下午的时间说服了一个客户端's站点速度很慢,对组件进行了分析,记忆了东西,追逐了重新渲染,实际问题是一个背景英雄图像:一个3.1 MB的JPEG以100%的质量保存,而80%质量的完全相同的图像将是480 KB,看起来是一样的我对应用程序进行了过度设计,对资产的思考不足。那's是一种非常开发人员浪费一天的方式。

从那时起,图像压缩一直是我检查的第一件事,而不是最后的事情。它's也是最容易被误解的 - "压缩而不损失质量"被当作一个悖论对待,而真正它's只是知道哪个杠杆丢弃数据,哪个不丢弃数据的问题't。本指南是我使用的心理模型,是在运输工具z。dev和调优时构建的核心网络活力在客户端网站上:压缩的实际工作原理、何时使用有损与无损,以及为什么一个特定的质量数字不断获胜。

TL;博士: 用图片压缩 80%左右的网络照片质量- 那's文件缩小60%的甜蜜点80%你仍然可以't在正常大小下将其与原始的区别压缩 从原来的 (永远不要重新压缩一个JPEG), 而且总是调整大小 to 压缩前显示尺寸。为了最大限度地节省, 转换照片到网络P 首先。一切都在浏览器中运行 - 没有上传任何内容。

What's 实际上发生在你压缩图像时?

数字图像是像素网格,每个像素网格存储颜色。that's为什么原始图像是巨大的。24位颜色下的1920×1080图像是:

1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB

1张图片近6兆字节,其中有10张的页面在一行文本加载之前将有60 MB的下载量,压缩的存在是为了使它能够生存,它以两种根本不同的方式之一。

无损压缩 data中找到模式,编码更紧凑,不丢弃任何东西,解压缩后的图像与原始图像的像素对像素相同,技术优雅:游程编码崩溃"红色,红色,红色,红色,红色"进入"5×red";字典编码(png's核心的deflate算法)用短代码替换重复出现的模式;预测过滤将每个像素存储为它与预测值的差异,因此平滑的梯度变成长游程的微小数字,这些微小数字可以美观地压缩png,无损webp和无损avif都以这种方式工作。

有损压缩 通过丢弃您的视觉系统不太可能注意到的数据来实现更大的节省 - 而且它'比"删除一些像素更聪明。"它将图像从 RGB 转换为亮度加颜色模型(您的眼睛对亮度远比对颜色更敏感),然后降低颜色通道的分辨率,同时保持亮度清晰。它将图像分块,将每个图像转换为频率系数,并将高频图像(微妙的纹理和噪声)四舍五入到更少的值。那个四舍五入步骤,量化,是数据实际丢失的地方。 JPEG、有损 WebP 和有损 AVIF 都遵循此弧线。

实用结果:无损适用于每个像素都有意义的图像 - 徽标、屏幕截图、图表、任何文本清晰的东西。有损适用于照片和自然图像,其中 "看起来相同" 重要程度远远超过 " 是位对位相同。"

Side-by-side comparison of JPEG quality levels at 100%, 85%, 70%, and 50% with file sizes

质量设置实际上意味着什么?

"质量80%"是一个数字的人设置,不知道它买了什么在这里's我用于JPEG和有损WebP的地图,基于在真实观看大小下的大量前后比较。

100%(最大值): 几乎从来都不是正确的选择,文件经常是3×5×大于80%,没有明显的改善,那个浪费下午的英雄形象保存在这里。

85.95%(高): 对于真正重要的微妙细节的摄影作品集和图像来说,90% 的情况下,即使在 100% 缩放的情况下,大多数观众也看不到文物。

75.85%(网络甜点): 60比最大值小70%,在正常观看尺寸下,人工制品是不可见的,这是几乎所有网页图像所属的地方。

50.75%(具有攻击性): 对于尺寸至关重要的缩略图和预览。如果仔细观察,文物就会开始以光滑的渐变和精细的纹理显示。

50%以下的: 可见的块度和色带。保留它以用于真正的低优先级图像或硬尺寸限制。

PNG没有't有一个"质量"滑块,因为它's无损 - 你优化它不同压缩级别(0 9)交易编码时间为较小的文件,与6个明智的默认图像使用很少的颜色时减少颜色深度有很大帮助:16色标志从24位下降到8位以零可见变化急剧缩小。并剥离元数据 - EXIF,颜色配置文件,时间戳 - 修剪从未影响图片的字节。

WebP是我的默认Web:在质量80下,它运行比同等质量的JPEG小25.35%,并且它还做了一个无损模式,比PNG大约四分之一。AVIF压缩更难 - 通常比JPEG小50%+ - 但编码更慢,并且是't相当普遍支持,所以我用WebP后备而不是单独服务。

您应该压缩哪种格式?

挑格式是压缩战的一半,决策比选项让它看起来更简单这里's的对比I'd手一个新队友:

格式	类型	与。 JPEG 大小	透明度	最好的
JPEG	有损	基线	否	电子邮件中的照片,通用后备
巴布亚新几内亚	无损	照片要大得多	是的	屏幕截图、徽标、文本、图表
网络P	两者	25.35% 较小	是的	Web照片和图形的默认值
阿维夫	两者	小约 50%	是的	最大节省,带有 WebP 后备功能

最常见的格式错误 - I've 在代码审查中发现它的次数比我能数到的次数还要多 - 将照片保存为 PNG。因为 PNG 是无损的,所以保存为 PNG 的照片可以比同一张照片大许多倍,就像 85% 质量的 JPEG 一样,没有明显的差异。 PNG 适用于具有硬边和文本的图形,而不是自然图像。使用 JPEG 或 WebP 进行照片,您可以在一次更改中收回大部分臃肿的页面's 权重。

转换是一项两键作业格式转换器。我实际发货的模式让浏览器协商:

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

那个 srcset hands浏览器几种尺寸,让它下载适合设备的,所以手机永远不会拉桌面图片,结合正确的格式,it's快站和慢站的区别。

What's 压缩网页映像的正确顺序?

Order比任何个别设定都重要,而搞错是大多数"我压缩了它's背后安静的错误还是巨大的"抱怨的顺序,每次:

首先调整大小。 800×600时会显示的4000×3000图像进行压缩,这就浪费了对即将被丢弃的像素的精力,结果仍然远远大于必要。调整大小到显示尺寸(视网膜为双倍) 之前触摸压缩机。这一次重新排序比任何质量调整修复了更多的超大图像问题。

转换第二。 使用以下方式将照片移至 WebP(或带后备功能的 AVIF) 格式转换器。you're现在压缩更小,格式更好的图像。

压缩第三。 跑图片压缩 80%左右的有损网络图像,然后判断结果 在实际观看尺寸- 不缩放到 400%,因为没有人以这种方式查看网页。

为了使这一点具体化,这里'我在一个真实的页面上运行的网络优化通行证:与 Lighthouse 进行审核以查找重图像,将每个图像调整为其显示大小,转换为 WebP,压缩为 75.80%,然后重新运行 Lighthouse 以确认。典型的结果是图像总重量 50.80% 折扣,以及最大内容涂料的可测量跳跃 - 这是最初让我沿着这条整个路径前进的指标。

为了更广泛地了解尺寸大小、格式选择以及背景去除以及压缩, 图像工具指南涵盖完整的工具包。

哪些压缩错误成本最高?

少数错误占了大多数浪费字节和最明显的质量损坏。I've 做了每一个这些。

重新压缩已压缩的 JPEG。 1轮有损压缩,在旧的上面堆叠新的神器,伤害累积永久,永远压缩 自原始来源并且保留这些原件 - 从它们生成每个压缩版本,而不是从之前的压缩副本生成。

使用 PNG 进行照片。 上面覆盖了,但它's是您发现它时最大的单场胜利:一张 5 MB PNG 照片变成一张 500 KB JPEG,没有明显的差异。

过度压缩。 JPEG 降至 30%,使微小的文件具有可见的块性和带状。保持在 75.85% 的网络和测试在真实大小找到你的地板。

跳过调整大小步骤。 如上所述,在调整大小之前进行压缩会生成比应有文件更大且质量更低的文件。

忽略现代格式。 WebP可用时为JPEG提供服务,无缘无故地将25-35%的潜在节省留在桌面上。

如果你想客观地检查你的工作,感知指标是存在的--0.95以上的SSIM通常是"视觉上无损的,"和谷歌's Butteraugli得分低于1.0平均差异本质上是看不见的--但说实话,对于日常工作,以实际大小并排查看原始版本和压缩版本几乎告诉你数学会的一切。

常见问题

如何在不损失质量的情况下压缩图像?

对于真正的、像素完美的无损压缩,请使用 PNG 或无损 WebP。对于"视觉上无损" - 你看不到任何区别 - 使用 JPEG 或 WebP,质量为 80%90%。图片压缩该工具可让您在下载之前设置质量并将原版与压缩版本进行比较,以便您可以找到尺寸下降但图像看起来仍未受影响的确切点。

80%的质量为什么算神奇数字?

JPEG或WebP质量在实际观看尺寸下进行大量前后测试时,大约80%左右是文件从最大值缩小了60 70%但工件仍然不可见,而无需像素窥视。去更高,你为没有人看到的细节支付了很多字节;去低得多,梯度开始带。它's用于Web的最佳平衡,这就是为什么它's是我达到的默认值。

2026网站图片格式最好?

WebP 是最好的默认值 - 比 JPEG 小大约 25.35%,并具有有效的通用浏览器支持。为了最大程度地节省开支,请使用在 a 中使用 WebP 后备的 AVIF(比 JPEG 小约 50%) <picture> 元素。与转换格式转换器。将真正的矢量艺术(如徽标)保留为 SVG,而不是将它们压缩为光栅。

有损压缩和无损压缩有什么区别?

Lossless压缩更有效地重新排列数据,而不会丢弃任何数据,因此结果是像素对像素与原始相同 - PNG是这样工作的,Lossy压缩永久删除您眼睛不太可能注意到的数据,实现了远更高的节省 - JPEG是这样工作的,Lossless通常可减少10 * 40%;lossy通常可减少60 * 90%。对于文本和图形使用无损,对于照片使用有损。

我应该在压缩之前或之后调整图像大小吗?

Always resize first。compressing a large image and then shrinking it was wass压缩工作量在大小丢弃的像素上,留下一个文件,该文件's既比它应该更大,质量也比它应该更低。先调整显示尺寸大小,然后压缩较小的图像- 那个顺序产生最小,最干净的结果。

使用在线工具压缩图像安全吗?

大多数在线压缩机将您的图像上传到其服务器进行处理,这是个人照片或客户端工作的一个问题。图片压缩 toolz。dev 上的工具使用画布 API 完全在浏览器中运行,因此您的图像永远不会离开您的设备 - 对于任何私有或专有的内容都是安全的。

为什么将同一图像压缩两次是个坏主意?

Lossy压缩丢弃细节,做两次丢弃两次- 第二遍在第一遍之上添加新鲜的伪影's,而且没有一个回来,这就是为什么你应该始终保留原件并从中生成每个压缩版本,而不是压缩已经压缩一次的文件。

我如何知道我的图像是否太大?

Google Lighthouse 或 PageSpeed Insights 运行到您的页面;既可以标记超大图像,也可以建议更好的大小快速经验法则:如果任何单个图像超过 200 KB,则值得优化它's,英雄图像尤其应该坐在该下方,因为它们驱动最大的内容绘画通过调整大小-转换-压缩工作流程和重新审核来喂养违规者。

如何将图像压缩到 200 KB 或 1 MB 等特定文件大小?

先调整显示尺寸大小,然后降低质量,直到您清除目标:从 80% 开始,如果您'仍然结束,请尝试 70%,然后是 60%。图片压缩 tool在移动滑块时显示输出大小,所以可以观看它越过阈值而不是猜测和重新导出,将格式切换到webp通常会在相同的质量设置下再购买25.35%,这通常本身就足够了。

压缩图像会降低其分辨率或尺寸吗?

No - 压缩和调整大小是单独的操作,压缩一张3000×2000的照片,留下3000×2000;它只是存储那些像素使用更少的字节,代价是一些精细的细节,如果你想要更少的像素,that's a resize,而it's通常最节省权重的变化两者兼而有之,按这个顺序,就是将6 MB的相机文件变成90 KB的网页图像。

Frequently Asked Questions

For true, pixel-perfect lossless compression, use PNG or lossless WebP. For "visually lossless" — no difference you can see — use JPEG or WebP at 80–90% quality. The Image Compress tool lets you set the quality and compare the original against the compressed version before you download, so you can find the exact point where size drops but the image still looks untouched.