Cloudinary Blog

How to Prevent WordPress from Generating Multiple Images

How to Prevent WordPress from Generating Multiple Resized Images

In this tutorial, we're going to learn how to prevent WordPress from generating multiple (resized) versions of an image. As of WordPress 4.8.1, with the default Twenty Seventeen theme, WordPress will generate six additional resized versions of a single image. I've tested it on a clean installation, and here's a screenshot to prove it.

WordPress 4.8.1, with the Twenty Seventeen theme, generating six resized versions for every image uploaded.

Generating this many images might negatively affect your WordPress host's performance. Specially while taking backups. How? Let me explain.

In the example above, we see that there's a 99.3 percent increase in the amount of storage used for uploading a single image. That's almost twice the size.

While most web hosts provide unlimited storage, this would significantly increase the backup size and duration.

Cloudinary users would know that one can directly obtain a resized version of an image using Cloudinary's image optimization features, simply by adding parameters in the image URL. But that's a story for another day.

Why Does WordPress Generate Multiple Resized Versions of each Image?

Good question! First, it's important to note that both WordPress and the active theme generates multiple resized versions of an uploaded image.

The smaller version of the image is served to a mobile device, the larger to a desktop device, and so on. The active theme might have custom post types, (a popular example being the portfolio), which could require certain fixed dimensions of the image.

Responsive images was introduced in WordPress 4.4. It scans the device's viewport and serves the optimal dimension of the image to the browser. This approach reduced the size of the image to be loaded, resulting in faster loading times and better user experience.

It's OK to Have Multiple Versions of Uploaded Images

Here's the situation - and I cannot stress this enough - the backup size/time issue described above is not that bad. Rather, for a regular WordPress blog, it is absolutely fine to have multiple versions of the uploaded images.

Here's why:

WordPress is an intricate system with a lot of moving parts. Removing a theme's default behavior (in our case, generating multiple versions of the behavior) might not be the best idea. It could result in broken images across your site - both in the desktop and mobile responsive versions - inadvertently hurting image SEO and hampering the user experience.

Therefore, it requires in-depth understanding of theme's functioning and experience in WordPress development. This tutorial should not be used by intermediate WordPress users on a live site.

Side Note: If you're like me and want to take things apart in preset to understand them - be my guest. But please use an experimental WordPress installation!

How to Prevent WordPress From Generating Multiple Image Versions

In order to prevent broken links, I've structured this tutorial in three phases.

  • Phase One: Identifying the images we could safely prevent from generating further

  • Phase Two: Committing the changes in two parts:

  • Part 1: Changing the core WordPress settings

  • Part 2: Editing the active theme's functions.php file

  • Phase Three: Looking at the methods one could use to delete the existing resized images.

Phase One: Identifying Images to be Removed

In this phase, we identify the images that can be safely removed, without breaking the website. As a reference, we'll use the same image uploaded in the beginning of this tutorial.

The first step is to prepare a list of all the post types you are currently using or might use in the future. You will need to identify the corresponding image sizes for each post type. For instance, if you plan to use the portfolio layout of a multipurpose theme, you should retain that image size. However, if you prevent WordPress from generating this particular image size, you might not notice it now. But the moment you use portfolio post type, you would see broken images.

Before you can proceed with this phase, you need to be absolutely certain about the dimensions of the image you want to use in your site.

Would This Affect Responsive Images?

As I mentioned earlier, WordPress' default responsive property enables you to serve different sizes of the same image, based on the visitor's viewport. In other words, a smaller image size would be served to a visitor from a mobile browser and a larger image size would be served to a visitor from the desktop browser.

Preventing WordPress from generating multiple images might have a negative impact on performance and user experience.

Size comparison of resized images in WordPress

Let's say you have prevented WordPress from generating any additional image sizes.

The smaller size of the image would never be generated, and only the original image would exist. In our case, the original image's size is 544KB. The same image would be served to a visitor from a mobile browser or a desktop browser.

Now let's say you did not prevent WordPress from generating additional image sizes. Different versions of the image would exist - including small, medium, large. Only in this case, the smaller sized version of the image would be served to the mobile browser. The size of the smaller image is 68KB, which is 87.5 percent smaller than the original image, which equates to an 87.5 percent bandwidth saving that would lead to a faster loading time and better user experience.

These savings are possible if you simply left WordPress alone to do its job!

Not to mention if you're using Cloudinary, you would easily be able to generate browser-dependent optimized images (in any resolution), simply by adding parameters to the image request URL. If you're a WordPress developer looking to implement a scalable, content delivery network- (CDN) powered, on-demand image transformation and optimization in your WordPress site, you should check out Cloudinary.

On the other hand, some multipurpose themes generate excessive number of images, which aren't really required at all times. One might only be using the homepage and the blog layout of a certain multipurpose theme. In such cases, you could identify the image sizes you need and safely do away with the ones you would not need.

What About Featured Images?

A blog post's featured image visually communicates the premise of the article, and increases click rate, readership and shareability. In other words, featured images are super important.

Based on your blog's homepage design, you might have a smaller sized version of the featured image used in the home page, or the blog pages. However, in the individual article view, you might be using a large version of the featured image. Most Medium-styled themes use this technique. In such a case, you might want to prevent WordPress from generating custom image sizes, except the featured image.

This is where things get tricky. Since we all use different WordPress themes, each theme will have its own unique code. It would be quite difficult for this tutorial to suggest a code change for each theme.

Sample code to create custom image sizes in WordPress. Credits: WPShout

Rather, it would be much simpler if we used the method outlined by this excellent article from WPShout. Read the bit under "Adding WordPress Custom Image Sizes in function.php" to create you own custom featured image sizes.

At the end of phase one, you have identified the images that you would want to remove, i.e. prevent WordPress from further generating these image sizes.

Phase Two: Preventing WordPress from Generating Custom Image Sizes

We'll divide this phase into two parts. In the first part, we'll look at changing the default WordPress settings. The second part will deal with modifying the theme's functions.php file.

Part One - Changing WordPress' Media Settings to Prevent Generation of Custom Images

This part is fairly simple.

1. Login to your WordPress dashboard and go to Settings > Media.

Default WordPress Image sizes

You'll see the default sizes WordPress resizes each image. To prevent WordPress from generating these image sizes, simple change the values to 0.

Preventing the WordPress core from generating multiple image sizes

Let's put this technique to test now. I'll upload another image in WordPress and check whether the images are being generated. The uploaded image is night shot of the NYC skyline, with a resolution of 5760x3840 (22 MP).

Let's see how many images are generated.

Before and after effect of preventing WordPress from generating resized images.

Yes, it works! You would notice that three images are not generated - exactly the ones that we disabled in the last step.

On a separate note, when this image is uploaded to Cloudinary, it can be retrieved in any resolution by simply changing a single parameter. When a browser requests an image, Cloudinary detects the browser type (Chrome, Firefox, etc) and serves the most optimized version of that image, which is supported by that bowser.

Part Two - Modifying the Theme's functions.php

Now let's look at changing the active theme's settings, in order to prevent it from generating additional images. Here it's important to reiterate that you should do this only if you are absolutely certain about how the active theme displays images in various posts and pages.

In our case, the Twenty Seventeen theme generates three custom images. After we disabled the WordPress core settings from generating resized images, there were three images that we still generated. This was done by the active theme. Depending on the theme, this number would vary. Most multipurpose themes use more than five custom image dimensions.

Custom image sizes generated by WordPress

How to Edit a WordPress Theme's functions.php from the WordPress Dashboard

Launch your WordPress dashboard, go to Appearance > Editor and click on Theme Functions, as shown in the screenshot below:

How to navigate to Theme Functions using the WordPress Editor

Next, we want to find all occurrences of the two functions and delete them. It's always a good practice to comment out a piece of code, rather than deleting it. This gives the developers a chance to investigate (in case something goes wrong) and makes it easier to revert the changes.

The first function we want to disable is the addimagesize() function. This function is used for generating additional images sizes by the theme. The second function we want to disable is called setpostthumbnail_size(). Doing this would stop your theme from generating post thumbnail size in WordPress.

We need to comment out all occurrences of these functions. To do this, simply use your browser's Find utility. Press Ctrl+F (or Cmd+F on a Mac) and type addimagesize. Your browser will highlight all occurrences of this text in the website.

Once you find these lines, add '//' at the beginning to comment them out.

Similarly, find all occurrences of setpost-thumbnailsize and turn them into comments.

The following screenshot highlights the same.

Commenting out the addimagesize() function in a theme's functions.php file

Once you've commented the lines, remember to save the settings.

How to save settings in the theme's functions.php file from the WordPress dashboard

In our example, the Twenty Seventeen theme did not use the setpostthmbnail_size() function. Upon disabling these functions, the additional images were not generated by WordPress.

Phase Three: Deleting Old Images

Depending on how long you've had your WordPress blog or the number of images uploaded, you could have multiple versions of each image in your media library. If you are certain about the image sizes you don't require, you can safely delete them.

There are a couple of ways of batch deleting images from WordPress.

Batch Deleting Images via SSH

This method works if you have SSH terminal access to your WordPress host. While most shared or managed WordPress hosts do not allow this process, it is the fastest one, provided you've used Linux/UNIX before. It uses the classic find and delete feature in the bash shell.

First, we'll navigate to the WordPress Media directory, i.e. /wp-content/uploads directory and execute the find and delete function.

We need know the (i) resolution and (ii) extension of the images we want to delete.

For example, to delete all the 100x100px JPG images, the command would be:

find . -name "*100x100.jpg" -type f -delete

This command would recursively delete all JPG images ending with 100x100 in the filename. Check out this helpful AskUbuntu answer for more info on the same.

We can repeat this process for each resolution we want to remove.

Batch Deleting Images via FTP

FTP is one of the easiest ways to batch delete files, albeit a bit time-consuming. Simply connect to your WordPress host using your preferred FTP client (we'll use FIleZilla in this tutorial).

Navigate to the public_html/wp-content/uploads directory.

From FileZilla's main menu, select Server > Search Remote Files.

In the new dialog box, fill in the following information, as shown in the screenshot below.

Recursively search and delete images in WordPress via FTP using FileZilla

  1. The Search directory should be the uploads folder

  2. You can add multiple parameters to the search query. In our case, we want to remove all images with 100x100 resolution. Hence, we've selected that the filename should contain the phrase 100x100. In case you wanted to delete only JPG files (optional), you could add another parameter, which mentions that the filename should end with jpg.

  3. Once the parameters are defined, click on Search

  4. FileZilla will query all the folders under the uploads directory and return the relevant results.

  5. Select the files, right-click and click on Delete.

That's it! Filezilla will delete all the files one-by-one.

Wrapping Up

Preventing WordPress from generating images is a delicate task, which, if done improperly, could lead to broken image links across your site. You might save a few minutes on the backup time, but you  run the risk of hampering the user experience. Remember, broken images indexed on Google might lead to lower SEO scores, which might affect your organic traffic and SERP ranking.

However, if you are absolutely certain about the image resolutions you want to use, you can prevent WordPress from generating additional/unwanted image sizes. There are two ways to do this. First you can change WordPress' default Media settings. The second step is to investigate the active theme's functions.php and commenting out the line of code that call the addimagesize() and setthumbnailpost_size() functions.

Finally, if you want to delete the existing images that you no longer wish to use, you can delete them via FTP or SSH. Phase three of this tutorial describes the matter in depth.

On a separate note, if you are running an image-heavy website, such as a photo-blog or a travel blog with user generated content, a dedicated image optimization and delivery solution would do wonders to your user experience.

Cloudinary is the perfect solution, thanks to it's on-the-fly image optimization and transformation capabilities. Plus its multi-tier content delivery network delivers images in the shortest time possible to your website visitors. Manually resizing and optimizing images are a thing of the past, thanks to Cloudinary's range of on-the-fly transformation features.

What are your thoughts on WordPress generating multiple image sizes? Did this tutorial change your mind about altering image sizes? Let us know in the comments below!

*Originally posted on Loud Techie

Recent Blog Posts

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more