One Photo Was Slowing Down My Client's Website. Here's How I Shrank It From 287KB to 24KB.

Picture this.

You open a website and it takes forever to load. You check your phone to be sure your data is on. It says 4G. Everything looks normal. But you doubt further, so you dial your network's balance code, and your data is still full, almost untouched.

Now you are confused. You open your favourite YouTube channel to test your connection, and the video loads at the speed of light. So the internet is fine.

You go back to the website. Half of it has appeared, but the little circle in your browser is still spinning. At this point you start wondering if your village people are at work. Your time is precious, your patience is short, and you are getting angry. So you close the tab and go and do something else.

Now flip it around. Imagine that this is your customer, going through this exact frustration on your website. They leave, and you lose a client without ever knowing they existed.

This happens every single day. And very often, the cause is hiding in plain sight: the pictures.

In this post, I will show you how one photo was holding back an oil and gas company's website, how I shrank it from 287KB to 24KB, and the exact steps you can follow to make your own website faster, with or without writing code.

What a slow website really costs you

You don't have minutes to convince a visitor to stay. You have seconds.

Google's research found that more than half of mobile visits are abandoned when a page takes longer than three seconds to load. I shared that number in my post about what a website is really for, and it is worth repeating here, because it means you can do everything else right and still lose the customer at the door.

Google also measures how fast the main content of your page appears for real visitors. It calls this Largest Contentful Paint, or LCP, and the target is 2.5 seconds or less. On most websites, that main content is a big picture at the top of the page, often called the hero image. So if your hero image is heavy, your whole website feels slow, no matter how fast everything else is.

To check your website's speed right now, go to pagespeed.web.dev, paste in your address and look at the mobile Performance score. If it is below 90, there is room to improve. I explained how to read those scores in my post on technical SEO.

The usual suspect: your pictures

The HTTP Archive studies millions of real websites and publishes what it finds in a report called the Web Almanac. Its 2024 chapter on images is eye opening:

• On 68 percent of mobile pages, the main content that decides loading speed (the LCP element) is an image.

• On most mobile pages, the biggest image weighs 135KB or more, and images are getting heavier every year.

• JPEG is still the most common photo format, at about 32 percent of images. Newer, lighter formats like WebP (12 percent) and AVIF (about 1 percent) are growing, but slowly.

• Only 32 percent of images tell the browser their width and height in advance, which causes pages to jump around while they load.

So why are images such a problem? Here is what usually happens. A business owner takes a beautiful photo on a modern phone. That photo is several megabytes and thousands of pixels wide. It gets uploaded straight to the website, exactly as it came out of the phone. Then a visitor opens the page on a phone screen that is only a few hundred pixels wide. Their phone downloads the whole giant photo, then shrinks it down to fit the screen.

It is like sending a full trailer to deliver one bag of rice. The rice arrives, but the road is blocked for everyone else while it does.

How one photo was holding back an oil and gas website

I built the website for GEE Expert Limited, an oil and gas services company that does welding and fabrication, corrosion control, logistics and more. When it went live, the mobile Performance score was 91. That is already in the green zone, and many developers would have stopped there.

But a few months later, I went back to look closer. The main content was taking 3.5 seconds to appear on mobile, which is over Google's 2.5 second target. When I dug in, the culprit was exactly what you would expect: the large hero image at the top of the home page, a dramatic photo of a welder at work. It was a 287KB JPEG, and every phone was downloading it, whether the screen was big or small.

So I used Claude Code, an AI coding tool, to build what developers call an image pipeline. In plain English, it is a small program that takes each original photo and automatically creates lighter copies of it:

• Two modern formats: AVIF and WebP, which I will explain in the next section.

• Several different widths: from 640 pixels wide for small phones up to the full size of the original for large screens.

• A safe fallback: the original JPEG stays as a backup for any old browser that cannot read the new formats.

Then the website hands the browser the whole menu, and the browser picks the smallest version that looks sharp on that particular screen.

Here is the part I did not expect. The first time we ran it, the AVIF files came out bigger than the WebP files at every single size. That is backwards, because AVIF is supposed to be the smaller format. And since the site offered AVIF first, every modern phone was downloading the bigger file.

The problem was one setting, called chroma subsampling. I will explain it simply in a moment. We changed it, ran the pipeline again, and this time AVIF came out smaller at every size, just as it should.

The results, measured on the live site in September 2026, using the middle result of four PageSpeed runs:

• The hero image phones download went from 287KB to 24KB.

• The main content now appears in 2.3 seconds on mobile, down from 3.5.

• Mobile Performance went from 91 to 99.

• While I was in there, I also fixed the one accessibility issue, some decorative numbers with low colour contrast, without changing the client's approved brand colours. Accessibility went from 96 to 100.

The lesson is not just "use AVIF". It is this: never assume a new format is automatically better. Measure the files you actually produce.

WebP and AVIF, explained without the jargon

An image format is simply the way a picture is packed into a file. You already know the old ones: JPEG for photos and PNG for graphics and images with transparent backgrounds. They have served the internet for decades, but they don't pack pictures very tightly by today's standards.

Think of it like packing a travel bag. JPEG is folding your clothes neatly. WebP and AVIF are those vacuum storage bags that suck out the air. Same clothes, same quality when you unpack them, but they take up far less space.

WebP was created by Google. According to Google's own figures, WebP photos are 25 to 34 percent smaller than comparable JPEGs at the same visual quality, and WebP graphics are about 26 percent smaller than PNGs. It works in Chrome, Safari, Firefox, Edge and Opera.

AVIF is newer. It is based on AV1, a video format created by a group of tech companies called the Alliance for Open Media. When it is set up properly, AVIF can often squeeze images even smaller than WebP. When I set up the same pipeline for my own portfolio, the AVIF test files came out between 50 and 84 percent of the size of their WebP versions. Modern versions of all the major browsers support it.

The smart approach is not to choose one. You offer both, in order of preference, with the old JPEG at the back as a safety net. Developers do this with an HTML element called picture. The browser reads the list from the top and takes the first format it understands. Modern browsers take AVIF, slightly older ones take WebP, and anything ancient still gets the JPEG. Nobody gets a broken image.

Now, that setting that tripped me up: chroma subsampling. Your eyes are much better at noticing changes in brightness than changes in colour. So image formats can save space by storing colour detail at a lower resolution than brightness detail, and most people will never see the difference. The setting called 4:2:0 does this. The setting called 4:4:4 keeps full colour detail everywhere, which makes the file bigger. I had AVIF on 4:4:4 at first, and that is why it lost to WebP. The GEE hero photo is a dark fabrication yard with a bright weld, so almost all its detail is brightness. Switching to 4:2:0 cut the size with no visible change.

For the developers reading this, the settings that worked on the live site were AVIF at quality 60 with 4:2:0 subsampling, and WebP at quality 80.

Size matters as much as format

Changing the format is only half the job. The other half is sending the right size picture to the right screen, at the right time. Here are the four habits that make the biggest difference:

1. Never send a giant picture to a small screen. A phone screen does not need a 4,000 pixel wide photo. Create a few sizes of each image and let the browser choose. Developers do this with attributes called srcset and sizes. This one habit is a big part of how the GEE hero went from 287KB to 24KB on phones.
2. Lazy load the pictures further down the page. Lazy loading tells the browser not to download an image until the visitor scrolls close to it. Your page appears faster, and visitors who never scroll down never waste data on those images.
3. Never lazy load the main image at the top. This is the mistake that catches many developers. Your hero image is the one thing you want to arrive first. The Web Almanac found that nearly 1 in 10 of the main images that decide a mobile page's loading speed are lazy loaded, which makes those pages slower. On the GEE site, the hero is marked as high priority instead, so the browser fetches it before anything else.
4. Tell the browser the image size in advance. When you give each image its width and height, the browser reserves the space before the picture arrives. Without it, text jumps down the page as images load, and visitors tap the wrong thing. That jumping is the layout shift score from my SEO post, and it is 0 on the GEE website and on my own portfolio.

What about videos?

Video files are far heavier than photos, so please don't upload a big video file directly to your website and let it play from your own hosting. Uploading it to YouTube and embedding it on your page is a much better idea. YouTube handles the heavy lifting of storing and streaming the video in the right quality for each viewer.

But here is something most people don't know. A normal YouTube embed still loads a lot of code onto your page, even if nobody ever presses play. Google's Lighthouse documentation gives an example where the full YouTube player weighs about 540KB, compared with just 3KB for a lightweight stand in.

That stand in is called a facade. It is simply a picture of the video with a play button on top. It looks exactly like a video, but the real YouTube player only loads when the visitor actually clicks play. If they never click, they never pay for it.

I used this on the French school website for the student video testimonials. Each video shows as a thumbnail with a play button, and the YouTube player only loads when someone wants to watch. Developers can use free open source tools like lite-youtube-embed to do this in minutes.

Should you host your images on Imgur?

I used to give this advice myself: upload your images to a free host like Imgur and link to them from your website, so your own site carries less weight. I have since changed my mind, for two reasons.

First, it does not make the page lighter for your visitor. Your visitor's phone still has to download every byte of that image. It just downloads it from Imgur's servers instead of yours. A 2MB photo is still a 2MB photo, wherever it lives. Speed comes from making the file smaller and sending the right size, not from moving it to a different address.

Second, you don't control it. Free image hosts can change their rules at any time. In 2023, Imgur updated its terms of service to remove old, unused and inactive content that was not tied to a user account. Countless images that other websites relied on were at risk of disappearing. Imagine your best project photos turning into broken image icons on the page where a client is deciding whether to hire you.

For a business website, keep your images as part of your own website and serve them through a good hosting network. Both of my client sites, and my own portfolio, are served through Cloudflare's global network, which stores copies of the files close to visitors around the world. If you have a very large number of images, a dedicated image service is also worth considering. Just make sure it is one you pay for and control.

How to find the image slowing your site down

The real job is often not fixing the problem. It is finding it. Here are three ways, from easiest to most technical.

1. Let PageSpeed Insights point at it. Run your page through PageSpeed Insights on mobile. Scroll down to the diagnostics and look for these two items:

• LCP breakdown, which tells you exactly which element is your main content. Very often it is your hero image.

• Improve image delivery, which lists the images that could be smaller and how much you could save on each one.

2. Look at what the browser downloads. In Google Chrome on a computer, open your website, right click anywhere and choose Inspect. Click the Network tab, then click Img to show only images. Reload the page and click the Size column to sort by size. Your heaviest images rise straight to the top.

3. Ask your AI coding assistant. If you or your developer use a tool like Claude Code, you can ask it to investigate before it changes anything. Here is a simple prompt you can adapt:

Find the hero image on the home page. Report its file path, file size in KB, pixel dimensions and format, and the exact HTML element that displays it. Then list every other image on the site larger than 100KB. Do not change anything yet. Report back first.

Notice the last line. Always ask for a report before changes. That is how I work with AI tools on client sites: understand the problem first, then fix it on purpose.

One more correction from my early days. People often say you should delete unused images from your project to speed up your website. Tidy folders are good practice, but an image sitting unused in a folder does not slow your website down, because visitors never download it. What does slow your site is anything that loads on the page without earning its place: tracking scripts you no longer use, chat widgets nobody clicks, and heavy plugins. Those are worth removing.

Step by step: optimise your images without writing code

You don't need to be a developer to make a real difference. If you manage your own website, follow these steps:

1. Test first and write down your numbers. Run your home page through PageSpeed Insights on mobile, three or four times, and note the middle Performance score and the LCP time. This is your before picture.
2. Find your heaviest images using one of the methods above. Start with the hero image at the top of your home page.
3. Resize before you compress. If an image fills the full width of the screen, around 1,600 to 2,000 pixels wide is plenty for most screens. Smaller images inside the page rarely need more than about 1,200 pixels.
4. Convert to WebP or AVIF. Open Squoosh, a free tool from the Google Chrome team that runs in your browser. Drag in your image, choose WebP or AVIF on the right, and use the slider in the middle to compare the original and the new version side by side. Lower the quality until you can see a difference, then nudge it back up a little. Download the result.
5. Watch the file size, not just the format. Squoosh shows you the new size as you adjust. For a full width hero image, aim for something comfortably under 200KB, and much smaller if you can do it without visible damage. Remember my AVIF story: if the new file is bigger, something is wrong.
6. Replace the images on your website. If you use WordPress or another website builder, look for an image optimisation setting or plugin that converts to WebP for you.
7. Test again. Run PageSpeed Insights the same way and compare against your before numbers. Then move on to the next heaviest image.

If your website was built with code, ask your developer to set up an image pipeline like the one I described for GEE Expert. Set up once, it can process every new image with a single command.

Your pictures should sell, not slow

Pictures are some of the most powerful things on your website. Real photos of your work, your team and your results build trust faster than any paragraph. That is exactly why they deserve care. A beautiful photo that takes six seconds to appear is a photo most visitors never see.

The fix is rarely complicated. Send the right size. Use a modern format. Load the important picture first and the rest later. Then measure, because the numbers tell you the truth even when your eyes don't.

On the GEE Expert website, one photo was the difference between a good score and an excellent one. On your website, it might be the difference between a visitor who stays and a customer you never knew you lost.

If your PageSpeed scores are mostly orange and red, or your website just feels slow on a phone, send me an email at hello@chukwumaukaha.com or a message on WhatsApp. Let's talk about how to make your website fast enough to keep your visitors and turn them into paying clients.