Optimise images for websites might sound like a waste of time. But one of the most annoying things 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. 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. To 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, few 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 uploaded my completed photos and retouches to my portfolio (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.
The finished photo ready to go into the portfolio
This sample photo is ready for 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.
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 (megabytes).
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 slowly . And the more images that you load without 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.
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.
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.
use Lightroom to optimise your photos
The settings are like Photoshop. Resize the image to 600 Pixels wide and 400 Pixels in height, with a resolution of 72 Pixels/Inch. 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 like Photoshop. I have recently discovered Darktable which is quite like 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 completed, you are ready to upload the image to your website. If you are uploading the image to for a fullscreen 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>. I will shortly post an article on optimising images online. This is for those of us who do not have Photoshop or Lightroom available.
