How to Reduce Image File Size for a Faster Website (Without Visible Quality Loss)

On a typical web page, images account for more downloaded data than everything else combined. Heavy images slow pages down, use visitors' mobile data and can hurt how a site performs in search results, since loading speed is part of how search engines judge page experience. The good news is that image weight is also the easiest thing to fix. Three simple steps, done in order, often cut total image size by 70–90% with no difference anyone can see.

Step 1: Resize to the size it is actually displayed

This is the biggest win and the most often missed. A photo straight from a modern phone is often 4000 pixels wide or more. A blog's content column is usually 700–900 pixels wide. Uploading the full-size photo means visitors download roughly 20 times more pixels than they can see.

• Check how wide the image appears on your page at its largest, for example in the content column on a desktop screen.
• Export it at about twice that width to stay sharp on high-density ("retina") screens. For an 800-pixel column, 1600 pixels is plenty.
• Full-width hero images rarely need more than 2400 pixels wide.

Step 2: Choose the right format

WebP is supported by all current major browsers and is usually 25–35% smaller than JPG at the same visual quality. Converting existing photos is quick with the JPG to WebP converter, and transparent PNGs can be converted with PNG to WebP. For a fuller comparison see PNG vs JPG vs WebP.

Logos and icons are best as SVG, which is tiny and perfectly sharp at every size. If you only have a raster logo, the image to SVG converter can trace it.

Step 3: Pick a sensible quality setting

Lossy formats let you choose how much detail to discard. The relationship between quality and size is not linear: the last few percent of quality cost a lot of bytes and add almost nothing visible.

• WebP: 75–85% is a good range for photos.
• JPG: 80–90% for most photos.
• Lower the setting until you can just see a difference at 100% zoom, then go back up a step.
• Images with fine text or sharp lines need higher settings than soft photos.

A worked example

Take a typical phone photo used in a blog post: 4032 × 3024 pixels, saved as a 4.2 MB JPG. Resizing it to 1600 × 1200 pixels at 85% JPG quality brings it to roughly 300–400 KB. Converting that to WebP at 80% brings it to around 200–250 KB. That is about 95% smaller than the original, and on the page it looks identical. Exact numbers vary with the photo's content, since detailed scenes such as foliage compress less well than smooth ones like skies.

Extra techniques for developers

• Lazy loading: add loading="lazy" to images below the fold so they load only when the visitor scrolls near them.
• Responsive images: use the srcset and sizes attributes so phones download smaller versions than desktops.
• Set width and height attributes on every image so the page does not jump while images load, which improves the layout-shift part of page-speed scores.
• Serve images from a CDN, and let your framework or host optimise them automatically if it offers that.

Common mistakes

• Shrinking an image with CSS instead of resizing the file. It looks smaller but downloads at full size.
• Saving photos as PNG. A photo as PNG can be five to ten times larger than a good JPG or WebP.
• Re-compressing an already compressed file repeatedly, which adds artefacts. Always work from the original.
• Forgetting about images added by plugins, sliders and background CSS, which are often the heaviest of all.

Checklist

1. Resize to about twice the displayed width.
2. Use WebP for photos, SVG for logos, PNG for screenshots.
3. Set quality to 75–85% for WebP, 80–90% for JPG.
4. Compare before and after at 100% zoom.
5. Add lazy loading and width/height attributes.