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:
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.
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.
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.
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.