All About Images

Try and imagine a website without any type of image or graphics. It might seem novel at first — an intentional design choice, perhaps. However, after a while, it will most likely negatively impact the overall user experience. If you run an eCommerce store, a lack of product images means you’re unlikely to make any sales whatsoever. Service-based companies aren’t exempt either. Many potential clients want to be able to picture the people they’re working with or see visual proof of past projects.

Images are essential. However, they can also pose a problem from a web development perspective. There are many image related hazards that can trip you up, hindering the user experience rather than adding to it.

Any web design company will tell you that there are a strict set of rules that must be met when working with images. Following these will ensure that your website is accessible and engaging to all, which is the aim of any good digital experience.

‘Image optimisation’ explained

We all know that file size has an impact on how fast a web page is run. Fill your site with too many large files and your visitors will be left twiddling their thumbs while the page slowly loads.

Image optimisation is the process of decreasing file size to ensure that images and graphics don’t have a negative effect on the user experience. It’s important that images are not optimised at the cost of quality. Many visitors will admit that page speed has a significant impact on their willingness to buy from an online store. However, an equal number say that they rely on product photos when deciding on a potential purchase. The trick is finding the balance between the two.

Benefits to optimisation

Aside from the above mentioned issue of load speed, there are several other benefits to optimising your images.

SEO: SEO, or search engine optimisation, is often discussed purely in terms of written content. In reality, any digital asset, from a photo to a blog post, can be optimised for search engine purposes. Images are an incredibly valuable SEO asset. Using unique graphics, naming files correctly, writing SEO friendly alt-text, and optimising images for mobile search are all big ticks in Google’s book. More information can be found in Google’s ‘Google Images best practices’ dossier.

Accessibility: The aim of any good website is to ensure content is accessible to all. This includes those with a visual impairment. By including alternative text (also known as alt-text), those using screen readers can gain an accurate understanding of all elements of your website.

Optimisation techniques

Image optimisation is not difficult, but any web design company will tell you that it should be factored in from the very early stages of development. Going back later on to optimise images and add alt-text can be a tedious task.

Popular and proven image optimisation techniques include:

Correct use of image names: Depending on where you have sourced your images from, their default name is likely to be something along the lines of IMAGE1090.jpeg. But, did you know that file names present another excellent opportunity to optimise for SEO purposes? By naming the image file using descriptive language — eg. an image of a fridge could be named GREY-FRIDGE-STEEL.jpeg, you are helping Google’s bots better understand the content of your site.

Including alt descriptions: As mentioned alt-text descriptions are important from both an SEO and usability perspective. Screen readers use them to provide more in-depth information about a site to those with a visual impairment. Google uses them to gain a more accurate understanding of an image. To add alt-text, you will need to delve a little behind the scenes into your website’s code. If you’re not too confident in this, reach out to a professional SEO team or a company that provides web development services. Ensure that your alt-text is plain, concise, and includes any relevant product information (like model or serial numbers).

Choose the right image format: We all know that images come in a variety of formats — JPEG, GIF, and PNG being the three most common. When it comes to web images and optimisation, a JPEG file is your best choice as it will retain a reasonably high degree of quality even after being compressed.

Compress your images: Which brings us onto our last point, image compression. Image compression is exactly as it sounds, decreasing the size of your images to ensure they don’t take up too much space or weight on your website. Images can be compressed using any number of photo editing programs, including Adobe Photoshop and Canva. The recommended size of your images really depends on what platform was used to build your website — speak to your web development services team to find out more.

Images are where your website really starts to come to life. It’s an exciting stage of the development process — just ensure you keep the importance of image optimisation in your head to promote a great user experience for all.