Optimising images for your website

Image Optimisation

An important part of great web design is choosing the right images and getting them on your website. Unfortunately, a lot of people new to web design or trying to maintain their own sites will choose great images but then not prepare them correctly. Part of good user experience is a page that loads quickly. The challenge for a web designer is to balance between image quality and the actual size of the file that gets uploaded to the web server. This tutorial will guide you through how to do this using software freely available on the Internet.

Understanding File Size

The first thing to understand is the concept of image size. Many digital cameras take extremely high-resolution photos. See the two images in the screen here, one from a digital camera and one from an iPhone. Their respective file sizes are 35 MB and 2.4 MB

Optimising Images for your website – Understanding File Size

Going into a little more depth, each image has certain properties which can be viewed by right clicking on the file and selecting properties. Across the top there are 4 tabs, we will be focusing on the “General Tab” and the “Details” Tab.

Image Properties

On the General Tab you can see the file name, when it was created and the size of the photo.

Optimising Images for your website – File properties of images

On the details tab, there is more information. Here is the date the photo was taken, the dimensions of the photo and the resolution. Resolution is measured in DPI or “Dots Per Inch”, this is a throwback to the days of printing which I won’t go into here. For the purpose of this tutorial, there are two main DPI values. These are 300 DPI and 72 DPI. 300 DPI is considered a high-resolution image used for printing whereas 72 DPI is a low-resolution image used for images that need to be displayed on websites

Optimising Images for your website – File properties of images

You can also see the resolution of the image which is the width and height of the image in pixels. This is the value we will be focusing on in this tutorial. As you can see this image taken on my iPhone is 4032 px by 3024 px at 72 DPI and the size is 2.31 MB.

If we get the properties of the photo taken by a digital SLR camera the dimensions are 8151 px x 5434 px at 300 DPI. This is a larger photo at a higher resolution, thus the significantly larger image size of 34.3 MB

UX (User Experience)

Now you have a basic understanding of how image size and resolution affects file size the question now is, how do we optimise these images for your website?

You want your end user to have a great user experience, known as UX when they visit your website. They will want the page to load quickly. Part of ensuring that the visitor to your site gets a page that loads quickly is to optimise the images before you upload them to the web server.

Screen Size

Before we learn how to do this, we need to understand screen sizes. Most people will view a website on a screen resolution of 1920 px x 1080 px or less. Desktop or laptop computers are commonly 1920 x 1080, 1440 x 900 or 1366 x 768. Tables and phones in landscape mode are mostly less than 1280 px wide.

Optimising Images for your website – Screen sizes explained

Let’s go back to the images we looked at earlier, these were respectively 4032 px wide and 8151 px wide.

Let’s say that we wanted to make the larger image a full screen slider on the homepage of our website. As nearly all screens are 1920 px or less, there is no reason to upload an image that is 8151 px wide. What we need to do is resize this image to 1920 px wide and 1080 px high. Here I will provide instructions to do so using free software you can download from the Internet.

GIMP – GNU Image Manipulation Program

GIMP, or “GNU Image manipulation program” can be downloaded from www.gimp.org, I will provide the link in the video notes. For the purpose of this tutorial I will assume that you already have it installed.

Open GIMP from the shortcut on your desktop and browse to the file you want to edit.

Optimising Images for your website – File properties of images

The photo will open in the stage. The first thing we need to do change the resolution from 300 px/inch to 72 px/inch. This is easily done by going to “Image > Scale Image”

Notice the small icon highlighted, this icon is the “Constrain Proportions” option. With this linked, whatever you do to the resolution on the X Axis will also happen to the “Y” Axis.

Simply change the resolution from 300 to 72 in the highlighted field and tab to the next field. Notice two things, the first is the image size remains the same. The second is that when you tab out of the “X resolution” the “Y resolution automatically changes as well. This is because you have the “Constrain Image” option selected. This is OK, the next stage is to resize the image.

Changing Image Size

Then we can go to the image size. The first thing we do is change the width from 8151px to 1920px. Again, because we have the constrain image option selected, when we tab out the height will maintain the ration of the image and change to 1280px.

As the image has now become smaller, increase the view of the image by selecting “View > Fit Image in Window”

Just quickly before we go onto cropping images. I will quickly demonstrate what the “Constrain Image” links do. If I uncheck the “Constrain Image” option and tab out, notice that the height of the image remains the same. If I then hit the “Scale” button the image becomes compressed on the “Y” axis.

Scaling the image

This can be undone by selecting “Edit > Undo Scale Image”

Now we need to crop the image to 1080 pixels high. To do this, select “Image > Canvas Size”. Notice by default the “Constrain Image” option is unchecked. We need to keep this option off.

Tab down to the “Height” option in “Canvas Size” and change theis to 1080px and tab out.

Notice in the small preview image, the new size is highlighted. Looking at this image it makes more sense to crop the top of the image, rather than the win barrels so select the highlight and drag the image up.

Once this is done, click on “Resize” and you notice that the image is resized.

Saving the Image

Now, let’s look at the difference in image size. By opening file explorer, we can see the original image was 35 MB which is quite large. If we look at the optimises and resized image you can see that it is just under 300 KB. That is under 1 percent of the original size with no real loss of quality. This would download of a web server 100 times quicker.

There are many other options in GIMP that can help you prepare your images for your website, we will go through these in other tutorials.