How to optimise your pictures for your website

Posted on 6 August 2020

On many occasions we have seen websites with poor loading times. Sometimes this is down to poor server performance, poor and big javascript files. Other times it’s simply down to images not being optimised. There are ways of making sure your images are right for the web!

Table of Contents

Sizing

If you use WordPress or a CMS that allows you to specify the image size and you only go for 512 x 512 pixels for instance then ideally you want your image resolution to be 512px by 512px. There are many great tools for things. Our personal favourite is GIMP which is free. You can also use Photoshop if you like or any other image editor that supports resizing for that matter.

But what about if you’ve got lots of images? In that case the software you need is FastStone Photo Resizer, again free with the difference being you can select multiple images at once and set these to be resized.

Quality

With both GIMP and FastStone you can set your JPEG images to be a lower quality or higher compression. This gives a smaller image size and in most cases if you only loose some quality isn’t even noticable. It’s always worth doing this too as every byte really does count!

Compression

Of course once this is all done it’s also recommended to compress your images. Our personal favourite: TinyPNG; free with the limitations of up to 20 images at a time with a maximum size of 5MB. If you’ve done the resizing and adjusted the quality prior then you’ll probably find only ever hitting the 20 image limit, you can always upload and compress more after.

Alt Atribute

Not strictly related to the image itself but when you upload an image you get an option for setting the alt attribute, this should always be done and should always be related to your image where possible. This is something that helps with indexing and it’s believed not having an Alt attribute can be a negative where SEO is concerned.

If you want to decrease your image size further you can also experiment with adding a layer in GIMP (white/black) and then increasing the transparency to show more of the image. These often come out at a much smaller size. On top of this you can also manually experiment with how many colours are being used. Cropping is often a brilliant tool too. That sums up our blog post on optimising images for websites.