How to Disable WordPress Automatically Generated Images – Complete Guide

-

[ WordPress Image Sizes ] As you may know, WordPress creates numerous copies of all images uploaded via the WP Media Library. These additional images are generated in various sizes, depending on your settings and other factors. This may be totally fine in general, but if you are working with lots of images on your site, the extra files can really eat up your disk space. This can be wasteful, specially if your site does not make use of all the extra images. So to help you conserve resources, eliminate waste, and keep things running as light as possible, this guide spells out everything you need to disable (or customize) all WordPress automatically generated images.

Learn how to disable any/all of WordPress’ auto-generated images to dial in the perfect configuration for your site.

Contents

First an example..

To get a better idea of what’s happening and why it’s important, consider my personal found-images site, eChunks.com. This site is where I like to post weird/inspiring/found images. As of now, there have been over 800 images uploaded to the site via the WP Media Library. So if I hadn’t taken measures to stop WordPress from auto-generating multiple copies of each image, that number of 800 would be more like thousands of images.

Do the math..

So running with the eChunks.com example, let’s do some quick math. We have a WordPress site with 800 original images, each averaging around 2MB in size. So collectively the original 800 images weigh around 1,600 MB or about 1.6 GB. Now let’s let WordPress do its thang and create extra copies of each image in various sizes. As of version 5.3, WordPress creates the following extra images for every image that is uploaded via the Media Library (and/or Visual Editor):

Image Size Dimensions
Thumbnail (Size based on Media settings)
Medium (Size based on Media settings)
Large (Size based on Media settings)
Medium Large 768px
2x Medium Large 1536px
2x Large 2048px
Scaled 2560px

Okay so now to get an idea of actual file-sizes for all these generated images, let’s consider the average case where each of the 800 original images weighs around 1.5MB to 2MB. The results would look something similar to this:

Image Size Dimensions File Size Total
Thumbnail (Size based on Media settings) 10KB 8MB
Medium (Size based on Media settings) 20KB 16MB
Large (Size based on Media settings) 100KB 80MB
Medium Large 768px 50KB 40MB
2x Medium Large 1536px 200KB 160MB
2x Large 2048px 400KB 320MB
Scaled 2560px 500KB 400MB

Adding that right column gives a grand total of 1024MB or 1.024 Gigabytes! Considering that the entire WordPress core weighs in at less than 50MB, along with a bunch of plugins and themes is still gonna be less than a couple hundred megabytes. So relative to the entire website, the amount of disk space required by all of those extra images is considerable to put it mildly.

And that’s for a typical site with only 800 images; some sites make use of a LOT more than that, not to mention high-resolution images and images that weigh a lot more than the average numbers used in the previous calculations. So it’s easy to understand, if WordPress generated images are not kept in check, the amount of required disk space can really add up.

But wait there’s more..

So far we’ve got WordPress generating seven additional images for each original uploaded image. But that’s not all of the extra images that may be in play. Depending on your theme, even more additional image sizes may be created via the following WordPress core functions:

  • set_post_thumbnail_size() — Creates a custom size for Featured Images
  • add_image_size() — Creates extra images of any specified size(s)

For example the WordPress default theme named “Twenty Fifteen” adds another extra generated image with this line:

set_post_thumbnail_size( 825, 510, true );

So that one extra image, plus the seven other default generated images, plus the original uploaded image, all looks like this on the server:

[ WordPress image files on server ]In addition to the seven extra images generated by WordPress, extra images may be added by your theme, as shown here for the Twenty Fifteen theme.

To summarize: WordPress generates at least 7 extra image sizes for each uploaded image. And then depending on your theme and plugins, any number of additional image sizes may be created as well. For some sites, this is useful or no big deal; for other sites, it’s something that’s completely unnecessary at best, wasteful overkill at worst.

Solution: Disable unwanted image sizes

The above scenario is only one example to illustrate the point. The sum total of image weight could be (much) more or less depending on your images, media settings, theme functions, and so forth. Fortunately, I continually disable the new WordPress image sizes that are added over the years, so I’ve been able to avoid massive disk bloat on my own sites.

So what’s the solution? How to manage all those extra images and conserve disk space? The trick is understanding how to disable each of the extra image sizes, so you can add the required code to disable (or customize) the ones that are not needed. Here are the magic recipes for controlling them:

Caution: Do not disable any image sizes that are required by your theme!

Disable Thumbnail Size

To disable generation of thumbnail-size images, set the “Thumbnail size” option to “0” (under Settings > Media > Image sizes). Setting to “0” disables auto-generation of this size image. Set to any other value to customize the size instead of disabling. Here is what the setting looks like under the Settings menu in the WP Admin Area:

[ WordPress Media Settings ]To disable or customize Thumbnail, Medium, and Large size images, visit this screen in the WP Admin Area. Enter “0” (without the quotes) to disable any/all of these extra size images.

Alternately, if you prefer to disable the thumbnail-size images programmatically, you can add the following code snippet to your theme functions.php (or add via simple/custom plugin):

function shapeSpace_disable_thumbnail_images($sizes) {

        unset($sizes['thumbnail']); // disable thumbnail size
        return $sizes;

}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_thumbnail_images');
Tip: the above technique can be used to disable other image sizes, as shown in some of the following techniques. So you can combine some of the size-disabling techniques into one single code snippet.

Disable Medium Size

To disable generation of medium-size images, set the “Medium size” option to “0” (under Settings > Media > Image sizes). Setting to “0” disables auto-generation of this size image. Set to any other value to customize the size instead of disabling.

Alternately, if you prefer to disable the medium-size images programmatically, you can add the following code snippet to your theme functions.php (or add via simple/custom plugin):

function shapeSpace_disable_medium_images($sizes) {
        
        unset($sizes['medium']); // disable medium size
        return $sizes;

}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_medium_images');

Disable Large Size

To disable generation of large-size images, set the “Large size” option to “0” (under Settings > Media > Image sizes). Setting to “0” disables auto-generation of this size image. Set to any other value to customize the size instead of disabling.

Alternately, if you prefer to disable the large-size images programmatically, you can add the following code snippet to your theme functions.php (or add via simple/custom plugin):

function shapeSpace_disable_large_images($sizes) {
        
        unset($sizes['large']); // disable large size
        return $sizes;
        
}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_large_images');

Disable Medium Large

To disable the “Medium Large” size images, add the following code snippet to your theme’s functions.php file:

function shapeSpace_disable_medium_large_images($sizes) {
        
        unset($sizes['medium_large']); // disable 768px size images
        return $sizes;
        
}
add_filter('intermediate_image_sizes_advanced', 'shapeSpace_disable_medium_large_images');

Disable 2x Medium Large

To disable the “2x Medium Large” size images, add the following code snippet to your theme’s functions.php file:

function shapeSpace_disable_2x_medium_large_images($sizes) {
        
        unset($sizes['1536x1536']); // disable 2x medium-large size
        return $sizes;
        
}
add_filter('intermediate_image_sizes_advanced', 'shapeSpace_disable_2x_medium_large_images');

Disable 2x Large

To disable the “2x Large” size images, add the following code snippet to your theme’s functions.php file:

function shapeSpace_disable_2x_large_images($sizes) {
        
        unset($sizes['2048x2048']); // disable 2x large size
        return $sizes;
        
}
add_filter('intermediate_image_sizes_advanced', 'shapeSpace_disable_2x_large_images');

Disable Scaled

To disable the “Scaled” images, add the following code snippet to your theme’s functions.php file:

add_filter('big_image_size_threshold', '__return_false');

Disable Other Sizes

For any extra images generated via set_post_thumbnail_size() and add_image_size(), you can use remove_image_size(). Here is an example:

function shapeSpace_disable_other_images() {
        
        remove_image_size('post-thumbnail'); // disable set_post_thumbnail_size() 
        remove_image_size('another-size');   // disable other add image sizes
        
}
add_action('init', 'shapeSpace_disable_other_images');

The key here is to know the name/slug of the custom image sizes you want to remove. For set post thumbnail (i.e., Featured Image), it’s always post-thumbnail. For other images added via add image size, the slug name will vary depending on your theme or plugin (whichever is responsible for adding the extra sizes). So to implement, first check your uploads directory and/or theme functions file to determine which sizes are being generated. Some themes add a bunch of extra image sizes, others do not, it just depends on the theme.

Shut them all down!

Before our parting shot, here is an “all-in-one” code snippet that combines and streamlines all of the above techniques into a single, plug-&-play code snippet:

// disable generated image sizes
function shapeSpace_disable_image_sizes($sizes) {
        
        unset($sizes['thumbnail']);    // disable thumbnail size
        unset($sizes['medium']);       // disable medium size
        unset($sizes['large']);        // disable large size
        unset($sizes['medium_large']); // disable medium-large size
        unset($sizes['1536x1536']);    // disable 2x medium-large size
        unset($sizes['2048x2048']);    // disable 2x large size
        
        return $sizes;
        
}
add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes');

// disable scaled image size
add_filter('big_image_size_threshold', '__return_false');

// disable other image sizes
function shapeSpace_disable_other_image_sizes() {
        
        remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() 
        remove_image_size('another-size');   // disable any other added image sizes
        
}
add_action('init', 'shapeSpace_disable_other_image_sizes');

That code snippet combines all of the techniques required to disable all of WordPress generated images (leaving only the original uploaded image). The only editing that may be required is for that last function, where “other” image sizes are disabled; there you may want to edit the another-size slug to match any other sizes that you want to disable, or if there are no other sizes, simply comment out or remove the line.

Pro Tip: In addition to all the extra images generated by WordPress, you may also want to control or disable all of the extra responsive image functionality that WordPress provides. Here is a free plugin to make it super easy: Disable Responsive Images Complete.

Wrap it up..

Granted, controlling WordPress image sizes may be more important for sites with a lot of images. But even if your site only uploads a few images every now and then, keeping your files as simple and lightweight as possible makes for a leaner, faster, more optimized WordPress-powered website.




from Perishable Press https://ift.tt/34Ng26o

Comments

Post a Comment

Popular posts from this blog

20 Free Professional Resume Cover Letter Format Templates for Jobs 2020

-
Image
Are you getting ready to apply to jobs and want to make a cover letter? Using a professional cover letter template will save you time and ensure that you've got a professional design. This cover letter template and hundreds more can be found on Envato Elements. Using a premium cover letter template can not only save you time, but you'll have a high-quality template for your letter. All you need to do is add the information you'd like to and customize the template and you're done. In this article, we'll explore some of the best premium and free cover letter templates available online. Find the Best Premium Resume Cover Letter Templates on Envato Elements (With Unlimited Use)  Envato Elements is an all-you-can-download resources for professionals and creatives, including good cover letter templates . With Elements, you pay a low monthly fee to get access to: resume and CV letter templates stock photos and royalty free music WordPress themes and more
Read more

How to Effectively Manage a Remote Team

-
Image
According to Flexjobs , remote work has grown by 44% in the last five years. And that statistic was published  before  the remote work boom of 2020. Remote work is here to stay.  Managing remote teams requires planning, and you'll see the best tools and techniques in this article. (Image source: Envato Elements. ) If your team is navigating the switch to working together while apart, you might be facing challenges that you didn't encounter while sharing an office. Learning how to manage a remote team is a must in 2020. Working remotely can unlock your team's full potential. But it takes a conscious effort to ensure that everyone stays connected. In this article, we're going to share the top tips, tools, and techniques so that you never miss a beat while managing remote workers. Three Top Benefits of Working Remotely Too many workplaces see managing remote workers as purely a challenge. In reality, working remotely lends itself to benefits that lead to a happier a
Read more

How to Create Gantt Charts in PowerPoint With PPT Templates

-
Image
You might not think of Microsoft PowerPoint as a project management tool. But there's a reason it's used for project updates and by project teams. The ease-of-use and flexibility of PowerPoint work for any project management professional.  It's easy to create a Gantt Chart in PowerPoint (PPT) once you know how. When it comes to managing projects, you need tools to make them manageable. That includes process charts to help your team collaborate efficiently. Project management professionals often turn to  Gantt charts  to visualize the parts of the project. In this tutorial, you'll learn how to create a Gantt chart in PowerPoint . You'll learn how to use an impressive template to build a Gantt chart that ensures that every member of your project team knows how their part in the project fits into the bigger picture. Let's dive in! What's a Gantt Chart? Imagine you're building something that requires collaboration with others. That could be a website,
Read more