How to Compress Images for Website Speed Without Blur

Your homepage takes six seconds to load on a phone, and the culprit is usually sitting right there in the media library: a 4.8 MB photo straight from a camera, shown in a box 800 pixels wide. If you learn to compress images for website use properly, most small business and community sites can cut their page weight by half in an afternoon.

This guide covers the sizes to aim for, the formats worth using in 2026, the free tools that do the job, and the one setting that quietly makes images look worse than they need to.

Why you need to compress images for website speed

Images are typically the heaviest part of a page. On a typical small shop or club site, photos account for 60 to 80 percent of the bytes a visitor downloads. Every extra megabyte costs a mobile visitor on a weak 4G signal roughly one to two more seconds of waiting.

That delay shows up in three places. Visitors leave before the page finishes. Google's Largest Contentful Paint measurement, which is often a hero image, gets worse. And your hosting bandwidth fills up faster, which matters on cheap plans with monthly limits. If you are already comparing plans, our guide on how to pick a reliable host for a growing community explains why a fast server cannot rescue oversized files.

Start with the right pixel size

Compression gets all the attention, but resizing does most of the work. A photo that is 6000 pixels wide displayed at 1200 pixels is wasting more than 90 percent of its data before any compression happens.

Use these widths as a starting point:

• Full width hero or banner: 1920 pixels wide, or 2400 if your audience uses large high density screens.
• Content images inside a blog post: 1200 to 1600 pixels wide.
• Product thumbnails and team photos: 600 to 800 pixels wide.
• Logos and icons: use SVG where possible, otherwise twice the displayed size.

WordPress creates several resized copies automatically when you upload, and it serves them through the srcset attribute so phones get smaller versions. That helps, but it still stores the original. Resize before uploading and your library stays lean and your backups stay small.

Pick a modern format

Format choice now matters as much as compression level. Here is how the common options compare for a typical 1600 pixel photo of a shop interior:

WebP is supported by every current browser and by WordPress since version 5.8, so it is the safe default. AVIF compresses better but encodes slowly and some older image plugins handle it poorly. Use it for your few biggest images rather than everything.

How to compress images step by step

You do not need paid software. This workflow takes about two minutes per batch:

1. Collect the originals in one folder on your computer.
2. Resize them to the widths above. On Windows, the free PowerToys Image Resizer works from the right click menu. On a Mac, Preview's Adjust Size option does the same.
3. Open Squoosh in your browser, drag in one image and choose WebP. Start at quality 75 and compare the two halves of the preview slider at 100 percent zoom.
4. Lower the quality until you can see artefacts in skin, sky or fine text, then go back up 5 points. For most photos that lands between 65 and 80.
5. Batch the rest with the same setting. Tools like XnConvert can process a whole folder at once.
6. Name files clearly before uploading, for example bakery-counter-morning.webp, not IMG_4021.webp.
7. Add alt text in the media library as you upload, while you still remember what each photo shows.

For WordPress sites with hundreds of existing images, a plugin such as ShortPixel, Imagify or EWWW Image Optimizer can compress the library in bulk. Run it on a staging copy first, and keep the originals backed up for at least a month in case you dislike the result.

The lossless compression myth

A lot of advice says to use lossless compression so you never lose quality. For photos, that advice usually backfires. Lossless tools shave 5 to 15 percent off a JPEG. A sensible lossy setting at quality 75 removes 60 to 80 percent, and at normal viewing size nobody can tell the difference.

The bigger quality problem is double compression. When you save a JPEG at quality 70, upload it, and then a plugin recompresses it at quality 70 again, the artefacts stack up. Colours band in gradients and edges get blotchy. Pick one place to compress, either on your computer or in a plugin, and switch off the other. In WordPress, the built-in setting that recompresses uploads to 82 quality can be changed by a small snippet or by your optimisation plugin's settings.

Lossless still has a role for screenshots with sharp text, diagrams and anything with transparency. Use it there and accept the larger files.

Check the results

After compressing, test a few key pages. Open the browser developer tools, go to the Network tab, filter by Img and reload. Add up the transferred sizes. A typical content page should load under 1 MB of images, and a homepage with a large hero under 1.5 MB.

Also check lazy loading. Images further down the page should carry loading="lazy", which WordPress adds by default, but the first visible image should load immediately or your LCP score will suffer. If you are tidying other parts of the site at the same time, the full list of quick fixes lives in our web tips section, including a guide on building a custom 404 page that keeps visitors when old image URLs break.

Frequently asked questions

What is the best image size for a website?

There is no single size, but 1200 to 1600 pixels wide suits most images inside articles, and 1920 pixels suits full width banners. Aim for files under 200 KB for content images and under 400 KB for heroes. Thumbnails should be well under 100 KB.

Does compressing images reduce quality?

Lossy compression does remove data, but at quality settings between 65 and 80 the change is invisible at normal viewing size. Quality drops become noticeable when you compress the same file twice or push the setting below about 50.

Is WebP better than JPEG for websites?

For most sites, yes. WebP files are usually 25 to 35 percent smaller than JPEGs of the same visual quality and every modern browser supports them. Keep JPEG only if you need to email or print the same file elsewhere.