September 23, 2021

6 Reasons Your Images Are Slowing Down Your Website (And How To Fix it)

Images make up a large percentage of website traffic, so optimizing your images can help reduce the time it takes for them to load. Images are often the culprit of performance issues: they take up the loading resources, slowing down your WordPress site. 

Images are responsible for the highest number of HTTP requests - source: Almanac.http archives
Images are responsible for the highest number of HTTP requests – source: Almanac.http archives

The thing is, it’s hard to imagine a website with no images or pictures at all. Using SEO-optimized images can even drive more traffic to your website. We can’t do business without them!

In this blog post, we’ve outlined six reasons images are slowing down your site and how you can fix that by optimizing them for the web.

Why Your Images Are Slow on WordPress

1. Images are too large (and you may be using too many)

When it comes to web page speed, the first thing you should do is optimize your images. Larger-sized high resolutions can take up a lot of bandwidth and slow down loading times for visitors on your site – so why not upload them in a smaller size? But also, don’t let the quality of your images suffer! Use reliable and effective applications for image compression. This will ensure that while you’re reducing their size, they are still being maintained in visual fidelity with little loss in quality.  

2. Images have unspecified dimensions

Scaling images appropriately is important to avoid website images taking too long to load. Do not let the browser scale images instead of you – that would give it more data to load. In other words, the browser will still load the entire image. If you have an image that is 2000 x 2000 pixels, but you have scaled it down to 200 x 200 pixels, your browser will have to load ten times more than necessary. 

3. Images are not optimized according to the device

To prevent images from loading slowly, your page should never render images that are larger than the version displayed on the user’s screen. In simple words, anything larger than the device results in wasted bytes and slows down your page. 

4. The browser starts loading images all at once

By default, your browser tries to load everything at the same time. If you don’t prioritize the images that need to be loaded first, the browser will be busy rendering them all at once. Focus on the most important images that need to load in the viewport of the visitor instead. 

5. You use heavy formats 

The size of your images is only part of the problem. The file types you use can also take up valuable space. Are you using a format like .TIFF or BMP? In that case, remember that TIFF is an uncompressed format that renders a more detailed picture and contains more data… This will create larger files and end up taking a lot of storage space. If you are not using .TIFF but JPEG and PNG instead, you should know that you could use even lighter formats, as you’ll find out in the next section. A simple conversion can give your image a little boost!

6. Your cache doesn’t store images

The main benefit of caching an image is to improve the performance of your WordPress site. The user should view the images or Javascript and CSS files directly from his system instead of waiting for them to download over a network connection. In other words, your images should be cached in a temporary local folder to avoid unnecessary pings to the database.

How to Fix Images Loading Slowly

Images are crucial for content strategy, but we don’t want them to load slowly. The key is to use them properly to avoid slowing down your WordPress site.  Let’s see the six techniques you can use to prevent your images from loading slowly. 

1. Resize and compress images

Always optimize your images by resizing and compressing them. Lossy and lossless compression are two methods commonly used to optimize your website for faster load time, ultimately speeding up the page load. Those two high-level tactics are well explained in our guide about how to reduce image size without losing quality

  • Lossy = a filter that eliminates some of the data. The quality of the image is impacted.
  • Lossless = a filter that compresses the data without touching the quality of the image.

With the right plugins, you can have WordPress do some of your image formattings for you automatically.

The issue: Images are too large (and too many).

The solution: Image optimization plugins you can use to make your images loading faster: 

Compressing images with Imagify: the quality remains good, but we saved 87% on our file size - Source: Imagify
Compressing images with Imagify: the quality remains good, but we saved 87% on our file size – Source: Imagify

2. Set image dimensions 

To fix a slow image loading on your website, remember to set proper image dimensions. Set the width and height for all images to save data and improve page load time. How does this work? Adding width and height attributes to your <img> markup will tell your browser to save some space for the image. If you don’t do this, this will create a content shift, and your Cumulative Layout Shift score will be impacted. As a result, Lighthouse will give your Core Web Vital a pretty bad score, hurting your SEO and performance. 

Let’s see an example below to better understand the image shift impact on user experience.

  1. Text will shift if image dimensions are not provided to the browser.
Text will shift if image dimensions are not provided to the browser.
Source: SmashingMagazine

2. Text will not shift (CLS not impacted)  if image dimensions are provided so appropriate space can be allocated.

Text will not shift (CLS not impacted)  if image dimensions are provided so appropriate space can be allocated.
Source: SmashingMagazine


The issue: Images have unspecified dimensions.

The solution: Add missing image dimensions and attributes using WP Rocket. This is a powerful plugin that will also do caching, code optimizing, lazy loading, and much more to boost the speed of your WordPress site. 

Adding missing dimensions in the Media tab - Source: WP Rocket
Adding missing dimensions in the Media tab – Source: WP Rocket

3. Serve images optimized for each device 

“Responsive images” is the strategy used for serving appropriately-sized images according to the device (tablet, mobile, and desktop). In other words, you create multiple versions of each image, and you define which one to use in your code using media queries, viewport dimensions, etc. 

Web.dev even says that “serving desktop-sized images to mobile devices can use 2–4x more data than needed.” 

The issue:  Images are not optimized according to the device.

The solution: 

  • Use a WordPress page builder to help you.
Example of Elementor that lets you choose and resize your image according to the device - Source: Elementor page builder
Example of Elementor that lets you choose and resize your image according to the device – Source: Elementor page builder 
  • Use an image CDN to deliver images at the right size according to the device.
  • Do it manually using CSS and use ​​Lighthouse to identify incorrectly-sized images. Run the performance audit by going to Lighthouse > Options > Performance

4. Lazy Load your images 

Are your WordPress images loading slowly? It’s time to display images only when the visitors see them. This technique to save bandwidth and prioritize the content to render is called “Lazy Loading”. You should implement lazy loading on your images below the fold – the ones not being viewed by your visitor yet.

The issue: The browser starts loading images all at once.

The solution: Implementing Lazy Loading using a WordPress plugin.

5. Convert your images to WebP 

WebP provides lossless and lossy compression to images on the web, which will allow them to load faster. According to Google, WebP lossless images are 26% smaller in size compared to PNGs. And WebP lossy images are 25-34% smaller than JPEG images at equivalent quality. 

The issue: You use heavy formats.

The solution:  Convert your images to JPG, PNG, or WebP using a WordPress plugin.

  • Imagify – automatically converts your images to WebP format in your WordPress dashboard. 
Imagify - automatically converts your images to WebP format in your WordPress dashboard.

6. Use a caching plugin 

The caching plugins tell the server to store your files to disk or RAM. As a result, your web pages (and images) load faster, as they are “saved” directly from the cache. This includes page and browser caching, where the idea is to store the frequently accessed images in the local memory of the navigation device.

The issue: Your cache doesn’t store images.
The solution: Use a WordPress plugin to cache your images.

  • WP Rocket automatically applies 80% of the web performance best practices, including caching and lazy loading of your images, cleaning your code allowing Gzip compression, and much more. 

Now that we have seen the techniques you can apply to serve better images let’s see how a plugin like Imagify can help.

How to Make Your Images Load Faster with Imagify

In my opinion, a good image optimization plugin should reduce the size of the image while maintaining the visual quality. It must be easy to use and compress the images on my website and the future ones (on the fly). Imagify matches my description, and I’m going to show you how Imagify helped me speed up my site. 

Ready? 

It’s time to say goodbye to website images taking too long to load.

For this case study, we use GTmetrix, and we’ll be measuring the following KPI’s: 

  • Overall performance grade 
  • Cumulative Layout Shift (sudden shift of the content)
  • Fully loaded time 
  • Page size and % of the size occupied by images 
  • Number of HTTP requests  and % of the size occupied by images 
  • Image file size before and after optimization with Imagify 

Let’s start the audit using a test site built with Divi containing 10 images. 

Extract of my website built with Divi (Total: 10 images)
Extract of my website built with Divi (Total: 10 images)

Scenario 1: My website built with Divi – No Imagify

We simply put the URL of our page in GTmetrix and have a look at the different sections. The results are not too bad, but one of my Core Web Vitals is in orange, and I got a B score. 

Performance audit without Imagify - Source: GTmetrix
Performance audit without Imagify – Source: GTmetrix
KPIsScores (no Imagify)
Overall performance grade B – 87% 
CLS0.17s (in orange)
Fully loaded time 2.6s
Page size –  % of the size occupied by images Total: 2.44 MB – Images: 1.31 MB (54%)
Number of HTTP requests –  % of the size occupied by images Total: 75 – Images: 41 (55%)
JPGs size: 
160 KB
117 KB
27 KB 
103 KB
91 KB 
195 KB
74 KB 
75 KB
164 KB
13 KB

Furthermore, images take up 1.31 MB on 2.44 MB of my total page size, 54% of the Total Page Size. Out of 75 requests, 41 are made by the images, constituting 55% of the requests. 

My page details without Imagify
My page details without Imagify 

Now it’s time to see how my images are loading, thanks to Imagify.

Scenario 2: Auditing the same website and images – With Imagify

Let’s optimize my images using Imagify. To do so, simply activate the plugin and launch the “bulk optimization” from Settings → Imagify.

Bulk optimization - Imagify

There, you can decide to optimize your images on three levels, namely, Normal, Aggressive, and Ultra. I picked the Ultra mode to show you the best optimization level. 

Interesting note: If you don’t want to optimize all your images at once, you can select them from the library, just like I did for my flower shop:

Optimizing my 10 images with Imagify - Source: The WordPress library
Optimizing my 10 images with Imagify – Source: The WordPress library 

On average, Imagify saved 50% of my file size and converted them all to the WebP format: 

Imagify optimization in progress

Finally, it’s time to compare my KPIs performance before and after activating Imagify. The results are very encouraging! 

GTmetrix score after using Imagify
GTmetrix score after using Imagify
KPIsScores (no Imagify)Scores (With Imagify)
Overall performance grade B – 87% A – 91 %
CLS0.17s (in orange)0.1s (now in the green)
Fully loaded time 2.6s2.6s
Page size –  % of the size occupied by images Total: 2.44 MB – Images: 1.31 MB (54%)Total: 1.78 MB -Images: 658 KB (36%)
Number of HTTP requests –  % of the size occupied by images Total: 75 – Images: 41 (55%)Total: 72 – Images: 38 (52%)
JPGs size: 
160 KB
117 KB
27 KB 
103 KB
91 KB 
195 KB
74 KB
75 KB
164 KB 
13 KB
JPGs size (-50% saving):
82 KB
60 KB
13 KB
56 KB
42 KB
98 KB
37 KB
41 KB
90 KB
6 KB


We can see that Imagify made my page lighter by compressing the images, resizing them, and converting them to the WebP format. We even got an A on GTmetrix!

Also, we noticed that the space taken by images was lower when using Imagify. And last but not least, my website is still looking great, and I don’t have any blurred images. 

Wrapping Up 

It’s not always easy to identify what is causing a website’s page load speed to be slow. There are many responsible factors such as unoptimized images, a high number of HTTP requests, bulky codes, and JavaScript issues, for example. It may be worth your time to figure out what’s going on because if you don’t fix this issue soon enough, it could lead to revenue loss. 

In our audit, we saved up to 50% file size in one single click, using Imagify:

Optimizing images should be on the top of your list, and look how much Imagify makes it convenient for you! Try to optimize images on your WordPress site using Imagify’s free trial and tell us how much data you have saved. 

Imagify, decrease the size of your images, increase the speed of your website: try it for free
Comments 3
Add Comment

Ready to optimize
your image?
Sign up for free in few seconds