How To Optimize Images For Faster Page Loading Times

If you want to improve user experience, whilst simultaneously achieving higher page ranking on the SERPs by impressing Google, then image optimization is a great place to start!

A fast loading website not only provides a better user experience, it also helps to keep visitors engaged as there are few things worse than a webpage that takes an eternity to load where someone who is looking to acquire information or make a purchase online is concerned.

Images which have an unnecessarily high resolution and an excessively large file-size are one of the main causes of slow loading pages and this is particularly true if there are multiple images on the same page which are simply too large for their own good. These images also swallow up valuable bandwidth which can be expensive for both the website owner and the person visiting the site, particularly if they are on a less-than-generous mobile tariff.

Below are some useful ways of reducing the size of your images whilst still providing an excellent browsing experience for your visitors.

Images Which Are Simply Too Big

A lot of online marketing providers and website publishers are under the false impression that high quality, high resolution images are incredibly appealing to their end users but, in practical terms, this simply isn’t the case.
The truth of the matter is that the use of high resolution images always comes at a price, and the cost in this case is the time it takes a page to display on a device.

It is not uncommon for an online publisher to include images with file sizes that range anywhere from a couple of megabytes, up to five or six megabytes and images like these can take an incredibly long amount of time to load up on a page. This can have a drastically negative effect on visitor retention.

If an image is over 400kb to 500kb, then the chances are that something isn’t right and that the image itself is uncompressed.

Here are a few useful tips which should be considered before any image is uploaded:

  • Before you upload an image file, make sure that the file-size is reasonably small. On a Windows machine – this can be done by right-clicking the image file and checking its properties.
  • Try to keep images below half a megabyte – or even better – around 50kb to 150kb in size, depending on the dimensions.
  • If you don’t have the required software to compress an image file, then make use of online tools instead. CompressJPG and TinyPNG are two excellent tools which can be used free of charge to speed up page times by means of compression.
  • Photoshop users should always ensure that image resolution is limited to 72dpi and that they make use of the “Save for Web” functionality that the software provides to keep file sizes to a minimum.
  • Try to use the JPG file format wherever possible. Although, if an image is transparent, you will need to use either the PNG or GIF file format instead.

Scaling Images Automatically

Re-using an existing image multiple times on the same page, by means of scaling it down from a much larger graphics file is another common mistake that publishers often make.

Yes, it can be convenient, but the process requires a much larger file than is needed to be loaded and visually scaled down on page which again equates to a much longer page load time.

On top of this, images which have been scaled down often look distorted and stretched – and deliver less greater impact.

By scaling images down using an offline software solution, significantly higher quality results can be achieved with much smaller file sizes, so in this case it makes sense to use multiple files which have been specifically converted to look good whilst optimizing load times.

If you use more than four or five different sizes of the same image, then try to reduce this number to three or four images. Your visitors will thank you for the increase in speed and you will also make Google happy at the same time.
Finally, always remember that faster page loading times result in higher sales conversions and better rankings!