How to make images smaller for a website without making them look worse

Images are usually the largest part of a web page. A single photo straight from a modern phone can weigh 3 to 8 MB, which takes several seconds to download on an average mobile connection. Google's page-experience guidance measures how long the largest visible element takes to appear (Largest Contentful Paint), and on most pages that element is an image.

The good news: you can usually cut image weight by 80–95% with no visible difference. You need to get three things right, in this order.

1. Use the right dimensions

Dimensions matter more than anything else. File size grows with the number of pixels, so an image that is twice as wide and twice as tall has four times as many pixels. Work out the largest size the image is actually displayed at:

Exporting at about twice the displayed CSS width keeps images sharp on high-density (Retina) screens. Going larger than that wastes bytes. Use the image resizer to set an exact width, or let the compressor limit the longest side.

2. Pick the right format

• WebP is the best default for the web today. It handles photos and graphics, supports transparency, and is typically 25–35% smaller than JPEG at similar quality. Every current browser supports it.
• JPEG is fine for photos and works everywhere, including email clients and older software. It cannot store transparency.
• PNG is lossless. Use it only when you need pixel-perfect graphics, such as screenshots with small text or a logo, and you cannot use SVG. A photo saved as PNG is often 5–10 times larger than necessary.
• SVG is best for logos, icons and simple illustrations, because it is vector-based and stays sharp at any size.
• AVIF can be smaller than WebP, but encoding support and tooling are less universal. WebP is the safer choice for most sites.

If your website platform only accepts certain formats, use the image format converter.

3. Choose a sensible quality

Quality settings run from 0 to 100, but the scale is not linear: going from 100 to 85 often halves the file with no difference anyone could see, while going below about 50 starts to show blockiness and smeared detail. Good starting points:

• 75 for most website photos
• 80–85 for photography, portfolios and product images
• 60 for large background images that sit behind text or are partly covered

Compare the result at 100% zoom with the original side by side. If you cannot spot the difference without searching for it, the setting is right.

Check the result on the page

1. Upload the optimised image and open the page on your phone using mobile data, not Wi-Fi.
2. Run PageSpeed Insights on the page. Its "Properly size images" and "Serve images in next-gen formats" checks show whether anything is still oversized.
3. Make sure your HTML sets width and height attributes on images, so the browser reserves space and the page does not jump while loading.
4. Add loading="lazy" to images further down the page, but not to the main image at the top.

Common mistakes

• Compressing a tiny image repeatedly. Each lossy save loses a little more detail. Always start from the original.
• Relying on the website to shrink it. Many website builders scale images down for display but still send the full-size file to the browser.
• Uploading photos with location data. Photos can contain GPS coordinates. The compressor removes metadata as a side effect, or use the dedicated metadata remover.

Written by the Toolkeel team at Sole Digital Media

Fact-checked against the sources above. We test every tool we mention. Editorial policy.