How to optimise images for websites

29 October 2019

Optimise images for websites might sound like a waste of time, but one of the most annoying experiences online is waiting for a webpage to load. If your website takes too long to load, many potential customers will navigate away to your competition’s websites. Nowadays optimising images for websites is even more important as more and more users are navigating the internet with mobile phones and tablets. these devices can often load web pages even slower than a computer, so optimised photos are vital.

I will be talking about how to optimise images for websites and make your webpage load faster using various tools like Photoshop or Lightroom. Did you know that Google will also penalise your SEO (search optimisation), if your website takes a long time to load. And if you are ranking low on SEO, not many customers will find you.

As a photographer and photo retoucher, there is nothing like adding great photos to share on my website. In the past I have simply uploaded my completed photos and retouches to my portfolio (obviously after asking permission from my clients), without even thinking about the size of the photo. Here are the steps needed to optimise images for websites.

optimise images for websites

The finished photo ready to go into the portfolio

This sample photo is ready to be shared in your portfolio or blog post, but before uploading, it is important to know the size of the image. To find this out select Properties from the menu and click on the Details tab in the Properties box. On a Mac, right-click (or hold down the Control key and click) the image thumbnail and choose Get Info.

how to find the image size

to find the image size, right click and “Get Info”

If you had the image open in Photoshop, you can also click on the tab “Image” and in the dropdown “Image size”. The image is a whopping 9.6 MB (megabites).

how to optimise images for websites

how to optimise images for websites

You will see that it is 5015 Pixels wide and 3345 Pixels in height with a resolution of 300 Pixels/Inch. If you upload the image without resizing to your website, I can guarantee you that even with a super fast server, your website will begin to load very slowly. And the more images that you load without correctly resizing for websites will make the page loading even slower.

So the first thing you need to do is resize the image, I used photoshop to resize the photo to a more manageable 600 Pixels wide and 400 Pixels in height, with a resolution of 72 Pixels/Inch, which is the correct resolution for web. Print images are 300 Pixels/Inch.

optimsed web image

The image has been optimised for web using Photoshop

You type in the new sizes in the 3 panels – width, height and resolution and click ok. Once this is done, there is one more thing you do to optimise the photo. In Photoshop you click the “file” tab at the top, in the dropdown “export” and then “save for web”. I generally use the jpeg file type and at a medium quality, this gives me a balance between image quality and image size. If you save the image as ” jpeg low”, the quality might be really poor with a lot of noise in the image.

save image for websites

how to save image for web using photoshop

If you prefer using Adobe Lightroom, it is also quite an easy process. Select the photo you want to upload and click “file” on the top tab, in the dropdown click “export”. The export dialogue box will open.

prepare your photo for web

use Lightroom to optimise your photos

The settings are pretty similar to Photoshop, resize the image to 600 Pixels wide and 400 Pixels in height, with a resolution of 72 Pixels/Inch and there is also a handy dialogue box that lets you resize the amount of Pixels (Pixels/Inch) your image has. All you need to do to finish the task is click export.

Not all of us have Adobe photoshop or Lightroom, there are a few free applications that you can download. Gimp is similar to Photoshop, and I have recently discovered Darktable which is quite similar to Lightroom. Both are available for Mac and PC. Finally compare the image size to the original. It is now 52 KB (Kilobytes) instead of a whopping 9.6 Megabites (9600 Kb).

Once that is done you are ready to upload the image to your website. If you are uploading the image to be used as a fullscreen image. There are many portfolio websites that have a fullscreen home image, follow all the steps above, but resize the image to 1920 Pixels wide and 1080 Pixels high.

I hope my blog post has been helpful to optimise images for websites, in the near future I will post an article on optimising images online for those of us who do not have Photoshop or Lightroom available.

Share This :