Image Optimization Guide (Reduce image sizes to speed up your site page loading time)

Image Optimization Guide

To ensure that your MyHub pages download quickly any images used within pages need to be the smallest download size possible. This will produce the best results in terms of speed for your users. This can be easily achieved by focusing on the following two areas:

Appropriate Height and Width
Image Compression

We recommend that before uploading images to MyHub, the dimensions are edited, and the file is then compressed. This can be achieved by using the default image software that is provided on your computer. This article takes you through the two areas and the steps to achieve this on Windows and Apple computers.

Appropriate Height and Width

One of the first things to consider before making any changes is how big you need your image to be for it to display correctly on your MyHub page. If you take a photo at high resolution on your mobile phone, it will be far larger than is needed for use on a MyHub page. Landscape images taken on a mobile phone can be upwards of 3,000 px (pixels) wide which is three times the maximum width of a MyHub page which is around 1200 px. The additional px makes the file size much bigger and therefore will take much longer to download.

The largest width of any MyHub web page is 1206 px so in most cases this should be the largest width you will ever need to use within a web page. A good example of when you should use the largest width image is within the banner gallery. We recommend that images 1206 px width by 330 px height are used on this module. In some cases, you can get away with a slightly smaller width depending on the type of image used. You could, for example, resize your image to a width of 800 px and a height of 219 px if you want to achieve a smaller file size. The banner gallery automatically stretches images to fit on the page so you may lose some image quality if you reduce the width under 1206 px. Quality vs. file size is something you will have to try out and judge for yourself as all images display differently depending on how much optimization is undertaken.

For other images displayed on pages now that we know that the maximum width is 1206 px, you can start to estimate how wide an image should be before uploading it to MyHub. If for example you want to display an image on a page that takes up a quarter width of the page then it would be appropriate to resize the image to a quarter of maximum width approximately 300 px wide.

Image Compression

The second area to consider is image compression. Put simply image compression uses a clever algorithm to analyze the image and then remove information which reduces the file size. For the purposes of this guide, we will focus on photos rather than graphics and we will keep it as simple as possible without delving into the detailed mechanics of how image compression works. A JPEG is the best file format to use for this purpose producing the smallest file size for the least amount of loss of quality. In the steps below you’ll see this is as simple as saving the files as a JPEG using 60% in the settings.

Apple Image Optimization

Steps to optimize images using the default image editing software provided on Apple PCs:

Once you have your image file on your computer double-click it to open the file in default image editor.
The image will open full size, from here you can see exactly how big the image is.
Select Adjust Size… from the Tools menu.
Change the Width setting to the size that will work best on the web page as described above. Ensure that padlock next to the Width and Height setting is locked to ensure that that the image aspect ratio stays the same.
Click OK
The image will then display using the new size.
Click Export… from the File menu.
Enter the name of the file in the Export As field.
Select where you would like to save you file.
The Format field should have the JPEG format selected.
Move the Quality slider to the 60% mark, 50% is in the middle so just one step to the right.
Click Save

It’s a good idea to make a note of the file size before and after so that you can see the effects of your work using either the Finder or right-click the file and select Get Info.

Windows Image Optimization

Steps to optimize images using the default image editing software (Paint) provided on Windows PCs:

Once you have your image file on your computer right-click it and select Edit to open the file in Paint.
The image will open full size, from here you can see exactly how big the image is.
Click the Resize button from the top ribbon menu.
In the Resize popup box select Resize By Pixels option.
Change the Width setting to the size that will work best on the web page as described above. Ensure that the Maintain aspect ratio checkbox is checked to ensure that that the image aspect ratio stays the same.
Click OK
The image will then display using the new size.
Click Save As from the File menu.
Select the JPEG picture option. Paint automatically adjusts the compression amount for you.
Enter the name of the file in the File name field.
Select where you would like to save you file.
Click Save

It’s a good idea to make a note of the file size before and after so that you can see the effects of your work by right-clicking and viewing Properties.

Image Optimization Guide (Reduce image sizes to speed up your site page loading time)