When a site loads slowly you rarely have to look far - the heaviest element is almost always the prettiest one, the images. All the text on a page, the styles and most of the code together weigh very little, while a single photo straight off a phone can outweigh the lot. The scenario I see most often: the owner uploads photos to the portfolio gallery straight from a camera or phone, a dozen at a time, and month by month the site gets heavier.
The good news: this is the kind of problem you can solve once, systematically - without reworking every file by hand and without giving up nice photos. I will walk through what image optimization actually is and how to set it up on WordPress so it keeps working on its own.
Why images slow a site down
Before the browser can show a page, it has to download everything on it. On most sites images are the largest component by bytes - which is why they are the most common single cause of slow loading. A phone photo is wider than any screen anyone will ever view the page on, and yet it often lands in a small gallery tile at full size. The browser downloads all of it and then shrinks the image down to tile size - and that entire surplus is pure wasted time for your customer.
Three rules: dimensions, format, compression
All of image optimization comes down to three things:
- The right dimensions - an image should not be larger than the space it actually occupies. A small tile needs a small version; full size makes sense at most behind a click to enlarge
- The right format - WebP or AVIF instead of the classic JPG and PNG (more on that below)
- Compression - an image can be saved more economically at the cost of quality the human eye cannot tell apart anyway; only badly overdone compression produces a visibly “blurry” result
Each of these three slims the site down on its own, and together they can turn a sluggish gallery into something that opens without waiting.
WebP - what it actually is
WebP is simply a more modern way of saving an image. The same view, the same quality to the eye - but the file is stored cleverly enough to come out several times lighter than JPG or PNG. There is no magic and no loss of content: it is like saving the same document in a better archive. Every popular browser has supported WebP for a long time, so there is no risk of images failing to display for someone.
AVIF or WebP - which to choose
AVIF is a newer format still - usually lighter than WebP at the same quality, but slower in the conversion process itself. In practice you do not have to choose: well configured tools prepare both versions and serve AVIF where the browser accepts it, with WebP as the fallback. The original stays untouched in the media library. This is a decision made by an automation, not a person - and that is how it should be.
Lazy loading - what it is
Lazy loading is a simple principle: images further down the page load only once someone starts scrolling. That way the browser only downloads what is visible immediately. WordPress does this on its own today, with no plugin - but themes and builders can break it: sliders loading every slide at once, images inserted as CSS backgrounds (which the built-in mechanism skips) or an extra “lazy load” plugin fighting what WordPress ships with. If your site suddenly slowed down after installing a theme or builder, this is one of the first places I look.
How to shrink images for a website - without reworking each one
Opening hundreds of files by hand in a graphics editor is a road to nowhere. On WordPress I usually arrange this in three layers:
- Optimization on upload - a plugin from the media optimization family that automatically scales, compresses and saves every newly uploaded image as WebP/AVIF. Set once, it keeps order for you
- Converting the existing library - the same tools can run one process across everything already on the site and slim down years of backlog
- Cache and CDN - a layer that serves the light versions fast and from a server closer to the visitor; some services of this kind can also convert images on the fly
I deliberately do not recommend a specific plugin by name here - the choice depends on the hosting, the theme and what already sits on the site. The type of tool matters more than the logo on the box.
What helps: before you install anything, check your site in the free PageSpeed Insights tool. In the image section it lists the specific files that weigh too much - you will know whether the problem is dimensions, format or compression instead of guessing.
Images and LCP - one image matters more than all the others
The largest element visible at the top of a page is usually an image - a banner, a hero, a product shot. It is what Google measures LCP from, the moment the page “really appeared” - I wrote about that more broadly in the piece on Core Web Vitals. The practical conclusion: that one image has to be the most carefully handled - light, at the right dimensions and loaded immediately, without lazy loading. Lazy loading the main image is a common mistake that, instead of speeding things up, delays exactly what everyone is waiting for.
What image optimization will not fix
Honestly: slimming down images will not save a site sitting on overloaded hosting or carrying several dozen plugins. Images are the most common culprit, but not the only one - if the site still drags after optimizing them, the culprit has to be found deeper, and how to do that step by step I described in the guide on how to speed up a WordPress site. Clean-ups like that - from diagnosis through rollout to watching the result hold - I do for clients as part of optimization. I always start with a free diagnosis: first I check what is actually weighing your site down, and only then do we talk about the work.
Frequently asked questions
What is WebP and how does it differ from JPG? It is a more modern image format - the same view and the same quality to the eye, but a noticeably lighter file. Every popular browser supports it.
AVIF or WebP - which format should I choose? Both - a well configured tool will serve AVIF where the browser accepts it and WebP as the fallback. This is a choice you do not have to make by hand.
How do I shrink images for a website without losing quality? Scale them to the dimensions they are actually displayed at and compress in moderation - well chosen compression is invisible to the eye. On WordPress a media optimization plugin will do it for you on upload.
Is lazy loading enabled by default in WordPress? Yes, WordPress has been lazily loading images further down the page on its own for a long time. The problem appears when a theme, builder or extra plugin breaks that mechanism - then it needs checking and undoing.
Sitting on this yourself and unsure where to start? I speed up and repair existing sites and stores - Core Web Vitals, outages, the features that are missing. Tell me what is happening and you will get a concrete quote with a date.