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.

wp-content

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.

wp-content

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.

Feature enabled

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.

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

Media Settings

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.

Media Settings

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.

Index

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.

Note
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.

Index

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:

Dashboard

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.

Dashboard

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

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

Update File

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.

dialog box

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.

Note
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

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more