How to Optimise Images in WordPress Without Killing Quality
Most WordPress sites are carrying far more image weight than they need to. Not because the photos are bad, but because nobody has touched the export settings, the format choices, or the compression pipeline since the site went live. A single unoptimised hero image can add two or three seconds to your load time on mobile. The good news is that fixing it rarely means touching code, and it does not mean your images have to look worse.
On this page
Why File Size Matters More Than Resolution
Resolution is how many pixels an image contains. File size is how much data the browser has to download before it can show the page. These two things move together, but they are not the same thing.
A 4,000-pixel-wide photo shot on a modern phone might weigh 8MB straight out of the camera. Displayed on a blog post at 1,200px wide, it still weighs 8MB unless you resize and compress it first. The browser downloads all that data, throws most of it away, and the visitor just sees a slow page.
The target for most web images is somewhere between 50KB and 200KB depending on how large they appear on screen. A full-width hero might run to 300KB in a modern format. Thumbnails and icons should be much smaller. If your images are regularly landing above 500KB, that is where to start.
Choosing the Right Format Before You Upload
Format choice is the single biggest lever most people never pull. JPEG is fine for photographs. PNG is better for logos and anything with a transparent background. Beyond those two, WebP is worth paying attention to.
WebP vs JPEG
WebP typically cuts file size by 25 to 35 percent compared to JPEG at equivalent visual quality. Google’s WebP documentation covers the technical detail, but the practical upshot is straightforward. For a photography-heavy site, switching to WebP can shave hundreds of kilobytes off a single page load.
WordPress converts uploads to WebP automatically if you are on a reasonably modern version and your server supports it. Check by uploading a JPEG and seeing whether WordPress generates a WebP version alongside it in your media library. If it does not, a lightweight plugin handles the conversion without much fuss.
Scaling Before You Upload
WordPress generates multiple image sizes from every upload, but it cannot make a large source file smaller in terms of pixel dimensions on the fly without a performance cost. Resize the image to roughly the maximum size it will ever appear on your site before uploading it. For a standard blog post image, 1,200 to 1,400px wide is usually plenty. Uploading a 4,000px original and letting WordPress scale it down wastes processing and storage.
Compression Settings That Do Not Destroy Quality
Compression is where most people either go too hard or not hard enough. Too aggressive and the image looks blocky or muddy. Too gentle and you have saved almost nothing.
A quality setting of around 75 to 80 percent in most image editors or compression tools is a good starting point for photographs. At that level, the difference from a 100 percent export is invisible at normal screen sizes. Go below 60 percent and you will often see it, particularly on anything with smooth gradients or skin tones.
For WordPress specifically, plugins like ShortPixel and Imagify run compression on upload and give you control over the aggressiveness. Among the image optimisation plugins worth considering, lossy compression at a moderate setting tends to be the most reliable balance. Lossless is safer but saves less. Stick to lossy at 75 to 80 percent quality and check a few images visually before bulk-processing your library.
Lazy Loading and When It Helps
Lazy loading tells the browser to skip loading images that are below the visible area until the user actually scrolls down to them. WordPress has had native lazy loading built in for a while now, applied via the loading="lazy" attribute on image tags.
It is on by default for most images. The one exception to watch is your above-the-fold content, particularly the Largest Contentful Paint element, which is usually your hero image or the first big photo a visitor sees. Lazy loading that image delays it, which directly hurts your LCP score. Make sure the hero image is excluded from lazy loading, either through your theme settings or your page builder’s image options.
What the Difference Actually Looks Like
To put some shape on this, a straightforward before-and-after comparison shows where the gains typically come from on a standard WordPress page:
Typical file size reduction by method, for a single 1,200px photograph:
Figures are representative estimates based on typical compression ratios, not a specific test.
The combination of resizing, format choice, and compression is where the real difference sits. Any one of those steps alone helps. All three together can cut image weight by 70 to 80 percent without a visible quality drop, which is a meaningful change for WordPress image optimisation settings done properly.
Bulk Optimising Your Existing Library
If you have a site that has been running for a few years, there are likely hundreds of images already uploaded that have never been touched. Most compression plugins include a bulk optimisation option that processes your existing media library. Run it, check a handful of images visually once it is done, and you are finished. It takes time on a large library, but it is a one-off job.
One thing to check first, make sure your plugin keeps the originals. If something goes wrong or the compression is too aggressive on a particular image type, you want to be able to restore from the uncompressed version rather than having to track down the source file again.
If you want someone to go through this properly on your site, rather than doing it piecemeal, get in touch and we can take a look at what is slowing things down.