Optimise Your Images For A Faster Loading Portfolio

We probably don’t have to tell you this, but website load time has a huge impact on user experience. Google for example found that an increase in page load time from 0.4 to 0.9 seconds decreased traffic and ad revenues by 20%. Amazon also found that every 0.1s increase in load time made sales fall by 1% – stark statistics from two of the biggest players on the web.

It’s not just visitors and revenue that suffer if your website is slow – your rankings might too. Search Engine Optimisers have been speculating for months that load time is Google’s big new ranking factor. If it is, you’d better make sure your portfolio makes the grade.

The best place to start is your images. If you’re a designer, photographer or artist with a portfolio site, images make up a lot of your content, so optimising them can really boost your page speed and help the user experience. We recommend starting with Smush.it. Available as a Firefox addon or a WordPress plugin, Smush.it strips out all the useless data from your images to optimise them in a lossless way. It can handle JPGs, GIFs and PNG’s (the three main file types supported on the web) up to 1MB in size.

Using the right file types for your images is also important. Smush.it sometimes converts GIF files to PNGs for example when the PNG has a smaller file size. It’s definitely worth taking the trouble to save your files in the right format for optimal size and quality. Here’s a rough guide to the three main types:

Acceptable file types for the web

GIF

The ‘Graphics Interchange Format’ supports up to 256 colours, making it great for simple images like logos, line drawings etc – basically anything except a photograph. It utilises lossless compression to reduce the file size, and this is especially effective on images with large areas of the same colour (like a logo). GIFs support transparency and animation, making them one of the most popular file types on the web. We’ve all experienced the ‘animated GIF’ – GIFs are still the best option for putting simple animations online.

PNG

The ‘Portable Network Graphic’ image type was developed to replace GIFs, and although it’s widely supported on the web, it’s not yet supported by all browsers. It also doesn’t support animation so PNGs won’t fully replace GIFs just yet. What are the advantages of a PNG then? Well, it can handle 24-bit colour giving PNG images a greater depth than GIFs. A PNG can also be up to 25% more compressed than its GIF counterpart, giving it a potentially smaller file size. Just like with GIFs, PNGs allow transparency in images, but they also allow you to control the opacity.

JPG-JPEG

The acronym ‘JPEG’ stands for “Joint Photographic Experts Group” – a snazzy name for the team that came up with the file type. A JPG supports some 16 million colours – as many as you’ll ever need, which is why JPGs are great for photographs. JPG images are compressed (using ‘lossy compression’) without any visible change to the image – the information thrown out is not essential. The higher the image quality, the larger the file size will be, so high quality JPGs can be slow-loading. Simple images like a logo or text aren’t really suitable to be saved as JPGs – they can lose clarity through lossy compression.

File types – compression up close

File types – small amount of colours

File types – large amount of colours

File types – small amount of colours – file sizes

File types – Large amount of colours – file sizes