Images · How-to

How to Compress Images Without Losing Quality

Rule #1: resize before you compress

The single biggest win in image optimization is delivering an image at (or close to) its display size. A 4032×3024 iPhone photo shown in a 400px-wide card wastes 99% of its pixels. Resize to 2× the display width (800px for a 400px slot on retina), then compress — you'll save more than aggressive JPEG quality settings ever would.

Pick the right format

• JPEG — universal, great for photos, no transparency.
• PNG — lossless, supports transparency, huge for photos. Use for screenshots, logos on transparent backgrounds, pixel art.
• WebP — 25–35% smaller than JPEG at the same quality, supports transparency, works in all modern browsers.
• AVIF — 50% smaller than JPEG, best quality-per-byte today. Safari and Chrome support it; older browsers need a fallback.
• SVG — vector, infinite zoom, tiny for icons and logos. Not for photos.

Quality settings that actually work

For JPEG, quality 75–85 is the standard sweet spot. Quality 100 stores near-random noise from your sensor; nobody sees the difference. WebP is more forgiving — quality 70 in WebP usually looks as good as quality 85 in JPEG.

Step-by-step in the browser

1. Open the Toolzer Image Compressor.
2. Drop your image(s). Everything happens locally.
3. If the source is much bigger than needed, resize first — set max width to 2× your display size.
4. Choose a target quality (start at 80 for JPEG/WebP).
5. Preview the result at 100% zoom — look for banding in skies and ringing around text.
6. Download. Repeat with a lower quality if it still looks clean, or higher if artifacts appear.

Automation for many images

For bulk work, tools like sharp (Node.js), libvips, orsquoosh-cli compress hundreds of images in seconds and integrate into build pipelines. Serve modern formats via the <picture> element with a JPEG fallback for old browsers.

What NOT to do

• Don't re-encode a JPEG at higher quality than the original — you can only lose data, never recover it.
• Don't compress the same JPEG multiple times. Each re-save compounds artifacts.
• Don't use PNG for photos — you'll get files 3–10× larger than JPEG for zero visible benefit.
• Don't rely on CSS width/height to make a huge image look small. Users still download every byte.

Measuring the win

Run PageSpeed Insights before and after. LCP (Largest Contentful Paint) is usually the metric that improves most — halving your hero image often shaves a full second off LCP on mobile.

Try it on Toolzer

• Image Compressor — in-browser, supports JPEG/PNG/WebP.
• Image Resizer — resize before compressing for best results.
• Image Format Converter — convert to WebP or AVIF.

Frequently asked questions