How To Make Your Website Images Load Faster

Uploaded on November 6, 2015

The key to a fast website is optimising your images.

When a web browser (e.g. Internet Explorer, Google Chrome) loads a web page, it is actually downloading the files that make up the web page, like text files and image files. These files are just like any other file that you would download and store on your computer.

Lots of images on a web page can slow things down, because your web browser has to download each image individually. Images naturally have larger file sizes than simple text files, so a web page with lots of pictures will load more slowly.


How to make your website images load faster.


You don’t have to completely omit images altogether if you want a fast website. There are tricks you can use to reduce the file sizes of your images as much as possible, while not ruining image quality.


1. Convert from PNG to JPEG.

Files on your computer come in all sorts of file formats. Microsoft Word documents are .doc or .docx files, PDF documents for online brochures are .pdf files, and software installers are often .exe files. In the case of images, the two most common file formats are .png and .jpg (PNG and JPEG).

What’s the difference between PNGs and JPEGs?

Generally speaking, PNGs are larger in file size than their JPEG equivalents, but have the advantage of supporting image transparency.

If you have professional photography to include on your website, you will often want to opt for a JPEG file because there won’t be any transparent areas of your image. Graphics, such as logos, that are placed on top of non-white backgrounds on your web page, are often PNGs.

Only use PNGs when you want image transparency. In all other cases, use JPEGs for the smaller file size. Differences in image quality between the two file formats are barely discernible to the naked eye.

How to do it.

Converting PNGs to JPEGs is as simple as saving your current image as a new file type, just like you would any other file. This can be done in any image editor, like Microsoft Paint, GIMP or Adobe Photoshop. This step can reduce the file size of your image by over 50%.


2. Resize your image.

Images come in different sizes. Graphics produced by a graphic designer often won’t be any larger than a few hundred pixels, whereas photographs can be thousands of pixels across.

What does this mean for you?

Bigger pictures have larger file sizes. If a website has a large image, your web browser will take longer to download it. Web browsers often shrink images to fit onto the web page, but before they can do this they still have to download the whole image. The end result is a massive image shrunk to around a hundredth of its size, slowing down the load time of your web page.

How to do it.

Work out the maximum dimensions at which your image will display on your web page. If you don’t know how to do this, your web developer should be able to help.

Afterwards, open your image in an image editor. Simple programs like Microsoft Paint are fine, but suites like GIMP or Adobe Photoshop do a slightly better job. Within these programs, there will be an option to resize the whole image. Make sure you maintain the image’s aspect ratio so it doesn’t appear stretched, then shrink your image down to the size it needs to be.


3. Compress your image.

The last thing to do is compress your image. This is where a computer looks at your image, and finds ways to reduce its file size without reducing image quality. There are many image optimisation websites and software suites out there, but I’ve found and produce good results while being user-friendly.

How to do it.

All you need to do is upload your re-sized image file to the website, and it compresses the file and offers a download link for you. Depending on the image, file sizes can be reduced by around 80%, which hugely improves the load time of the image.


What next?


Once you’ve converted, re-sized and compressed your image, you’re now ready to replace it with the old one. I’ve reduced some of my images from 1000kB to just 80kB using these methods, which improves the load time of my website and enhances the end-user experience.


Bonus for WordPress users: image optimisation plugins.

If you have a WordPress website, your life just got a whole lot easier. Plugins like WP Smush or EWWW Image Optimiser can do all of the donkey work for you. Head to their websites for more information on how to use them.