What is Image Optimisation?Image optimisation is the process of adjusting aspects of the imagery that is used across your website. It helps you achieve the perfect balance between quality and readability for humans and robots alike and is a key part of SEO. Factors such as the file size of your image, the file type (JPEG, GIF, PNG) and even the thumbnails in your site can all have an effect on the load speed of your website, and therefore your SERPs (search engine results pages) rankings. So, what does optimising your imagery entail? Let’s take a look.
Image File SizeAdjusting the size of the image that you’re uploading to your site is a key step in optimising your website’s imagery. Not just in terms of the image dimensions, but also when it comes to image file size. There are many ways to change the file size of an image, Photoshop is, without doubt, a crowd favourite for all photo editing needs. However, Photoshop is expensive and there are many free alternatives, such as:Kraken.io TinyPNG / TinyJPG Compressor.io GIMP (a free alternative to Photoshop)Additionally, though Photoshop’s “Save For Web” feature will help to compress the file size using a file compressor site can also shave off further KB, so there’s no harm in going directly to the image compressor sites.One thing to keep in mind – the larger your imagery, the longer it’ll take to render. If your image’s dimensions are too large, this can slow down the load time of your website which can be detrimental to your site’s ranking on the SERPs. The good news is, changing the size of your imagery is easier than ever. If your website is created on WordPress, you’re able to scale the image inside the platform, or alternatively there are plenty of image re-sizing websites out there that can help you. But ultimately the most flexible way of resizing and cropping imagery is to use a programme like Photoshop or a free alternative such a GIMP.
Alt AttributesAlt attributes, (a.k.a alt text or alt tags) are the text that displays when a site cannot render the imagery. They’re used by SERPs to determine the nature of the image that’s being displayed. Editing the alt attribute in your CMS to be relevant to the image being shown helps visually impaired users understand what each picture is showing.It also adds value to your SEO, as crawlers will crawl the alt text of images, which means they are a useful place to put in target keywords where applicable. Additionally, maintaining relevant alt attributes is an excellent way of getting product images onto image results too! It’s also worth bearing in mind that if your products have varying serial numbers or product codes/variations (e.g. FAB28LYW3UK), adding these to your alt attribute will help to rank the image to that product code.However, there are some things to bear in mind with optimising your alt attributes. Whilst they should be relevant to the keyword that you’re targeting with the image (i.e. SMEG Fridge), it’s important not to fall victim to keyword stuffing in any part of your website, including your images. Secondly, don’t go crazy with the alt attributing. Not only could you be penalised by search engines for over optimisation, you could also end up getting the wrong image ranking for the targeted keywords i.e. a thumbnail over the display image. (See thumbnail optimisation)
Appropriate and Relevant File NamesNot only do crawlers like Google’s bots look at the alt attribute of an image, they also look at the given file name of the image. When a picture is taken on a digital camera, the camera auto-assigns it a name – usually something along the lines of DCIM003. DCIM003 does not tell search engines what the image is. Instead of leaving the file name as it is, look at the image that you’re uploading – if you were a user, what search terms would you use to find that image? I.e. Yellow Smeg Fridge / Smeg Fridge etc. Try to incorporate these words into the file names for key imagery across your website.A good way to think about this is to pretend you’re Google for a second. If you were Google and you stumbled upon an image called “DCIM003.jpg”, how are you supposed to know what that image is of? However, if you stumble upon an image called “Yellow_Smeg_FAB28LYW3UK_Fridge.jpg”, you can pretty safely assume that inside that picture is a yellow Smeg fridge. Appropriately naming your image files is a crucial step in image optimisation.
Select the proper file typeWhen it comes to image optimisation, there are three primary image types: JPG (or JPEG), PNG and GIF. Choosing which file type to save your image as isn’t just a matter of point and shoot. It’s important to understand the differences between each file type and the most appropriate instances in which to use each one.JPEGs
- Colour Palette: 16,000,000
- Supported Colour Space: RBG
- Loss: Lossy
- Primary Use: High quality imagery
- Colour Palette: 256
- Supported Colour Space: RGB
- Loss: Lossless
- Primary Use: Buttons, blocks of colour, silly reactions
- Colour Palette: 16,000,000
- Supported Colour Space: RGB/RGBA
- Loss: Lossless
- Primary Use: Transparent overlays
256 colour palette | smaller file size | will not provide the same image quality as a JPEG
16,000,000 colour palette | larger file size | increases page load time if used too regularly. I.e. instead of a JPEGThat doesn’t mean that they don’t still have their place on your website, though. Finding the balance between using an appropriate number of larger file sizes that support your beautiful web design (transparent overlays), and maintaining functionality, is the key to maintaining a stunning website and your SERPs rankings.