Optimising Images for Your Website

What does optimising images mean?

When it comes to websites the term “optimising” and “optimisation” comes up quite a bit. Search engine optimisation for one thing! And now what, optimising images? What’s that then?

Optimising an image is the process of resizing it so that it’s suitable for use on a website.

When you first take a photo – on your phone or camera, or even when you download an image from a stock photography site – the resulting image can be very big. And I mean that in dimensions and file size. For example, this image here:

I downloaded this from the free stock photography site Pexels. When I first downloaded it the size was:
Dimensions: 5931 pixels wide by 3959 pixels high
File Size: 3.32 MB

That’s a pretty hefty image, isn’t it?

To optimise the image for web use, I would first resize it to a pixel size more suitable for embedding on a web page and then save it using compression to make the file size as small as possible.

Once I had optimised this example photo, the resulting size was:
Dimensions: 1000 pixels wide by 668 pixels high
File Size: 127 KB

See what I mean?

Why do I need to optimise my images?

What? You mean every image I add to my site needs to be optimised first? Can’t I just upload them straight from my phone?

Sorry, it can be a bit time consuming, particularly if you’re adding a large number of photos to your site. But you really do need to do it… particularly (ahem) if you’re adding a large number of photos to your site…

This is why:

Save space and therefore money
Your web hosting account will come with a certain amount of disk space. If you upload a bunch of 3-5 MB images you will soon start filling up that space. If you reach capacity, you will either have to spend time weeding them out or upgrade your account to give you more space. If you optimise your images to be less than 300 KB each you will be able to fit a lot more on your hosting account, making much more efficient use of it.
Upload limits
You may well find that your website software will have limit the size of files you can upload. For example, it’s fairly common for WordPress to not allow anything bigger than 2 MB. If you have optimised your images, you will find it much easier to actually add the images to your site.
Site speed
If your website has to load 3-5 MB for each image on the page it will be darn slow. You don’t want that do you? For one thing, Google loves a fast-loading site and will give it a higher ranking in search results. So optimised images are good for search engine optimisation!
User experience
And a fast-loading site is better for your visitors as well. You know how infuriating when you have to wait for a website to load don’t you? You’re much more likely to keep someone on your site if they’re not having to wait for all the images to load.
Easier to maintain
And finally, you will find that your site is much quicker and easier to back up. As someone who spends a fair amount of time backing up websites, I really do appreciate it when it’s quick to download a backup.

Options for optimising images

There are various tools available for optimising images. You may already have some image editing software installed on your computer, but if you don’t there are also some great options which run directly through your browser.

Photoshop – this is what I mostly use. Photoshop is professional image editing software and a pretty essential bit of kit for someone who works with websites all the time. If you happen to have a license already then this is my recommendation, but don’t feel like you have to buy it just for a bit of optimisation. There are plenty of other options.
Paint + TinyPNG – if you’re a PC user then you’ll find that Windows comes with a simple image editing program called Paint. You can use this to size your image but it doesn’t have built in compression. Once you’ve made your image smaller pixels-wise you can go to TinyPNG and use it to compress the file size.
Photopea is a free photo editing tool that runs through your web browser. It works very much like Photoshop but you don’t need to install anything to use it. See below for a step-by-step showing you how to optimise an image using Photopea.
Pixlr is another free tool which runs through your web browser. It’s definitely worth trying this one as well as Photopea and see which you get on with best.

Step-by-Step guide to image optimisation using Photopea

If you don’t have image editing software installed on your computer, Photopea is a great option. Here’s my video guide to optimising a photo using Photopea, easy right?

Go to the Photopea website https://www.photopea.com/
Click the “Open From Computer” link
Browse to where you saved your image on your computer
Select your image and click Open – the image will load on the screen
Resize the image
1. Image > Image Size
2. Make the width 1000 – let the height adjust itself
3. Click OK
Save the image
Files > Export as > JPG
1. Set the Quality to 60%
2. Click Save
3. Select Save File
4. Click OK
5. Name and save the image

Go Forth and Optimise!

Now you’ve got no excuse for uploading a 3MB photo to your website! Have a go with the tools I’ve mentioned and see which suits you best.

Do you already have a favourite tool for preparing your images? Let me know if the comments below.