Images Optimization for WordPress and Why Just Compressing Images Is Not Enough

I was introduced to the WordPress framework in 2007, but I think I started to actively use it in projects in 2010. At that point, for me, the whole multi-site concept was mind-blowing and the entire framework was phenomenal. Using it in relatively small projects went great, and it was easy to upload images. I mean, just click click click and there is it, “Thank you WordPress, I have images on my site!“. See, it’s super easy to fall in love with WordPress.

Actually, no! That was not the moment when that happened to me, it was much earlier when I was thinking “Odin be praised, there is a registration form I do not have to code!“.

Anyway, I was uploading images and these were showing on the front end. I was not paying much attention to what was happening in the background, I was just happy all worked fast, and the result was as I wanted it to be.

Like any other developer using this framework, I was fascinated by how easy it is to just change the theme and the site would look different. So, I was doing that a lot, changing the theme, uploading new images to match the new layouts, getting projects done, etc. Whenever I had to do something new, I would just remove the images from the media library and upload new ones, to match the theme or the project, so every image would fit perfectly in the designated location.

Then, I grew more confident, I started to work on bigger projects, some with a lot of legacy media assets. So, you can imagine that my solution of removing all images and uploading these back was not working anymore :). At the same time, I was reading about the page speed concept and how every little element you expose on your page (including the code itself) is a factor in determining how fast the page is loading.

Digging Into the Code

So, that was the moment I started to dig into the code, to see how and what exactly is happening when you upload an image in WordPress. I discovered that any plugin or theme I would install in the project would have the potential to register and generate its own set of image sizes.

The images I uploaded were cropped and resized to match the registered sizes, and for each uploaded image file WordPress would generate 10, 12, or 32 different files in the uploads folder, depending on how many image sizes were registered and the resolution of the file I uploaded. After multiple iterations, I saw that these files would stay in the project forever, even if these are not used at all, not visible on the front end, nor on the back-end of the application.

These images were just piling up in the folders and in the database records.

Whenever I needed to make a backup or migrate the site into another environment, I would just carry all the unnecessary files, basically, the “invisible but not inoffensive parasite“.

Well, at the point when I came to that realization, I could not find a solution for dealing with this inconvenience, so, I started to build my own tool. For that, I put in place a list of what that tool should be able to do for me, to make my work easier and to help me get super fast to the results I need. 

Image Optimization Toolset

This is my short list of “must-have” WordPress image optimization features that would handle different scenarios, common to all projects, not just mine.

• The tool must compress the images generated when a file is uploaded so that it loads fast on the front end.
• The tool must remove the image files and the database content of the images I do not use anymore in the project.
• The tool must resize and re-crop the already uploaded images to match the new design.
• The tool must allow me to crop and display “faces“, whenever necessary.
• The tool must give me details about every single image I see in the media library so that I can decide what to do with it.
• The tool must allow me to execute actions in bulk.
• The tool must allow me to generate image sizes based on my custom rules, if possible.
• The tool must be super easy to use, with an intuitive interface.
• The tool must be seamlessly integrated with WordPress and potentially other components.
• The tool must be free to use and would not limit me to a number of files to process.
• And, why not, the tool must be used for extended processing, which can be run from WP-CLI.
• Anything else would be a bonus. 

Of course, you can imagine, that the list is bigger. Over the years I added more to it.

One-stop Solution

Currently, there are a lot of outstanding solutions for optimizing the images, and most of them know how to do well one thing, and one thing alone. I am a big fan of one-stop solutions, to have only one plugin that does whatever I need it to do, instead of installing 3 or 4 plugins that handle pieces of what I need. So, in terms of finding a tool that includes all my “must-have” features, I could not find another one. 

So, to get back to the “image optimization”, I would say that it is not enough to just compress the images on my website. I can upload the most compressed image the World Wide Web can see. I can play with the quality loss of the compressed image after it is uploaded to my site. I can optimize the image to have the best low size and still look good. That is not enough. I also have to make sure it is shown on the front end in the place and with the width and the height it is supposed to have. When I embed an image of 2000x2000px on the page and instruct WordPress to show it at 300x300px, that’s not optimization. My page will not load faster, even if there are only a few images on the page.

What I am saying is that, in my projects, whenever I display images that show only in a few places (and in most cases at the same width and height), I am uploading the original file to that exact size, so that WordPress does not generate the rest of high-resolution files. Then, I use the tools I have to generate/re-generate the images that do not exist yet at the expected image size. In this way, WordPress would not load the original file instead of the smaller/optimized one. Also, I assess the front-end screens and see exactly where each image size is used, then decide if I can just bypass the generation of the image sizes I do not use globally. Then, I have the option to clean up anything that is not necessary. 

In this way, I can avoid the clutter in the uploads folder and in the database, and give my project the best chance of loading fast and being successful.