Compressing the file size

With some image files pushing the recommended limit of 100kB on full-sized web pages before they are edited, it is important to compress your file before uploading it onto your website. This can be done through a photo editor like Photoshop, or online editors such as PicMonkey.

Images with a large file size can take longer to download to your audience’s browser and slow down the overall page speed of your website, which can cause many SEO issues like increasing your bounce rate.

Website owners will often opt for the lazy option and allow a browser resize a large image. This is done using height and width tags that can be added with CSS coding. Although this changes the physical size of the image on your screen, the same large file size is being hosted and displayed – it doesn’t actually decrease the file size!

Choosing a file type

There are three main types of file that are used when uploading images to a website. These include; JPEG, PNG and GIF.

JPEG files can be identified when the file is name with .jpg at the end. The historic use of this file type means that it has come as standard to use on the internet. Due to them being able to be compressed easily, they can result in images that are of good quality yet small in file size.

PNG (.png) files are becoming a more popular choice with website owners as they support a wide range of colours without compromising on quality. However, they usually are much larger in size than JPEG files.

GIFs are commonly used as methods for displaying low-quality, moving images that can be used for decorative purposes. They are ideal for using in a small space on a web page as they don’t show the detail that many images need – physically larger GIF files can be grainy and/or blurry.

Naming your image files

Before uploading your image to a CMS, pick a descriptive file name that explains briefly what the image is about. Photographs taken on a camera will automatically be given a generic file name but remaining with this means that you’re missing out on a trick to boost the visibility of your page.

When it comes to SEO, it’s important to use keywords that are relevant to your page when naming an image if it is to have any sort of effect on your rankings.

Let’s say you’re writing a blog post explaining your opinion on the new Xbox One. Re-naming your image from DCIM_5830 to ‘Xbox One review 2016’ means that you’re creating a file that is keyword-rich and relevant to the copy on your page, helping search engines to recognise it as a valuable page that should be indexed for the search term.

Alt text

Standing for alternative text, this tag can help a search engine spider to understand what an image is detailing since they aren’t able to automatically view images.

Similar to file name, good use of alt text happens when you use the same keywords to describe what the image is about. For example, the image featured in the review of the gaming console could be something like ‘Xbox One controller’ – a piece of descriptive text that helps a spider to realise that your images are relevant to the content.

Alt text can be added to images uploaded to WordPress in the media library when you select an image, or added in HTML using the following code:

<img src=”Xbox-One-Review-2016.jpg” alt=”Xbox One Controller” />

Optimising your images for website upload is simple, but you may not have recognised the many benefits that compressing, re-naming and changing the type of file your image has can have on your audience and potential customers. Considering that 78% of SEO issues are related to images, it is important to make sure that they’re well optimised!