Let’s talk image optimisation for websites.
We all love a website with big, bright images that stand out with the look-at-me vibe. But those big, beautiful images could be slowing your site down big time and affecting your SEO (Search Engine Optimisation).
When starting out, a lot of business owners or bloggers upload images directly onto their sites without realising they’re making a mistake. If this is you, don’t feel bad. It’s more common than you might think and I’ve even seen professionally designed websites with unoptimized images.
But, what if I told you that you can have your big, beautiful images and your speed too!
Uploading optimised images is easier than you might think and can save you a lot of heartburn later on.
So, what is image optimisation?
Image optimisation is delivering images through your website at the lowest possible file size without losing quality. Images are reduced in size and compressed to remove bloat to reduce the load on the server and improve site load times. The larger the image, the longer it takes to load.
Images that are optimised are reduced in overall file size and dimensions. For example: an image in its original format might be 2MB in size with pixel dimensions of 3000 x 2000. This is a large image and definitely too big for any web project.
An optimised image will be something more like this: 103KB in size with dimensions of 730 x 500 pixels. The image will still look good, but take up a fraction of the space and load times.
These two images are the same, except one is optimised and the other isn’t. Not that this is bad for my blog, but I wanted to show you the difference, or lack of difference.
The first image is optimised at 1000 x 667 and 46KB in size. The second image is 2000 x 1334 and 596KB in size.
Why don’t I need images to be so big?
Well, to put it quite simply, a wide screen is 1920 x 1080 pixels. Therefore the largest computer screen your website will likely be showing on is 1920 pixels wide. A full width image can be uploaded onto your site at 1920 pixels wide, but there is no need to upload an image that is 5000 pixels because it just isn’t necessary. All that is doing is asking your website server to unnecessarily reduce the image size before it is displayed. Now think about the size of a mobile screen and how much your server is reducing that same image for a screen that is say 720 pixels or less?
The other thing to think about, when you have such a large image above the fold (the hero image at the top of your site and first thing to load) that is the first thing your site is loading and the longer it takes to load, the slower your site will be. Now, what if you had 3 or 4 images of that size trying to load? You’re now talking 20MB of bloat trying to load at once. This is what happens when you have sliders on your site, especially sliders above the fold. Sliders on your website can slow your site down even more, especially when they aren’t optimised.
Will smaller images help with my website hosting space?
Absolutely! Your website is housed on a server, therefore everything you upload onto your website is going onto that server, and therefore taking up space. The heavier your images are, the more space and server resources they are taking up. The less space your site is taking up, then the faster your site will be and the less bandwidth you will be taking up.
So, how do I easily optimise an image for web?
There are a few tools that can do it and I will list them below, but here’s the ones I use and what I will use in my demonstration video below.
They are:
To see how easy it is to optimise an image for web, I’ve created a short video. It really is this easy. As I said, I use PicMonkey and have been using it for a long time. I pay $19 a month for the premium features and I also use it for photo editing and graphic creation. It’s my preference as I like how easy it is to use and the fact my images and graphics are optimised in the one program.
Other free image editing programs you could use are:
NOTE: In my video I didn’t rename my image. Please don’t upload an image to your site with a title “shutterstock-345476743” 🙂 Always give your image a descriptive name so you know what it is and always add an alt tag when uploading to your site for Google.
How to optimise an image for web
As demonstrated in my video, simply follow these steps:
- Select the image you wish to upload.
- Upload it to your chosen image resizing tool – if your image is still in its original high-res form. My tool of choice is PicMonkey.
- Resize your image to the size suitable for the space it is going to be loaded into. i.e. 1920px if it’s a full width hero image or 1280 if it’s a blog image etc.
- Name your image with a suitable title.
- Download your resized image to your computer.
- Upload the image into TinyPNG or your chosen image optimisation program and lower the resolution to reduce the overall file size. If your chosen image resizing program had the option to download in low res, then you can skip this step. An over-optimised image can lose quality.
- Redownload the optimised image and then upload to your website.
If you’d like to know more about image optimisation and managing your website, my Navigating WordPress eCourse has this covered and more.
In summary…
Do’s and Don’ts
- DON’T upload images straight from your camera or phone to your website – they will be way too big.
- DON’T upload images that are heavy. A 4MB image that is 5000 pixels (px) wide is way too big for web.
- DON’T upload an image larger than the space it needs to fill. The largest you should need to upload is 1920 px.
- DO reduce the dimension size of your image to fit the space.
- DO reduce the file size of your image to reduce server load times and improve load times.
- DON’T over-optimise your image or make it too small as it will become pixelated and lose quality.
