How to Reduce Image Size for Website (Without Ruining Quality)

Why image size matters for websites

Images are the single biggest cause of slow websites. A single unoptimised photo can be 5–10 MB — large enough to make your page feel sluggish even on a fast connection. Google uses page speed as a ranking factor, and slow pages convert fewer visitors.

The goal is to deliver the smallest file that still looks sharp on the user's screen. This requires two steps: resize (get the pixel dimensions right) and compress (reduce the file size at those dimensions).

Step 1: Resize to the right dimensions

Most websites display images at 1200–1920 pixels wide at most. If you upload a photo from a modern smartphone, it might be 4000+ pixels wide. Those extra pixels are invisible to your visitor — they just add to the file size.

Rule of thumb: - Hero/banner images: 1920 × 1080 px maximum - Blog post images: 1200 × 800 px - Product thumbnails: 400–600 px wide - Avatars and icons: 200 px or less

Use the Resize Image tool to get your dimensions right before compressing.

Step 2: Compress the resized image

After resizing, compress the image to remove unnecessary data. For photos, a quality setting of 70–85% is the sweet spot — the difference from 100% quality is invisible to most viewers, but the file size is 60–80% smaller.

Step 3: Use modern formats

Converting to WebP instead of JPG typically saves another 25–35% in file size with no visible quality difference. Most websites built today should be serving WebP images.

File size targets for web images

| Image type | Target size | |-----------|------------| | Hero/banner | Under 200 KB | | Blog images | Under 100 KB | | Product photos | Under 150 KB | | Thumbnails | Under 30 KB | | Icons/logos | Under 10 KB |

Tools needed

You need two things: resize (if the image is too large) and compress. Both are free and work entirely in your browser on WebToolsDen — nothing gets uploaded to a server.

Common mistakes

Compressing without resizing first. If you compress a 4000-pixel image, you still have a huge file just at lower quality. Always resize first, then compress.

Using PNG for photographs on the web. PNG files of photos are 5–10x larger than JPG or WebP equivalents. Use JPG or WebP for all photographic content.

Over-compressing until the image looks visibly degraded. Check your result by zooming in. Blurry or pixelated images hurt trust and user experience. Find the lowest quality that still looks sharp, not just the smallest file.