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!
