How to Compress and Convert Images for the Web
Images are usually the heaviest part of a web page. Oversized files slow loading, hurt Core Web Vitals, and cost mobile visitors data. The fix is a quick routine: pick the right format, resize to the dimensions you actually display, then compress.
Choose the right format
- JPG — best for photographs and complex images with many colors. Lossy, so files stay small.
- PNG — best for graphics, logos, screenshots and anything needing transparency or sharp edges. Lossless, so files are larger.
- WebP — a modern format that beats both, typically 25–35% smaller at similar quality, with transparency support. Use it as your default for the web.
Converting a heavy PNG photo to JPG or WebP often cuts the file size dramatically. Our PNG to JPG converter and WebP converter do this in your browser.
Resize before you compress
The most common mistake is uploading a 4000px camera image to display it at 800px. The browser downloads every pixel anyway. Resize to the largest size the image is actually shown at (allowing up to 2× for high-DPI screens) using the image resizer first — this alone can shrink a file by 80% or more.
How much quality can you drop?
For most photos, a quality setting of 70–80% is visually indistinguishable from the original but far smaller. Use a tool with a live preview, like the image compressor, and lower the slider until you just start to notice artifacts — then step back up one notch.
A simple workflow
- Resize to the display dimensions (×2 for retina).
- Convert photos to WebP (or JPG for wider fallback).
- Compress to ~75% quality and check the preview.
- Re-check the file size — aim for well under 200 KB for most in-page images.
Everything here runs locally in your browser, so your images are never uploaded while you optimize them.