How to compress images for the web without losing quality

On most websites, images make up the majority of the bytes a visitor downloads. Shrinking them is the single easiest way to make pages load faster, especially on mobile data, and it directly improves the Largest Contentful Paint score Google measures.

Step 1: Resize before you compress

Phone cameras produce photos 4000 pixels wide or more. A blog column is often 700–800 pixels wide. Uploading the full-size photo means visitors download five times more pixels than they can see.

A good rule: make images about twice the width they’re displayed at, enough to stay sharp on high-resolution screens. For a 750px column, export at around 1500px wide.

Step 2: Choose the right format

• WebP: the best default for photos and most graphics. Typically 25–35% smaller than JPEG at the same visual quality, and supported by all modern browsers.
• JPEG: the safe fallback for photos when WebP isn’t accepted, for example by some older CMS platforms or email.
• PNG: only for simple graphics that need sharp edges or transparency, such as logos and screenshots with text. PNG photos are huge.
• SVG: for logos and icons made of shapes; they scale to any size at a tiny file size.

Step 3: Pick a quality setting

For JPEG and WebP, a quality of 75–80% is usually indistinguishable from the original on screen while being dramatically smaller. Below about 60% you’ll start to see blocky artefacts around edges and in skies.

Always compare the result side by side at the size it will actually be shown.

When compression makes a file bigger

Sometimes the “compressed” version comes out larger than the original. This happens with images that are already well optimised, or with simple flat graphics saved as JPEG. If that happens, keep your original, or try WebP or a smaller width instead.

Don’t forget the HTML

Even a perfectly compressed image can hurt your page if it’s added carelessly:

• Add width and height attributes so the browser reserves space and the page doesn’t jump (this protects your CLS score).
• Add loading="lazy" to images further down the page, but not to the main image at the top.
• Write descriptive alt text for accessibility and image search.

Try it

The Image Compressor resizes and compresses JPEG, PNG and WebP images right in your browser. Nothing is uploaded, so it’s safe for private photos, and it warns you if a result would be larger than your original. Afterwards, run the page through the Core Web Vitals Checker to see the difference in loading speed.