How to remove unused images in WordPress?

Unused image sizes
Unused image sizes

Images always play an important role in expressing our thoughts, actions, ideas, expressions and so on. Being a blogger, I love using images which adds more insight to my topic and it also has an added advantage of being viewed or clicked in any social media as compared to the blogs without images.

It goes without saying that the images add toll to the server and hugely affects the website’s speed, but having said that, as a developer who works with WordPress, I would like to make the best use of images and yet keep its number as optimised as possible.

In this blog we will discuss how we can lower the number of images used in a WordPress site.

WordPress and Images

WordPress has always handled images very well and keeps improving with every new version. It is us the users who bloat the website with unnecessary images. Before moving forward with how to remove the unnecessary images in WordPress, let’s try to understand how WordPress and images work together.

media settings

media settings

By default WordPress has three image sizes namely thumbnail, medium and large, the dimensions of which can be adjusted from Settings -> Media section of WordPress dashboard. When an image is uploaded to the media, WordPress creates three other images along with the original size and add it to the uploads folder which makes the tally to four (including the original) for each image upload.

This might now look like a small number to you, but think of an instance when your website or blog has a thousand posts and suppose each post has 2-3 images, then these extra images sums up to 6000-9000, which is surely a huge number taking up your server space, and space is something you are always complaining about.

Themes and plugins

Themes and plugins that we use, also adds image sizes which in turn adds up to the number of images getting added. For examples many themes have sliders, header-images etc, which needs to be of definite size to work with the design.

Plugins like WooCommerce adds three of its image sizes to the present lot which is used in the shop, catalog and product single page.

This is just an example to show how the number of unused images piles up as we move ahead with our WordPress projects.

Solution

There is no straight and only solution to this problem, but we can follow a couple of steps and reduce it. Having said that one needs to know what are the image sizes needed for their website and what not. A proper plan before the beginning of the project would help a great deal here. Try to check with the design and make sure you are spot on with the image sizes. However do not worry, it is not something you cannot get back from, but more on that towards the end of the blog.

Once you have decided the image sizes to go with, now is the time to deactivate or remove the default image sizes. Set the width and height to zero in Settings -> Media section to deactivate it for the default image sizes. Now let’s see how to do the same using codes, after all we love codes, don’t we? 😉

I have all the codes snippet in github. You can check it out there and download it if needed.

Deactivate the default image sizes

You can add this above code snippet in the theme’s functions.php or plugin’s main file to do the magic. Now all the images you upload to the media will not have the versions of default image sizes in it. This works great, but then there are more image sizes which get added with the themes and plugins that we use. Let’s deactivate those too.

Like we have discussed above the themes and the plugins like WooCommerce also adds image sizes. Let’s now see how to find out the additional image sizes. You can check that using the following snippet.

Additional image sizes

Make sure to use the above snippet in a development environment as it will display an array of additional image sizes in the admin dashboard, though your front end is not bothered. This will give you the list of additional image sizes that are there and looking at that you may decide what to deactivate and what to keep.

The themes and plugins uses the add_image_size to add image sizes and these can be removed by the following snippet.

The above will now remove the shop_single image size added by the WooCommerce plugin. You can use the different image size names in the same way to deactivate those. Now if you run the above test function code to check the additional image sizes you would see the shop_single is not there any more.

Conclusion

Now the above works when you are going to start a project, but how to carry out the same to an old project. Glad you asked, the above still stands correct for this situation too, but only thing is this is going to work for any images uploaded after this and won’t work for older images.

The unused sizes of the older images can be chosen and deleted by using the DNUI (Delete Not Used Image) plugin, which is available in wordpress.org and the above codes take care of the rest.

I have used this for a long time now and believe me my clients are very happy that I help them save more space and eventually money.

Please give this solution a try, and let me know if anything comes up in the comments below.

facebook-profile-picture

Maruti Mohanty

I am a happy go lucky WordPress Developer, who loves biking, movies and learning different languages

   

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: