In depth - how to optimise images for your website
Why is it so important to have small images on your website?
Your site will load much faster, so your visitors are happy and more likely to stay on your website.
The total size of your page and consequently your whole website will be smaller, so you do not have to pay extra hosting fee.
There are 3 parts to optimising images, all of these are important and good housekeeping for your site.
Optimise the image quality
Choose the correct image dimension
Choose the correct file format and size
To do this successfully, and to save time, I suggest you buy Photoshop. Don’t worry, you do not need the full version, which is quite expensive and offers so many features you will not need.
Go for the little “Photoshop Elements” software, which is about NZD $150, a one-off purchase, that is worth your while. I like this software because it offers a quick, guided, and expert level. Depending on your own skill level and interest, you can dive right into the depths of the program, or go with the quick run-through to achieve your goal.
I know, there are lots of different software packages out there to work on your images, some online editors are pretty good too, like Pixlr or Canva, but to me Photoshop Elements is the most intuitive solution.
Quick Photoshop Elements
Let’s have a look at Photoshop Elements and the main steps to cover. The easiest way to do this is by going through an example.
You can choose a file of your own to follow my tutorial, or you can download the image here. My file is a whopping 9.7MB in size, the dimensions are 5168 x 3448, far too big to upload to a website.
I open the file in Photoshop Elements.
At the top of the screen you can choose the mode you would like to work in.
Let’s start in QUICK mode.
Improving the image quality
By clicking on AUTO you can already improve the image display. Now you can play with the BASIC functions, I like to change the HIGHLIGHTS and SHADOWS, be careful with VIBRANCE and SATURATION, they are great to use in small percentages. In DETAIL you can sharpen the display, CALIBRATION you do not need. Then OPEN the image at the bottom of the screen.
Smart Fix
Still looking to improve the quality of the image, in QUICK MODE the adjustment offered on the right-hand side are very similar to the ones on a mobile phone. Perfect if you do not like to get into too much detail. Concentrate on SMART FIX, the AUTO button does a great job too.
Straighten the image
Choose the STRAIGHTEN tool from the left side on the toolbar. Draw a line along the horizon and the program will automatically straighten the image for you.
Resize the image
On the left-hand side of the screen is a toolbar, choose the CROP tool. The program comes up with suggestions to crop the photo, if you already know the final size of your image, then you can enter it in the bottom-left corner.
We are working in pixels, a common size for an image within content are:
1000 x 667 pixels
800 x 600 pixels
The measurements depend on your design, but no image should be wider than 2500 pixels.
To achieve a certain size, add the pixels in the field at the bottom of the screen and draw a rectangle with the crop tool to determine the exact size of your image.
Guided Work Mode
The image should look pretty much the way you want it.
If not sure, or you would like some more assistance, choose GUIDED on the top of the screen. Here you can get more help.
An example:
I don’t like to show the boy walking on the balustrade of the jetty, I choose OBJECT REMOVAL on the GUIDED screen, follow instructions, and voila – he’s gone, just like that. To apply more changes, you can click on EXPERT and find a selection of additional tools.
Reduce the image size - save for web
When it comes to images file size, we do not want any images over 500 KB on the website. Ideally images are under 200KB, that keeps your site performance fast.
Once we have the correct size in pizels, we go to FILE / SAVE FOR WEB.
This is where the fun starts, where you can make a real difference to the size of your image. We have a few aspects to look at.
The left window shows you the image we worked on so far, the right side shows you the optimised result as a preview. If you need any information about which image format to choose, please read it here.
For our purpose, a JPG is prefect, I normally choose 60% quality, as it reduces the file size without compromising the quality of the image too much. I chose the new size as 1000 and 667 came up automatically. Now have a look at the new file size (written under the preview of the new image). It is 94.5KB, too good to be true I think.
So. I save this as a copy of my image. A trick is to keep the file name, but you add a _web to the copy of the file. The original file was 17.8MB, I got this down to a dream size (I have to admit) of 97.5KB!
We are not always so lucky, but Adobe Elements does a wonderful job in reducing the image size without sacrificing too much of the quality.
JPG Mini
Should you require even more reduction in size, we call this compression, then use a software like “JPG Mini”. This is a free software, you simply drag your optimised file into the screen of the program and the file itself will be reduced in size.
You can compress up to 20 images a day for free: https://www.jpegmini.com/
