If you’re responsible for uploading images onto your website, whether for the main website content, or just for blog posts, you should always optimise your image first.
This post will explain why image optimisation is important, and I’ll also give you some tools and tips on how to optimise website images.
Why is image optimisation important?
When a web developer talks about image optimisation, this is just a fancy way of saying ‘making the image file smaller’. Websites are made up of files and data, and if you have a lot of data you don’t need, you could be drastically slowing down your website.
A slow-loading site is bad for both user experience and SEO. Nobody wants to wait around to watch your images slowly loading in on the page, and Google uses page loading speed as a factor to determine how high your pages should rank. If you’re interested in increasing your search engine optimisation, I have some tips for you here.
Larger files containing unnecessary data take up more space on the server where your website is hosted. Depending on your hosting package, you might have a certain allocation of server space, which you don’t want to clog up with unnecessarily huge image files.
How to optimise website images: Method 1 – Resizing your image
The most common screen resolution for laptops and PCs nowadays is 1920 x 1080 pixels. This means that even if you want to display an image at maximum quality and size on your website (for example as a background image), the largest it needs to be is 1920 pixels wide.
Most of the images you might download from a stock image website such as Shutterstock will be large, high quality images which are often at least 5000px wide. This is unnecessarily large for your standard featured blog image. (On the other hand, if you’ve ever uploaded an image and it looks pixelated or stretched, this might be because it’s very small, but you’re trying to display it at a size that’s too big for it).
If you’re uploading an image as a small part of a web page or blog post, there’s usually no need for it to be more than 600 – 800px wide. Bear in mind that even if you display it as a small image on your site, the image that you’ve uploaded onto your site could still be a large file.
How do I check the dimensions of an image stored on my computer?
This varies between operating systems. If you’re using a version of Windows you should be able to right-click on the image stored on your laptop or PC, go to ‘Properties’ and then ‘Details’. If you’re a Mac user, click once on the image to select it, and press Command-I to open up information about the file.
How do I resize an image stored on my computer?
You shouldn’t need any fancy software for this – most operating systems come with a built-in image viewer with basic editing tools.
If you use Windows, you’re probably using Windows Photos to view images stored on your computer. Double click on a photo to open it, and then click the three dots at the top, and select ‘Resize’. From here you can edit the dimensions of the image. Don’t forget to maintain the original aspect ratio.
If you use a Mac, you’re probably using Preview to view and edit images. Double click on an image to open it, then in the top menu bar select the ‘Markup’ icon. From here you can select ‘Adjust size’.
Remember that once you’ve reduced the dimensions of an image you won’t be able to increase the size again. It could be a good idea to keep the original image, but save a smaller copy of it in a folder called for example ‘Optimised Images’.
How to optimise website images: Method 2 – Compressing your image
To put it simply, compression is stripping an image file of some of its data, reducing the quality slightly, but usually not to an extent that would be noticeable to website visitors. Compression is useful alongside resizing to obtain the smallest file size possible, to make sure that you’re optimising the speed of your website.
How do I compress an image file?
The easiest way to compress an image before you upload it to your site is to use one of the many free online tools out there. My favourite is TinyPNG – it’s fast and simple to use, and you can compress multiple images at a time.
If you use wordpress, you can also use an image compression/optimisation plugin such as Smush – a great free plugin which will automatically compress images uploaded to your website.
How to optimise website images: Method 3 – Convert to WebP
WebP is a more modern image format for use on websites. WebP images are 26% smaller in size than PNG images, but with no loss of quality.
Once you’ve converted an image to WebP, you won’t be able edit it on your computer with the resizing tools I’ve mentioned above, or with standard graphic editing software. So make sure you keep a copy of the original on your computer if you plan to use the image for something other than your website.
Bulkresizephotos.com is an amazing free tool for not only converting your images to WebP, but also automatically scaling images by a percentage of your choice.
It’s a great option if you have a lot of images you’d like to upload to your website, and the resulting tiny file sizes are impressive.
Summary: How to optimise website images
You should now have a good idea of how to optimise website images, and the reasons why it’s important to do.
Even if you’re not using one of the operating systems I’ve mentioned, it’s highly likely that your computer will come with a basic image resizing tool, and a quick Google should identify it.
Free online tools are also great for resizing, compressing and converting your images to a more appropriate file format.
It may feel like an annoying extra step to optimise your images before you upload them to your site, but you’ll be rewarded with a fast-loading website, a better user experience, and higher chances of good SEO rankings!
Once you get into the habit of it, it becomes very quick and easy to resize an image when you go to save it on your computer.
And if you work with a web designer, they’ll thank you for it!