Will that caching plugin really make your website faster (Part 3: beating the bulge)


Moving on with our tutorial series, we’re taking a look at images and why it’s important to give consideration to the way that you upload your images and manage them in your project.

In the gallery below we have 4 copies of the same image that were saved in various image formats. All the same image and delivered in the same size.

Spotting the difference between the images is a impossible task, they look all the same. If you click on any image, you can inspect them yourself.

Analyzing the file sizes though, we come to realize that there’s a distinct difference between them:

224 kb
830 kb
.jpg (100%)
424 kb
.jpg (60%)
116 kb

You will agree with me that a 700kb difference just on one image is quite a difference just for one image, just think what the difference would be for all the images on a page.

This doesn’t happen often does it?

Big reason why we wrote this series is that this is one of the things that we see quite often, and is a mistake that’s made by private buyers of our themes, and also designers that are buying the theme to change for their customers.

It’s not uncommon for us to see projects that adds 1 to 2 megabytes worth of data as a result of this.

So what’s the remedy?

As a rule of thumb only upload files that have a .jpg or .jpeg extention. Install a photo editor on your computer, and before uploading a image go through the 3 point checklist:

Are the image a .jpg image image and if not convert it to one

Are the image width a maximum of 1000 pixels and if not resize it.

Are the image saved at 60% compression, and if not, compress it.

And if i do not have software for this?

Luckily the web is chock-a-block with services that will assist you in quickly getting this done

Online Picture resizer is a online utility to resize and crop images

Image converter is a utility that will convert the images on the fly.

Smush it is a online utility that will compress images easily.