By Nadeem Akram · Sep 23, 2026

Why images slow pages down, how to pick the right size, format and quality, and a quick workflow that keeps photos sharp and pages fast.

Images are usually the heaviest part of a web page. A single photo straight from a phone can be 4 to 8 MB, which is more than an entire well-built page should weigh. The good news is that most of that weight is invisible: with the right size, format and quality, the same photo can drop to around 100 to 300 KB and look almost identical on screen.

Step 1: resize before you compress

The biggest saving comes from not sending pixels nobody will see. A phone photo might be 4000 pixels wide, but if it is shown in a 800-pixel column, three quarters of the width is wasted. Resize the image to roughly the largest size it will be displayed at. If you want it to look sharp on high-density (retina) screens, use about twice the displayed width, but no more.

The Image Resizer scales an image to exact pixel dimensions and can keep the proportions for you.

Step 2: choose the right format

• WebP is the best default for the web today. It produces smaller files than JPG at similar quality and supports transparency like PNG. All modern browsers support it.
• JPG is still fine for photos, especially when a file has to open in older software or be sent by email.
• PNG is lossless, so it is ideal for screenshots, diagrams, logos and anything with sharp edges or text. It is a poor choice for large photos, which become very heavy.

Switching formats takes seconds with the JPG to WebP and PNG to WebP converters. For a fuller comparison, see our guide on PNG vs JPG vs WebP.

Step 3: pick a sensible quality level

Lossy formats like JPG and WebP let you trade a little detail for a much smaller file. The relationship is not linear: dropping quality from 100 to about 80 often halves the file size with no difference most people can see, while going below about 60 starts to show blocky artefacts, especially in skies and skin tones.

Use the Image Compressor to try a few quality settings. It shows the original and compressed sizes side by side, so you can stop at the point where the file is small and the picture still looks right. The compression happens in your browser, so the image is not uploaded.

Step 4: give images the right HTML

• Set width and height attributes so the browser reserves space and the layout does not jump as images load.
• Add loading="lazy" to images further down the page so they only load when the visitor scrolls near them. Do not lazy-load the main image at the top of the page.
• Write alt text that describes the image, for accessibility and for image search.

A quick workflow

1. Resize to the display size (or twice that for retina screens).
2. Convert photos and graphics to WebP; keep PNG for screenshots and line art if WebP softens them.
3. Compress to around quality 75 to 85 and compare with the original.
4. Upload with width, height, alt text and lazy loading where appropriate.

Check the result

After updating a page, run it through the On-Page SEO Checker to confirm every image has alt text and the page size is reasonable. Browse the rest of our image tools for rotating, converting and more.