Image Optimization

Note: we are no longer using WordPress but this is still extremely relevant).

There are no short-cuts for this. Knowledge is a prerequisite for freedom, just as ignorance is an invitation to predators.

It is really important that we can run our system on extremely cheap hosting. That priority precedes all others.

Above you can see the comparison of images (click for a full-sized view) using different optimizations. You can see immediately that even just reducing the size has a massive effect. Medium compression then reduces file size by an order of magnitude.

Overall we’ve reduced the file size by almost 32x. It may not seem like a lot but apart from the small increase in page loading speed, we have significantly decreased server load. If we had just 1000 views per month and 10 such images on a site, we would save 36 Gb of transfer per month.

When backing up, I noticed that my sites were growing exponentially, eventually getting bigger than the maximum allowed by the free version of the backup software (huuuuge). After much troubleshooting, I found that the image (so-called) optimizer plug-ins I was using just made many alternative resolution copies of all the images. I mean, like 10 or more of each.

I had to go through each directory manually and delete them all. The sites would typically go down to around a quarter of the size.

This image sprawl happens even with the plugins from the CDN services, which is odd. I thought the CDN’s purpose was to offload capacity, not to reduce the amount of usage. Perhaps we can figure a way to use a CDN without such bloat.

So, we will do image optimization manually. We will optimize images we ourselves upload before uploading. Images uploaded by site users will have to be done manually and then replaced on the same path. The typical phone now produces photos that are at least 3 MB each, which we could compress down to at least 1/10 of that.

The ClickForCharity site might be an exception to this because it is a social network and will probably have too many images posted. I’m not sure what to do about this yet, but that’s no reason to give in and follow the herd to bloatland and unnecessary expense. Ultimately, this will need to have its own custom theme.

Why we don’t need high-quality images.

The sites we make have an inherent purpose beyond just selling a product. We don’t need to disguise mediocrity with clever, snazzy designs because we are not presenting mediocrity. The content itself is interesting and all we need to do is present it clearly and efficiently. We have interesting subject and that is a rare treat for a web designer.

High quality, high-resolution images are only visible to a tiny minority of users. The vast majority of web traffic is now on tiny phone screens, and of the small minority who have large screens, only a few can even see well enough for it to make a real difference. The tech businesses have brainwashed us into believing that it’s important to upload huge files, including stuff like 4k video, because that suits the providers and the hardware manufacturers’ desire for more income. They want your computer/phone to be slow and frustrating so that you keep “upgrading” it and they want you to use as much of the resources they sell as you can afford.

There’s a lot to image optimisation and the “easy” solutions I see do nothing towards that goal. Instead they actually create more bloat (albeit usually in a different place so you don’t notice it). These solutions are not a replacement for knowledge and understanding. The two main methods of compression can be represented by the jpeg and png standards. Learning how compression works will enable you to choose which method to use for any individual image.

It’s difficult to find pages that don’t treat you like a clueless imbecile. For example, they may say something like “JPEG images work best for showing off complex color photographs on your site, as they allow for a higher-quality image with a smaller file size. “. The first part is true, but the second part purports to be the reason and it is not.

Jpeg compresses by averaging over adjacent pixels and losing data, but in an image with mostly gradients you can get away with re-constructing the color gradients because the original image was mostly gradients already. With cartoons, for example, this method would make a visible mess because it has solid blocks of color separated by sudden changes. PNG compresses by taking blocks of color and basically saying “all these pixels are the same color” and is thus more suited to images with sharp changes in color.

I’m not trying to describe the processes accurately here, only to give an overview so you have an idea of what a misleading description looks like. Once you know how each works, it becomes easy to decide which to use and how strongly to compress.

How can you know if a tool works or not if you don’t already understand the principles of what you’re trying to do?