Optimising your website’s images

Written by Matt Brooking: Web Developer.
· 4 minute read

So your band new and shiny website is now live. It’s fast, looks great and bringing in a lot of traffic. Fast forward a year, and thanks to your CMS you’ve been able to make changes to the look and feel, by changing some content, uploading new images. The blog is regularly updated, all with nice high resolution images. Everything still looks great, but the site’s overall speed has started to deteriorate, and is feeling a bit sluggish.

Images are one of the most common culprits for slowing down your website. Large images have large file sizes, which means your website has more to load, so it’s really important to make sure your site’s images are in check.  A few ways to keep your images optimised are:

Reducing the size of the images

Using appropriately sized images is one of the easiest ways to keep file sizes down. If you’ve got a nice high res image from iStock or from photography, don’t just upload the original image straight to the website. Chances are that image is around 3000+ pixels in width. Not many many websites will ever require an image this big, and at that size is likely to end up having a huge file size, which will take a long time to load. Use an image editor resize images appropriately, if you don’t have access to Photoshop, The Gimp will work just as well if this is all you want to do.

When sizing your images think about what size images your website actually uses. If you’re using an image for a full width banner, you will never need an image to be anymore than 2000 pixels. If it’s for a thumbnail for a blog article. Check the dimensions of the images on the page. If every blog image is displayed at 600 x 400. Then there is no reason for your blog posts to have images at any other size.

Compress your images

Once your image is at the correct size you’ll notice that your 10MB image, has been reduced a lot. We’re not done yet, we can get that file size lower. We do this by compressing the image, there are plenty of resources and tools available to easily compress your images. One of the most popular, is TinyPNG, it’s super easier to use, just drag and drop your image into the site, wait a few seconds for it to do its magic, and download the image again.

Consider the images you’re using

It can be worth considering the kind of image you are using. The things that generally determines how big the file size will be, is how many different colour pixels the image is using. Images which use a lot of colour, and specifically a lot of different and contrasting colours, require more individual pixels, which bump on the file size.

For example lets say you have 2 images, both 1920px by 1080px. One of a rainforest and the other of a fruit salad. The fruit salad is always going to have a larger file size, because the rainforest is only really using one colour, green. Whereas the fruit salad, will have a mixture of lots of colours.

This one is a bit nit-picky, and isn’t worth worrying about too much. If you think the fruit salad image is the best image to use, go for it. Just remember that there is only so much it the file size can be reduced to.

As a general rule, you should aim for you images, to be less than 100KB with a bit of leeway, they should never be over 500KB. If it is over 500KB, something can definitely be done to get that file size down.