图片压缩与缩放工具

Why file size matters

Image weight is usually the single biggest factor in how fast a page loads. A 4 MB hero photo will hurt your Largest Contentful Paint far more than any amount of script optimisation.

Practical targets:

Which format should you use?

• JPEG — best for photographs. No transparency, small files.
• PNG — best for screenshots, logos and anything needing transparency. Large files.
• WebP — usually 25–35% smaller than JPEG at the same quality, with transparency and animation support. Supported by every current browser.
• AVIF — even smaller, but slower to encode and decode.

The tool converts to JPEG by default. If a PNG is already smaller, it keeps the PNG.

How the compression works

The browser's canvas.toDataURL() re-encodes the image as you draw it. Raising the quality setting keeps more detail and produces a larger file; lowering it discards detail and shrinks the file. The tool shows the before/after size and the percentage saved so you can tune it.

Privacy

Your image is read with FileReader and processed in a canvas element on your machine. Nothing is uploaded. This matters when you are compressing screenshots of private documents or client work.

Tip

Resizing is often more effective than recompressing. Scaling a 4000px photo down to 1600px typically removes 70–80% of the pixels, which reduces the file far more than any quality tweak.