Images: Size

A large image takes longer to load than a small image.

A question we’re often given is “I’ve got really good professional photos, but they take ages to load and really slow my website down. How do I fix them without losing quality?”

Well… enter a tool like Tiny PNG. This free tool allows you to compress your images into much smaller versions, without compromising quality. This will speed up the load time, as its not trying to load a massive image, when a smaller one will do.

 

Resizing:

Once you’ve reduced the file size, you can resize the image for its purpose. If you are using the image as a header, that goes right across the whole screen width, you need it to be good quality, but no website needs an image that is 6890px x 9000px. Most screens are no bigger than 1240 wide.

If you’re using headshot of an author, or speaker at an event, somewhere where its only a small area, resize the image to suit it.  For example: This speaker image is only 100px x 140px as that is all that is needed. Having the original image (which was a whopping 3660 x 4890px) would have slowed down this page considerably.

Images sizes should be fit for purpose

 

Yes, it does take a bit of time to resize images. But, best practice is to always use fresh images, don’t use the same 8 images across your whole website so you should be able to upload the correct size each time.

 

BEST PRACTICE

Know which images you’re going to use and where.

Images need to be relevant to the page and of good quality.

Don’t use stock photos – they’re so overused (and people like to see the real business)

Shrink the size of your image before you upload it (make sure you save the original somewhere).

Upload the image with a proper name – so you know where it is going to be used (see louise’s example above)

Add alt text, using your page keywords

Ensure the image is the right size for its place on the page.

Leave a Reply