github twitter linkedin email
Optimising images to improve load times
Jul 5, 2017
2 minutes read

When I chose Hugo over a blogging platform such as Ghost, I picked simplicity and efficiency. As I am hosting my blog on S3 + Cloudfront (check post here) having smaller file sizes improves speeds and reduces bandwidth costs. At my last job for what ever reason we were serving something like a 26MB image on the landing page of the site that took a good 10 seconds to load in, I found a program called ImageOptim that reduced the file size to a few MB. I have started to use it for my blog even though the differences are not as drastic. Here is an example of how the program looks like:

Optimising images with ImageOptim

As you can see, my images initially were not even that big but the program still managed to reduce them by 51.3% on average, the highest being 61.4%. It may not be much but with other external scripts loading every little helps. I did a quick before and after comparison of the load speeds and bandwidth, note that they should be taken with a pinch of salt:

Before: 35 requests | 993 KB transferred | Finish: 1.80 s

After: 35 requests | 716 KB transferred | Finish: 1.61 s

From this we can see that no more or no fewer files are loaded in but the amount of data transferred was 277KB less and the load time was 0.19s faster. As I said, these should be taken with a pinch of salt as cache is a thing, external load speeds are never the same, everyone will probably have a slightly different experience.

Though overall, it is an improvement and a step forward.



Back to posts