Optimising images for your website is so important. Without this basic step, you risk frustrating or even losing website visitors with slow-loading pages. A slow website can have a negative impact on your user experience, your SEO and the planet – yep, slow loading websites produce more CO2! If you want your users to have a great experience on your website and you want search engines to show them your content in search results you NEED to optimise your website images!!
It’s important that when you then take over updating your website that you’re not adding very large images to pages or blog posts. As a rule, website images should be no larger than 250kb and should be much smaller if the image doesn’t need to be full width.
For almost all websites I’ve created this year the images sizes used have been the same. You want the image to be no bigger than it will be when displayed on your page but do bear in mind that images in columns may need to be bigger on tablets as they can become full width. With all this in mind, and remembering that your website set up is likely individual, here are some examples of image sizes I use on my websites:
Full width images: 1600 x 1067 px
Half page width images or blog images : 980 x 654 px
Square images: 980 x980 px
We covered why you need to be optimising your images for your website and the different ways you can do that in our recent blog post. Today I want to cover one online tool that I use to optimise images and make sure that they’re not going to slow down my client’s websites.
How to Optimise Website Images Online with Birme
This online tool gives you the option to optimise your images for free and in a really easy way. It’s a very quick and simple way to optimise your images for web and has a lot of options so we’ll go through all of those now so that you know how to use it.
Navigate to birme.net and you’ll be greeted by this screen asking you to choose your images.
You can just select images from your computer and drag and drop them or you can click the browse button and have a look for the images that you want to optimise.
Birme Settings to Optimise Website Images Online
1. Resize and Crop
The first options that you can pick are for the width and height of your image. If you download images from Unsplash, your photoshoot or even your phone, they’re usually going to be very large. This option allows you to reduce the width and height of your images and that helps to reduce the file size.
If you have a portrait image and you are cropping it to be landscape or square you can drag the crop area of each image so that the subject is nicely positioned.
2. Borders
Birme does have a border setting so you can add a border to your images and you can pick the colour and thickness. If you want to have a border on your images it should be added on your website rather than the image itself so let’s skip this one.
I would definitely recommend that you do not use this setting when you’re optimising your images! It really restricts you if you want to change the style of your images later on.
3. Image Format & Quality
The next settings are for image format and quality. The quality will be set at 80% as a default but you can adjust this to get the desired result. I find that 80% is generally OK but you will want to check the quality of your images and the file size so that you can reduce or increase the quality for the best results.
If you have added any PNG files then an option to convert them to JPEGs will appear. JPEGs generally have a smaller file size and can be compressed without losing quality. Be aware that JPEGs do not support transparent backgrounds so if you’re resizing a logo or other graphic that needs transparency you want to keep it in PNG format.
4. File Names
Birme.net does have the option to rename your files which can help with your SCO optimisation, however, you must add ‘-xx’ at the end of your filename as this is where the numbers will go. Your images will not download without that. If you have a Mac, you might consider renaming your files in the Finder options instead.
5. Save your optimised images
Once you have all the settings adjusted you can click the save as zip or save files option to download your optimised images to your computer. Check the image file sizes and the image quality to ensure your website will load quickly and look fabulous. You also have the option to remove all the files and start over with a new batch, great if you have different keywords or topics to cover!
That’s it, you’re good to go!
If you need help keeping your blog updated or making changes to your site, including adding images then just reach out to us at hello@meancreative.com. Thanks for reading and we hope this post will help you create faster websites that engage your perfect people! Interested in working together? Find out about our Website Design Experiences and One Day Website packages and then just get in touch to chat with us about your project
