London Web Meetup January 2016 - Image Performance

Grant Kemp presented at this month’s meetup titled "Image Performance".

Below will be a summary of his material and why it is important.

The Problem

Images are increasingly becoming a large part of website, accounting to ~ 66% of the total file size. Most images are not optimised for web, and thus increase website loading times. With increased loading times, the bounce rate (the rate at to which people navigate to another site) increases. For sites that fully render in 3 seconds or more have a bounce rate of 40%!!! This will hurt your KPIs!!

Problem Handling

There are a multitude of solutions available to speed up websites thus reduce bounce rates. An example can be critical path rendering - which is to instantly displaying the content on what the web surfer first sees whilst the rest of the page loads, giving the impression of a speedy website. Or gzipping files to reduce the overall size of the files of the website, but there are often easier solutions.

Since images take up the largest proportion of website size, by optimising them we will yield benefits. So here are a few solutions.

Different File Format

Google, IE, and Firefox have all developed their own image file formats,(WebP, JPEG XR and MozJPEG respectively) that improve compression and better color accuracy over normal JPEG files. By serving these files to their respective browser, you can typically reduce file size of images by 50%.

Different Size images for different devices

The dynamic resizing of images increase load times substantially. By serving images for the appropriate devices (ie. small image for mobiles, larger images for tablets and laptops, even larger images for desktops) the browser will not need to do as much work resizing, increasing performance.

Speed delivery of images to the browser

By using content delivery networks (CDN’s) we can serve assets like images to users quicker from the servers that are closest to their geographical location, further reducing page render times.

The Solution

Grant Kemp suggests that by applying a workflow to images, we can use these best practices. There are a few open source projects that can help with this. I have personally experimented with GraphicsMagick via the gulp plugin gulp-gm, which I found quite hard to use - probably due to my coding experience. One downside to this will be that you will need to hold multiple copies of images for what you need, increasing server costs if you choose to host the images yourself.

However, there are other tools we can use that help you dynamically manipulate images via changing it’s URL. Enter imgix. By changing the URL of the image hosted on imgix servers/CDN you can change the properties of the images, from its size, to its color profile, or add watermarks into the image. It’s well worth reading their docs.

Experimentation

I’m in the process of experimenting with imgix on my homepage to see what I can do to reduce the page load. Please check back for an update.

Until next time….