Why Optimise Images On Your website?
In a word – speed. Every great website has great images, but adding large images to your website reduces page-loading speed, which is a bad user experience, and search engines including Google will penalise for this – the likelihood of appearing on page 1 of the search will reduce.
Best Image Size
This is where optimisation comes in – there is no point having a high-resolution image just to be viewed on a computer screen at a small size, even more so on a mobile phone. You need to reduce the image size to suit the size it will be displayed by your audience, and for most websites, this includes optimising for mobile phone viewing too. You may want to save 3 image sizes, for desktop, tablet and phone.
How To Check What Size An Image Is
You can right-click the image (either open or closed) and select properties or file info – this will tell you the image size width x height (in pixels). It will also show the file size in Kilobytes.
Check How Your Website Appears On Mobile
In the same inspect mode mentioned above, you can also change the webpage view from desktop to tablet or mobile quite easily, using the icon next to the inspect icon. A variety of different phone sizes are available, you can choose the one you want. Mostly you will see that they all behave in a similar way, the content has to be rearranged, and menus change from horizontal to vertical, as you reduce available screen width. Alternatively, you can reduce the size of your browser window width to make the webpage think it is displaying on a phone.
Inspect An Existing Webpage To Check Image Size
There are many tools you can use to check the image size needed on your website, or you can ask your developer. It will be built to a particular size (in pixels) for each section. Some pages may be customised with special image sizes, but mostly they will follow a pattern throughout the website. One tool we use is the PixelZoomer chrome extension. This takes a copy of the webpage you are on, and you can easily measure image dimensions in pixels. Another way is to right-click the page (in Chrome) and select “inspect”, then click on the inspect icon in the top left of the inspect pane. Hover over various parts of the page you are inspecting and it will display the image size.
How Do You Make Your Images Smaller?
Once you know how big the space is on your webpage, and how big your chosen image is, you can optimise your image. There are three main ways to do this:
- Use an image editing platform, such as Canva, which can re-size the image to any size or shape you choose.
- Compress the images (one by one, or in small batches) with image compressing or optimising software. This is often quicker, but you generally do not choose what size the image finishes, so a bit of trial and error may be involved. Two examples of free image compression websites are: https://imagecompressor.com/ or https://compressor.io/
- Use an image optimisation plugin on your website. Some websites come with this built-in. If you use WordPress, there are a wide range of plugins available. One of our favourites is Imagify which has a free version good for around 200 images per month. ShortPixel is another popular option.
Pros & Cons Of The Most Common Image File Types
Vector images
Vector Images are the fastest loading and crispest/clearest image types for simple graphics. Often less than 10kb, even if very large in size.
Curved lines never go jagged or pixelated as low-res jpeg images do.
Not a format you can use for photos, but a great format for things like simple text logos, shapes, and lines, and anything that has a simple outline and a solid fill.
Examples of vector file types – svg vs eps images:
- .svg – a great vector format for websites
- .eps – another format of vector image, however, designed for the world of print, not websites – convert eps images into svg if you want to use them on your website
Raster Images
The term ‘raster images’ basically means ‘not vector’. Raster images are used for photos of other images made of pixels, rather than lines and shapes, sometimes call bitmaps or just image files.
Examples of raster file types – jpg vs png vs webp images:
- .jpg – or Jpeg – a very common file type for photos, and one of the best for websites. Often has the best visual clarity for small file size. One drawback is you can’t have a transparent background
- .png – allows transparent background
- .webp – Google’s preferred file type for web images – very similar to JPG, but sometimes smaller, also supports transparency
How To Use IrfanView Software
If you have large images and want to reduce the size of them offline before uploading to your website, there is a great free image editing software program called IrfanView. Another alternative option is Squoosh (from Google).
Below are some instructions on how to download and then use the IrfanView software to optimise images for your website.
We recommend that you use the 64-bit version unless your computer is over 5 years old or is running Windows Vista.
Firstly, you will need to install the software – this can be done by visiting the website and the option to download is right on the front page. Follow the steps for set-up keeping all the default settings.
Once this is done, find the image that you want to edit in your folders. Right-click, and hover over ‘Open with’. This will then show you an option called ‘IrfanView 64-Bit’. Use this.
Using the third icon along from the left, called ‘Save As’, you will now need to ensure that the slider that pops up to the right is somewhere between 60-80% quality – we recommend trying lower, and if the image doesn’t look great increase the bar up slightly until it is clear.
Just before saving, ensure that it is saving as a .jpg at the bottom. We don’t recommend that you use .png for phototype files, as the size normally ends up larger than .jpg.
If you’re still a little unsure about this, please call us and we will be happy to offer help where we can!
Our Reviews
Caroline KontosJune 4, 2024.I recently had the pleasure of working with UClimb on behalf of Scenario Architecture and I was very satisfied with their service. Their team delivered a comprehensive SEO audit that was both detailed and insightful, helping us understand exactly how our website was operating and where the gaps were that needed improvement. Communication throughout the process was excellent. They kept us informed at every step, answered all our questions promptly, and provided clear explanations for their recommendations. This level of transparency and engagement is rare and much appreciated. The reporting was top-notch, offering us a clear and comprehensive roadmap for optimising our site and improving our search rankings and how to prioritise the next steps. It's evident that UClimb is committed to quality service and client success.KleanSTONEJune 22, 2023.The UClimb team helped us with optimisation of our e-commerce site and SEO support. We were very happy with all of their work and the results spoke for themselves. They were quick to respond, patient and very professional. Would highly recommend.Nishana ShukoorNovember 2, 2022.Excellent team to work with! Highly knowledgeable, proactive, and open to working with us to figure out what is best for our company’s specific needs. We were especially impressed with their prompt and open communication. Would highly recommend them to anyone looking for SEO and digital marketing expertise.Rob TuffinOctober 27, 2022.Professional and quick-responding SEO agency with a focus on ROI. Frank and pragmatic approach, including an honest appraisal if ROI isn't forthcoming or as expected. I would highly recommend U-Climb, a safe pair of hands for your website optimization.Carlton SimpsonSeptember 13, 2022.Great company to deal with and good communication. Highly recommendedLuan LazarusSeptember 7, 2022.UClimb have been very supportive and transparent in helping us to achieve better SEO results, we look forward to working with them long in to the future and increasing our results and incoming enquiries!Damilola SogbesanSeptember 6, 2022.Thanks for all the work and research on the service and really appreciate and like the changes you have made on the website.Scott SimpsonFebruary 7, 2022.Had an excellent experience with UClimb - would fully recommend. Highly knowledgeable, efficient and very good value for money.Rick ClarkJanuary 27, 2022.We've used UClimb for several months now and found their services of great benefit to our company in the ever-evolving world of Google optimization. Daniel and his team will work with us and review our progress to support monthly SEO activities and any additional campaigns. Would recommend you contact them for a chat!