How can eliminate the intermediate images on WordPress sites

All of us can meet at a moment the situation when the site tend to run out of disk space on server. On a WordPress site almost all the time  the problem come from the resizing mechanism of images. When we upload an image, several others are generated, with various sizes. These sizes can come  from many sources, like themes, plugins or functions. WordPress itself generate 3 sizes for it’s needs – thumbnails, medium and large image sizes, settled at Settings -> Media.

The reason for this behavior is the speed and performances of your site. WordPress prefer to generate these images at a moment when users don’t interact with them, but only you will have to wait for images to be “crunched”. Then, after the image is inserted into a post, your visitors will be served with images previously prepared. Of course, this is the best approach for obtaining the maximum performance but the downside of this approach is that your server will be filled shortly with a lot of files.

While for these site, as for almost all others settled in Netherlands we use the services of ONE.COM, where we have a lot of space, and I never doubt if I have enough space for my files, on other servers these intermediate image files can become a huge problem.

Two weeks ago I was asked to solve this problem for James, a friend from aquoid.com forum. As a very talented artist, his blog is full of images and his server was blocked by the intermediate images.

After optimization we re-gain almost a half of his disk space and from then no more intermediate images are generated. Next is what I did:

Step 1. Install these plugins:

A. I installed WP Performance Pack (WPPP). This plugin generate images on the fly, when a visitor come to a page. For doing this better, it need to integrate other 2 plugins:
B. A plugin for regenerating thumbnails – happily I chosed Simple Image Sizes. This plugin not only let you to regenerate thumbnails, but also give you options to disable (remove) unneeded sizes even if they are forced by theme or plugins.
C. A caching plugin – I chosed EM Object Cache because is not any deal to delete images but replace them with static pages(files) on server.

With these 3 plugins enabled I was able to remove the intermediate image and force them to be regenerated only on visits, without loosing too much at performance:

Step. 2 Set the plugins:

A. At Settings -> Performance Pack set WPPP as in next image:

In this way the plugin will generate the intermediate images dynamically, on demand, not on upload. 

These images will be cached by EM Object Cache for faster delivery to the users.

You can change the slider for quality of generated images – a lower quality means a faster response for visitors.

B. Go at Settings -> Media and remove undesired image sizes. Now the list of sizes is enriched with those sizes used by theme/plugins, each of them having a “delete” button next to it – press the button if you don’t want one of these sizes.

Then go at the bottom of page and regenerate thumbnails.

C. By default EM Object Cache come with the settings from next image (EM Object Cache -> Generic Options).

DO NOT CHANGE these settings, especially the cache engine. If you choose the file caching, instead of sets of images your server will be filled with cache files.

Optional steps:

A. Because now the thumbnail will be regenerated on demand, will help to have the original files at smallest possible sizes. For slimming down the size of image files, without losing their quality can use:

– WP Smush.it – Every image you add to a page or post will be automatically run through Yahoo Smush.it behind the scene. You don’t have to do anything different than usual. You can “smush” also the older images, uploaded before installing the plugin, from Media -> Bulk Smush.it or for each individual image from media library.

Pros – easy to use, just install and go, for any kind of server.
Cons – it’s functionality depends on availability of Yahoo servers, sometimes the plugin will not work when the Smush.it service goes down or is under heavy load.

Update 16.04.2016. About a year ago, Yahoo stopped to maintain Smush.it service on their servers. But WP Smush is not dead. The guys from WPMU DEV re-thinked their plugin to work without Yahoo support. The new plugin remain easy to use as before.
Cons – the free version will optimize all files with original size under 1 MB and the bulk optimization will smush 50 files at a time.

These limitations are eliminated in the paid version WP Smush Pro.

– EWWW Image Optimizer – if you are on a Linux server this is the best plugin for automatically and losslessly optimize your images as you upload them to your blog. It use Linux tools available for free (and the plugin help you to install these utilities). Also can resize old images in bulk.

Pros – faster than Smush.it, your images are regenerated on your own server. Also the plugin don’t optimize only the images from media library but from anywhere from server – from theme, various galleries, various plugins etc.
Cons – Works only on Linux, with image utilities installed AND exec() active in your PHP configuration. For most of the users on shared hosting, exec() is disabled for security reasons.

However, for those who cannot use their servers for EWWW, Shane Bishop provide a cloud optimization version of the plugin as a paid service.

– CW Image Optimizer – same like EWWW, it use littleutils tools on Linux servers for reducing the size of image files. Same, pros and cons, same restrictions – need exec() and utilities installed on your server.

– Optimus – a Swiss image optimization service. The plugin promise a lossless compression of media uploaded to WordPress. The plugin slims down the original image and the thumbnails generated by WordPress.

Pros – the plugin greatly reduce the size of images without touching their quality.
Cons – the free version of plugin limit the file size to 100 kb. Very small I think. But the plugin can be very useful on sites which still use the regular WordPress mechanism image resizing because all thumbnails will have small sizes.

However, for larger files is provided Optimus HQ version with 2 licensing options.

B. For better serving the files and improving the performance I often use Cloudflare. Their basic services are provided free of charge and they include caching, minification and security protection. Setup an account, change your DNS with those provided by Cloudflare and your site will be served by Cloudflare servers (while all your files will stay where they are, on the actual server). (Talk to your hosting provider for how to change your DNS).

If you use this solution need also to install Cloudflare plugin – otherwise all your traffic will appear as coming from few servers from San Francisco.

That’s it, looks like you need a lot of plugins and a lot of works for set them up, but it worth, you will re-gain a lot of space on your server, without affecting too much the performances. And really, it take much more to explain what to do than to simply set up those plugins.