Open your own home page on a phone and watch the photos arrive in slow strips, top to bottom, while the text has been sitting there for a while. Or run a speed test and count the image warnings. You suspect it is the images slowing down your website, but there are forty of them on the home page and you have no idea which ones matter.
This page is about finding out. Images hurt speed in a few distinct ways, and each one has a different fix. Once you know which kind of problem you have, and which files are the worst, the work becomes a short list instead of a vague worry.
Why heavy images slow a site down
A browser cannot show a photo until it has downloaded it. That sounds obvious, but it explains almost everything. Text and layout are small. Photos are usually the biggest files on a page, and on a phone with a weak signal every extra megabyte is time the visitor spends looking at an empty box.
Images also compete with each other and with everything else. The visitor’s connection only has so much capacity to share out, the browser has to decode each picture before painting it, and has to work out where it goes on the page. A few large files can hold up the one image the visitor actually came to see.
There are five separate ways this goes wrong. They often overlap on the same site, which is why a single plugin rarely fixes everything.
1. File size: too many kilobytes
An image can be the right width on screen and still be far heavier than it needs to be, because it was saved at maximum quality or never compressed at all. This is the problem most people think of first.
2. Format: the wrong kind of file
A photo saved as PNG, a logo saved as JPEG, an animated GIF used where a short video would do. The same picture can be several times heavier in one format than another. Our comparison of WebP, AVIF and JPEG for websites explains which format suits which kind of image.
3. Dimensions: more pixels than the space needs
A photo from a phone camera is thousands of pixels wide. If your page shows it in a column a few hundred pixels wide, the visitor still downloads every one of those pixels and the browser throws most of them away. This is different from file size, and it is explained properly in our post on image dimensions versus file size.
A related version of the same problem: the site does have smaller copies of each image, but phones are sent the desktop copy anyway. That is a job for responsive images, covered in how srcset serves smaller images on mobile.
4. Count: simply too many images
Galleries, logo walls, Instagram feeds, product grids with fifty items, sliders with eight slides. Even if every file is well optimised, the total adds up. Count matters most on pages where all the images load at once.
5. Loading order: the wrong image first
A browser should fetch the large picture at the top of the page early and leave the images further down until the visitor scrolls. Get this backwards and the page feels slow even when total weight is reasonable. Lazy loading controls this, and it is easy to misconfigure; see lazy loading images explained for the common mistake with hero images.
How to spot the images slowing down your website
Do not start by installing an optimisation plugin. Spend fifteen minutes measuring first, so you know what you are fixing and can tell afterwards whether it worked.
Check what PageSpeed Insights flags
Run your key pages through PageSpeed Insights or our free website speed test. Look for image-related items. Depending on the version of the report, they appear either as separate audits with names such as “Properly size images”, “Serve images in next-gen formats”, “Efficiently encode images” and “Defer offscreen images”, or grouped together as an image delivery insight. Each item lists the specific files and how much could be saved.
Also look at which element the report names as the Largest Contentful Paint. On many small business sites it is a photo: the hero banner, the first product image or a featured image. If so, that one file matters more than all the others put together.
Sort the page’s images by size
Open the page in Chrome, press F12, go to the Network tab, tick “Disable cache”, choose the Img filter and reload. Click the Size column to sort largest first. You now have a ranked list of every picture on the page with its weight. Anything near the top that is larger than a few hundred kilobytes deserves a look.
Compare real size with displayed size
Hover over an image file in that list, or right-click the image on the page and open it in a new tab. The browser tells you its real pixel dimensions. Then look at how big it appears on the page. A picture that is four times wider than its slot is a dimensions problem, not a compression problem.
Test on a phone connection
In the same Network tab, set throttling to a slow mobile profile and reload. Watch which images arrive late and which block what you care about. This is often the moment owners realise that the background photo in the footer is loading before the product they want people to buy.
A worst-offender checklist
The same few culprits turn up on small business sites again and again. Use this list to check your own pages one area at a time.
| Where it shows up | What usually goes wrong | Kind of problem |
|---|---|---|
| Hero banner or home page header | Uploaded straight from a camera or stock site, lazy loaded by mistake | Dimensions, loading order |
| Image sliders | Every slide downloads on page load, plus slider scripts | Count, loading order |
| Team and about pages | Portrait photos at full camera resolution | Dimensions |
| Logos and icons | Saved as large JPEG or PNG, or a whole icon font for five icons | Format |
| Product catalogue | Large thumbnails, gallery zoom files loaded up front | Count, dimensions |
| Blog posts | Screenshots saved as PNG, featured images never resized | Format, file size |
| Background sections in page builders | CSS background images that skip lazy loading and srcset | Dimensions, loading order |
Some neighbours of the image problem are worth checking at the same time. Sliders have their own costs beyond the pictures, covered in our post on whether sliders slow down websites. Shops have extra issues with galleries and staff uploads, covered in our post on slow WooCommerce product images. Embedded videos and background videos behave differently from images, and icon fonts are a separate decision again.
Fix in this order
You get the most improvement for the least risk by working through problems in this sequence.
- The LCP image. Make sure the main image at the top of each key page is sized sensibly, compressed, in a modern format and not lazy loaded. One file, big effect on how fast the page feels.
- Oversized dimensions. Find images much wider than their display slot and replace them with sensible sizes. This usually removes the most weight.
- Compression and format. Compress what is left and serve WebP or AVIF where your setup supports it. A plugin can handle the existing library in bulk.
- Loading order. Confirm images below the fold are lazy loaded and the ones above it are not.
- Count. Question whether the page needs every image. Fewer slides, a shorter logo wall and a gallery that opens on a click instead of loading everything up front.
The step-by-step basics of compressing, resizing and bulk-optimising are already set out in our main guide to image optimisation for a website, so this page will not repeat them. Use this post to decide where to point that work.
What to measure before and after
Write down a few numbers for two or three key pages before you change anything, then again afterwards under the same test conditions:
- Total image weight from the Network tab, with the cache disabled.
- The size and dimensions of the LCP image.
- The LCP time from the lab test, mobile setting.
- The number of image requests on the page.
Run each test more than once and use a typical result, because single runs vary. If total image weight drops a lot but LCP barely moves, the main image was probably not the slow part, and something else such as server response time or render-blocking files deserves attention next. Our website speed guide covers those other areas and how they fit together.
Mistakes that undo the work
- Running two image plugins at once. One compresses, the other compresses again or rewrites the same URLs, and you get soft images or broken ones.
- Compressing so hard that faces and text go blotchy. A smaller file that makes the business look careless is not a win. Check by eye at actual size.
- Fixing the library and forgetting new uploads. If staff keep uploading camera originals, the problem comes back within weeks. Agree simple upload rules.
- Judging by the score alone. The score can jump while the page a customer actually lands on is still heavy. Check the pages that matter to the business.
- Deleting originals without a backup. Some plugins can replace originals with compressed copies. Keep a backup of the uploads folder before any bulk job.
Frequently asked questions
How do I know if one image is the main problem or all of them together?
Sort the images by size in the browser’s Network tab and check which element PageSpeed Insights names as the Largest Contentful Paint. If one large photo sits at the top of both lists, fix it first and retest. If the weight is spread across dozens of medium files, the problem is count and loading order instead.
Will a CDN fix slow images on its own?
A CDN shortens the distance files travel and can help visitors far from your server, but it delivers whatever file you give it. A five megabyte photo is still five megabytes from a nearby server. Some CDNs can resize and convert images on the fly, which helps, but only if that feature is set up and working.
Is it worth optimising images on a site that gets little traffic?
Yes, because every visitor pays the cost, not just busy sites. A small business site may only get a few enquiries a week, and each of those people might be on a phone with a poor connection. Fixing heavy images is usually a one-time job with a simple upload habit afterwards.
Do images below the fold still slow the page down?
Much less than images at the top, as long as they are lazy loaded. Browsers then fetch them only when the visitor scrolls near them. If lazy loading is not working, or a slider or script forces every image to load at once, they compete with the important content and can slow the first view.
Sometimes the worst files are fixed and the page is still slow, because images were never the whole story. Our website speed optimisation service looks at the whole page, images included, and explains what was changed and why.
All guides in this section
- WebP vs AVIF vs JPEG: Best Image Format for Websites
- Convert Images to WebP in WordPress and Check It Works
- Lazy Loading Images Explained, and the Hero Image Mistake
- Responsive Images srcset: Smaller Images for Phones
- Do YouTube Embeds Slow Down Your Website? Use a Facade
- Is a Background Video Slowing Down Your Site? What to Do
- Do Sliders Slow Down Websites? What to Check and Change
- SVG Icons vs Icon Fonts: Is Font Awesome Slowing You?
- WooCommerce Product Images Slow? Fix the Grid and Gallery
- Image Dimensions vs File Size: Resize Before You Upload
Next in this series: WebP vs AVIF vs JPEG: Best Image Format for Websites
