It is important to consider both the dimensions of your images and their file size when preparing them for use in your web pages.
We discussed resizing the dimensions of your image in part 1, where making the image smaller significantly reduced the file size and the time that the image takes to load, now we’re going to see how you can make the file size even smaller.
I’ll be using Photoshop to do this.
I have resized example image (see part 1) open in Photoshop as below.
The screenshot above is of Photoshop CC but the features that we’re going to use here are available in all versions of Photoshop CS as well.
From the Photoshop main menu select File > Save for Web to display the popup window below.
Here you can see that I have the 2-Up tab selected (at the top of the image preview). This allows me to see the original image at the top and the compressed image at the bottom.
The left panel allows me to set images settings for the new compressed file.
We’re considering photographs here and will always want to use JPEG as the file type.
Next down is the quality/compression setting and it is this that we are really interested in.
You can pick a pre-defined value from the drop down options or type in your own compression value.
In the screenshot above I have this set at 60 and I usually find that a setting of 50 – 60 works well.
Play around with the setting here and look at the results in the bottom preview panel where you will see both how the image looks with these settings and what the resulting file size will be, along with and estimated download time for the file with these settings.
As you keep lowering the number you will see that eventually the image will start to display pixelation or fringing which will make the image look bad.
You may be surprised at just how low you can get this number to before there is any really noticeable difference in the image quality.
The objective here is to get number as low as you can whilst maintaining an image quality that you are happy with.
Once you have a setting that gives you the image quality/file size that you’re happy click the Save button to save your image (make sure that you pick a new file name so as not to overwrite your original).