How to Prevent the Generation of Image Thumbnails to Save Server Storage Space, When Using Jetpack Image CDN

Jetpack’s on-the-fly image resizing makes WordPress’s thumbnail sizes redundant. Disabling it can save you storage space. Here’s how to do it.

Jetpack’s on-the-fly image resizing

Jetpack’s image CDN is an amazing tool. It does magic with the essential task of optimizing your site’s images, for faster page load. One of its best features is serving resized version of an image on-the-fly according to the <img> tag width and height attributes. With a little tweak, this feature also enables you to save server storage space and clean up your uploads folders.

Thumbnail sizes

When uploading an image to WordPress, smaller-sized versions of it are automatically generated. The default registered sizes are “thumbnail”, “medium”, “medium_large” and “large”. But themes and plugins can register more sizes. These image versions are actual image files, sitting on your server.

The generation of different image sizes is for performance purposes – for not to serve images bigger than needed in a certain context. It is a nice feature, but not perfect. In practice, images can appear on your site in any size. As you can’t generate an infinite number of resized image versions – most times the served image will be close to the displayed size, but not quite the same.

But, anyway, as Jetpack resizes images on-the-fly, WordPress’s generated thumbnail sizes are redundant. By removing them you can save server storage space, and keep your uploads folder nice and tidy. There are two steps to the process: 1) Stop generating new resized image versions; and 2) Delete existing resized image files from the server.

Stop generating new resized image versions

<?php add_action('admin_init', 'remove_thumbnails_sizes', 999); function remove_thumbnails_sizes() { global $_wp_additional_image_sizes; foreach (get_intermediate_image_sizes() as $_size) { if (in_array($_size, ['thumbnail', 'medium', 'medium_large', 'large'])) { update_option("{$_size}_size_w", 0); update_option("{$_size}_size_h", 0); update_option("{$_size}_crop", 0); } elseif (isset($_wp_additional_image_sizes[$_size])) { remove_image_size($_size); } } }
Code language: HTML, XML (xml)

This snippet sets all default core thumbnail sizes to 0 and hence prevents their generation. It also removes all additional custom image sizes added by themes or plugins. After the implementation of this code, WordPress will not generate resized versions of newly uploaded images.

Delete existing resized image files from the server

An example of a resized image filename is:

homepage-featured-image-768x432.png

The filename of a resized image would always end with [dash][number][x][number][dot]. Using the following regular expression (regex) we can find on our server and delete all files that follow the pattern of a resized image version:

/-[0-9]+x[0-9]+./g

Conclusion

When uploading an image to a WordPress site, resized versions of it are automatically created. When using Jetpack’s image CDN, these versions are redundant and waste server storage space. A simple code snippet can prevent the future generation of resized images, and a regex can help to delete already-created resized image files.

External links

Leave a comment

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