Table of Contents
Most slow websites are not slow because of the theme, or the page builder, or some setting buried three menus deep. They are slow because of the images. It is the most common thing I see capable people get wrong on their own builds, and it is also the easiest to fix once you know what you are doing.
If your pages feel sluggish, especially on a phone, the images are the first place I would look. Not the last. The good part is that this is almost entirely a habit, and once you have the habit, it costs you nothing.
The right size for the slot, and don't forget mobile
The right size for an image depends on where it is going on the page. Work that out first, because everything else follows from it.
Think about the slot. A full-width banner needs to be wider than a small image sitting in a column next to some text. There is no point loading a huge image into a small slot, the visitor never sees the extra detail, they just wait longer for it. Match the image to the space it lives in.
As a rough rule of thumb, a full-width banner wants to be somewhere between 1200 and 1900 pixels wide. Anything that sits in a third of the page or less does not need more than 600 pixels, and honestly that holds for anything up to about half the page too. When you are not sure, go smaller; it is almost always the right call.
Then there is mobile, and it is the bit people skip! A phone screen is a fraction of the width of a desktop one, so serving your full desktop image to a phone means sending far more than that little screen can even show. You want your own smaller versions for mobile, sized for a phone rather than a laptop. Because I keep lazy loading turned off (the same as I do on my Elementor builds), right sizing is what does the heavy lifting here, so this bit matters.
Get the image right before it goes on the page
Now you know what size each image should be. Getting it there is the simple part, and the trick is to do it before you upload, not after.
Before an image goes anywhere near your website, resize it to the dimensions you need, compress it, and save it as WebP. WebP is a modern format that is much smaller than a JPEG or a PNG at the same quality. Do those three things first and the file that lands on your site is already light, every single time!
I do this in a tool called BulkResizePhotos.com, and I like it because I can process a whole batch at once. You add your images, and you have real control over what happens to them. You can resize by percentage, by a target file size, or by dimensions, and dimensions can be width, height, or longest side. You pick the format (I recommend WebP) and then choose whether the image needs to be transparent. Last but not least, you set the quality, where I often use around 80%, which looks great and cuts the file size right down.
The one I reach for most is resizing by longest side. I will set the longest side to something like 800 pixels, and then run a whole batch through at once so every image comes out consistent. It is quick, and it means I am never uploading anything bigger than the page needs.
There is a nice side effect to sizing your images properly, too. When an image is already the right size, it stops the page from doing that little jump where everything shuffles down as the image loads in.
Why I don't let WordPress or a plugin make my image versions for me
The standard advice is to let WordPress and a stack of plugins handle your images for you. I do the opposite, and on purpose. It goes against what nearly every other guide will tell you, so stay with me. 
WordPress, left to itself, makes several extra copies of every image you upload. I turn that off by setting the media sizes to 0 (that is a one-time setting, and I cover exactly how in the Elementor speed post). There is a downside to this; I am not going to pretend otherwise. Those extra sizes are what WordPress normally uses for something called srcset, which is the mechanism that hands a smaller image to a smaller screen automatically. Turn the sizes off and you turn srcset off with them.
The thing is, srcset is only doing a job you can do better yourself. It is guessing at sizes for you. When you resize and upload your own right-sized images, and your own mobile versions, you are deciding exactly what each screen gets instead of leaving it to an automatic guess. You do the work up front, and you get a lighter, cleaner result.
The same goes for image optimisation plugins. People install them believing they will tidy everything up, but a lot of them do the opposite. They generate even more versions of every image, not fewer, and your media library balloons all over again. If you have already done the resizing and compressing before upload, you do not need a plugin trying to rescue images that were never heavy in the first place.
Not quite sure what you might need?
Book a Pick My Brain session and let’s find your solution together! 😊Â
Filenames and alt text
Two quick things while you have your images open. Give them descriptive filenames instead of IMG_4821.jpg, because it helps people and search engines understand what the picture is. And write proper alt text, which describes the image for anyone using a screen reader and does the same job for search. Neither takes long, and both are worth the habit.
If you would like all of this in one place, I have put together a Web-Ready Image Checklist, a short, free checklist that walks you through the whole thing: resizing, format, sizing for the slot, mobile, filenames and alt text. Grab it here and keep it beside you next time you are adding images to a page.
And if you would rather not do any of this yourself, that is what Tech Hours are for. Send me the task, and I will get your images sorted for you. Depending on size it might be a smaller or bigger job, but it will help clean up your website a lot.
Taking the time with your images
I know if you’re creating a blog or an update to a website page, you want to go fast and it feels easier to just upload what you have and don’t worry about it. But with a few small habits you do before an image ever reaches your site you will keep your site much more manageable and fast.Â
So next time you are about to drag a photo straight off your camera onto a page, stop for a second. Does it need to be that big? 
