We all like nice photos. At least most of us. But using them on WordPress based site might become a terrible nightmare.

One of our customers upgraded his web hosting plan several times, but he ran out of disk space again and again. After hearing his trouble, we offered to make a quick check to figure out what might cause that issue. We noticed immediately that uploads directory was taking a huge amount of disk space.

Digging deeper we figured out 2 main reasons which caused an increment of disk usage:

  • uploaded images were not optimised;
  • WordPress generated almost 20 resized copies of each uploaded image.

We reduced usage of disk space by approx 90%!

This case made us more curious, and we examined more WP sites and figured out that actually almost all WP sites are infected by this serious issue.

If you use only a few images, you don’t notice waste of space, but if you have hundreds or thousands images, then this issue becomes a nightmare soon or later. For example, you just cannot make backups of your website on day as it takes tens of gigabytes of space.

But disk space isn’t your only concern. Even if you might have hosting plan with unlimited disk space, you do not have unlimited inodes. Each file on the server is equal to 1 inode. Inode is file metadata record needed by the file system. If you exceed your inodes limit, then your hosting service stops to function properly and you have to hire an expert to clean up the mess.

What causes consume of disk space & inodes?

Consume of disk space and inodes on WordPress based sites is caused mainly by 3 factors:

  • Upload of huge, not optimised images.
  • Poorly configured WordPress.
  • Poorly designed WordPress theme.

How to optimise uploaded images?

An option is to downscale and optimise images before you upload these on your WordPress driven website. But that’s not a real solution on these days, as is available mostly for experienced photographers or web developers. 

Mobile photography and usage of mobile devices (tablets, smartphones) has become a standard and we want to upload photos directly from such devices. This leads us to the only bulletproof scenario in which case images should be scaled down and optimised by WordPress on server side, not on the device from which we upload these.

We found the “Robin image optimizer” to be one of the best solutions, as this works on most hosting platforms with no issues. Robin image optimizer does both – scales down and optimises uploaded image automatically and immediately when uploaded. It’s easy to configure according to your personal needs and favour.

Let’s see how it works.

For example you have this nice Christmas Market image, which takes ~5MB of disk space and has dimensions 6000×4000 pixels.

If you do not scale down this image and do not optimise it, this image will take ~5MB of disk space. 100 similar images will take approx 0.5GB of disk space! This will be huge loss of space!

By using Robin image optimizer you can drastically reduce space consumed by this image. Below are settings we used. As you see below we used Lossy image compression and image scaling down to 2048 pixels.

And bAnd below is an optimised image. As you see image size is reduced over 10 times! 100 similar images will take only ~39MB now instead of 0.5GB.

But the story doesn’t end here yet because we have another trouble to solve.

Remove WordPress extra image sizes

But there is another issue to solve now. WordPress generates 7 extra resized copies of image you uploaded, which makes all together 8 images with an original image.But there is another issue to solve now. WordPress generates 7 extra resized copies of image you uploaded, which makes all together 8 images with an original image. All these extra images will consume disk space.

DescriptionEditableSize (pixels)
originalnooriginal size
thumbnailyes150×150
mediumyes300×300
largeyes1024×1024
medium_largeno768×0
1536×1536no1536×1536
2048×2048no2048×2048
thresholdno2560×2560

Only 3 to these image sizes can be changed on Media Settings page.

Default WordPress Media Settings.

But let’s see what happens on server side after we have uploaded our image.

List of extra images (selected image is original image).

As you see from screenshot above, 7 extra images are generated from original images and all these together consume ~1.7 MB additional disk space. But keep in mind that these are not actually all extra images which are generated, because your WordPress theme will generate too some extra images, which we discuss later.

Based on knowledge above, we can reduce the amount of images generated by adjusting WordPress Media settings.

When a new image is uploaded, WordPress will detect if it is a “big” image by checking if its height or its width is above a big_image threshold. The default threshold value is 2560px. If you use proper Media settings and Robin Image Optimizer, there is no need for this extra threshold image. You can switch this feature off by using some plugin or alternatively you can add an extra line into your Theme Functions file:

add_filter( 'big_image_size_threshold', '__return_false' );

As we are replacing uploaded original image with resized image, we do not need sizes 1536×1536 and 2048×2048 anymore.  We can use some plugin to disable these sizes or add some code into Theme Functions file:

// Disable extra image sizes
function bps_dis_eis($sizes) {
    unset($sizes['1536x1536']);
    unset($sizes['2048x2048']);
    return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'bps_dis_eis');

Thanks to solution above, we have got rid of several extra images and saved a lot of disk space and inodes. Uploaded image with extra resized copies takes instead of ~6.7MB only ~660KB now!

Uploaded image and it’s resisted copies.

But the story doesn’t end here yet because we haven’t taken in count images generated by WordPress Theme.

Reduce amount of theme generated images

Sadly, there is no one simple solution for handling Theme generated images easily. Each theme comes with its own pre-defined extra sizes and might generate up to 20 extra images! Some WordPress themes are poorly designed and you just have to switch the theme to overcome wasted space issue.

On screenshot below we see all images generated, including Theme defined image sizes. 14 extra images are generated, which all together consume 2MB of disk space.

Images generated by WordPress and used theme.

Imagine that you have nice gallery from your last sightseeing trip with 60 photos. 840 extra images are genereated additionally which will take ~120MB. And actually your theme might need only 1-3 of these 840 extra images.

Theme we used for demonstration has defined 8 extra image sizes. Are all these needed?

- epcl_admin_thumb	100x100 / 1:1
- epcl_widget_thumb	120x120 / 1:1
- epcl_classic_post	850x600 / 17:12
- epcl_single_standard	950x500 19:10
- epcl_single_related	600x450 / 4:3
- epcl_large		1600x1200 / 4:3
- epcl_single_content	700x450 / 14:9
- epcl_page_header	1950x500 / 39:10

2 of these image sizes have aspect ratio 1:1 which is the same used of WordPress thumbnail. These image sizes are not needed actually and WordPress thumbnail image should be used instead. You can easily scale image by using some CSS code.

As we see most of these sizes are landscape images. And large or original image could be used instead if some proper CSS/HTML code were used.

Examination the code of this theme revealed that none of these sizes were needed.

For example image size epcl_classic_post were used once:

function epcl_get_link_format($link_url){
?>
	<div class="post-format-link post-format-wrapper">
        <div class="featured-image">
            <a href="<?php echo esc_url($link_url);?>" class="thumb hover-effect" target="_blank">
                <span class="fullimage cover" style="background-image: url(<?php the_post_thumbnail_url('epcl_classic_post'); ?>);"></span>
            </a>
        </div>
	</div>
<?php
}

As we see from code above, this image was used as background image!

<span class="fullimage cover" style="background-image: url(<?php the_post_thumbnail_url('epcl_classic_post'); ?>);"></span>

Instead of defining new image size, the theme author could use easily image size “large” and apply proper CSS to scale and adjust this background image.

Conclusion

We do not recommend buying and use any WordPress theme which uses add_image_size. These themes are time bombs if you post often image content. You might end up paying thousands of euros to maintain this site one day when you run out of space or inodes.

An alternative option is to hire WordPress expert who can examine the code of theme and switch these custom image sizes off for you.

Do not use ticking time bombs.