Images are usually the heaviest part of a web page. A single unoptimised photo from a phone can be 4 MB, bigger than the rest of the page combined. Compressing properly can cut page weight by more than half, improve Core Web Vitals and make your site feel instant, with no visible loss of quality.
Quick rules
- Resize first, then compress. Pixel dimensions matter more than quality settings.
- WebP or JPG for photos, PNG for sharp graphics, SVG for logos.
- A quality setting of 70 to 85 percent is usually invisible.
- Do it in your browser with our free image compressor. Nothing is uploaded.
Step 1: know the formats
| Format | Best for | Compression | Transparency |
|---|---|---|---|
| JPG | Photos | Lossy, small | No |
| PNG | Screenshots, graphics, text, transparent images | Lossless, larger | Yes |
| WebP | Photos and graphics on the web | Lossy or lossless, usually smaller than JPG or PNG | Yes |
| AVIF | Photos where the smallest size matters | Very small, slower to encode | Yes |
| SVG | Logos, icons, simple illustrations | Vector, tiny | Yes |
Not sure? Convert between formats with our image converter.
Step 2: resize to what you need
A phone photo might be 4000 × 3000 pixels. If it shows 800 pixels wide on your page, the browser downloads 10 times more data than needed.
| Use | Suggested width |
|---|---|
| Full-width hero banner | 1600 to 2000 px |
| Blog post image | 1200 px |
| Product photo | 800 to 1200 px |
| Thumbnail or card | 400 to 600 px |
| Social share image | 1200 × 630 px |
The image resizer sets exact dimensions and keeps the aspect ratio.
Step 3: compress with the right settings
- Photos: WebP or JPG at 75 to 85 percent quality.
- Graphics and screenshots: PNG or WebP lossless. Reduce colours if the image is simple.
- Target size: if a form or site demands "under 100 KB", use the compressor's target-size mode. It lowers quality (and size if needed) until the file fits.
- Compare at 100 percent zoom on important details like faces and text.
- Keep the original in a separate folder.
How small should it be?
| Image | Good target |
|---|---|
| Hero image (main banner) | Under 200 KB |
| Blog or product images | Under 100 to 150 KB |
| Thumbnails | Under 30 KB |
| Whole page weight on mobile | Ideally under 1.5 MB |
Practical targets, not official rules.
Step 4: remove what isn't needed
- Metadata: photos carry camera and location data. Strip it for privacy and size.
- Transparency you don't need: save flat photos as JPG, not PNG.
- Backgrounds: cut clutter. Our background remover makes product photos cleaner and often smaller.
Step 5: serve images smartly
- Responsive images (srcset and sizes) so phones get smaller files.
- Lazy-load below the fold, but never your main hero image.
- Width and height attributes to prevent layout shift.
- A CDN and long cache headers.
- Descriptive alt text for accessibility and SEO.
Frameworks like Next.js do much of this automatically, see why Next.js suits business websites. For the full picture read how to improve website speed.
Mistakes
- Uploading camera originals and letting CSS shrink them.
- Saving photos as PNG.
- Recompressing an already compressed JPG. Quality drops each time, so always start from the original.
- Over-compressing: banding in gradients and blocky edges around text.
- Forgetting alt text.
Quick workflow
- Resize to the display size.
- WebP or JPG for photos, PNG or SVG for graphics.
- Compress to 75 to 85 percent, or a target size.
- Check at 100 percent zoom.
- Upload with a descriptive file name and alt text.
Need your site audited for speed? See web development or contact us.
