A website I was working was running a bit slow.
Image size is less of an issue nowadays with somewhat decent broadband for the majority, although running an e-commerce website means lots of images.
Lots of images means more thought has to be put into how to make a website load faster.
Optimising images for a website also helps achieve two business objectives:
- Improve SEO because search engines like Google score you on site load time. This means showing up higher in the Google search engine results pages.
- Studies have shown that just 1 second faster can help increase conversion rates. This means every second counts.
Changing image file formats
Changing file formats from a JPEG to PNG resulted in smaller image sizes. This is because the product images were very simple and had a small range of colours which means the PNG format can be used to optimise the colour range for a few colours, compared to a JPEG image which being a standard photo format is designed to show millions of colours.
Further compressing images
There are a number of ways you can further optimise images to make them smaller, though the quickest way for most people might be to use a service like smush.it which reduces the size of your image files. So I downloaded all the images from our catalogue via FTP and then uploaded all the images in bulk which were then automatically optimised ready for download, saving almost 50% image size.
Uploading the new images
The difficult part was uploading all the new images in a way that wouldn’t involve uploading hundreds manually. This was because smush.it had had replaced the spaces in the file names with a plus symbol which had to be renamed and also change the database content to replace the .jpg file extensions with .png.
I could have used regular expressions within the command line to change the file names, but wanted a method that would be easy to reproduce for people to follow in future. To make the process easy to reproduce I did a Google search for a bulk file renaming application and found Bulk Rename Utility which bulk renamed all the files for me.
With the images sorted I was ready to upload them all via an FTP client.
Next I downloaded a database backup of the products so I could open the MySQL file with Notepad++ and search then replace a selection of products containing all the .jpg extensions with .png. This file was saved as a copy so that the original file could be used to restore the old data in case anything went wrong.
Once this was done I restored from the MySQL file which changed all the .jpg extensions of the image files for the products on the shop to .png.
Violla! All images optimised and uploaded within a couple of hours or less instead of doing it all manually which would’ve potentially taken 3-5 days, saving me time to work on other things and my employer potentially hundreds of pounds in time.