Web developers use background images to fill website backgrounds, complement their designs, provide additional context, or provide a backdrop for website content. Businesses use them to create great first impressions, cement brand imagery and perception, and convey brand stories. All these mean that getting your background images right is crucial to ensure they are a useful part of your website.
Use Background Colours to Make Subjects Stand Out
There are situations where you want the image’s subject to stand out. One of the best examples is when creating headshots to use on your website’s team or about us pages. In these cases, a busy background can distract from the subject and make these images ineffective. To rectify this, use background colours like indigo that make your subjects stand out. Using the right indigo colour code when replacing a busy background will provide excellent contrast against people’s skin, making them stand out more.
A crucial thing to remember is that you should choose colours that complement the rest of the website and align with your brand colours. For example, the indigo backgrounds mentioned above will not stand out as much if your website already uses other shades of blue or purple.
Optimise Your Background Images
Images are typically one of the heaviest assets on a website. For this reason, they can impact the loading time and lead to a poor user experience. To rectify this, optimise your background images for size and weight.
Optimising for weight is straightforward because you only need to compress the images to make them lighter. When doing this, consider how you will use the compressed background images. If the background is crucial and will stand out on the page, opt for lossless compression even if that will result in a slightly larger file size.
You can apply heavier compression if you do not mind the background images looking blurry. This can be helpful in cases where the background image is not a prominent part of the page’s design.
Before we look at optimising for size, you should understand how websites load images. A website loads an image and then resizes it to best fit the “container” it will be used in. If the image is larger than the “container”, the browser will resize it, which is an extra step that can impact performance.
The first way of dealing with this is knowing how large your containers are and resizing your images to fit them. The second is applying responsive image principles. To do this, you can add HTML code that loads the correct image size depending on the device.
This strategy allows your website to load smaller and lighter images for mobile device users. It can then load heavier and larger images for computer users whose devices have more processing power and who likely have access to faster internet speeds.
Ensure the Background Image Complements Your Brand
There is nothing wrong with liking a specific image and wanting to use it as a background on your website. Problems arise when that image does not match the rest of the website or your brand.
If you use such an image, you will force it to fit where it cannot, and your website will look sloppy and disorganised.
Another mistake developers make is choosing a background image and building a website around it. Doing this is designing a website backwards. Your design and the brand the website represents should guide your choice of background images, and not the other way around.
Consider Accessibility
It is common for developers to place text on top of a background image. While this is a popular web design trend, it presents some issues with accessibility. This happens when the images and text do not provide enough contrast to ensure the content is readable for everyone, including those with visual impairments and different types of colour blindness.
You can solve this issue in two ways. The first is setting up a focus group to see if the participants can read the text placed on top of your chosen background image(s). The second is using different tools to check the contrast between the two.
Both solutions should tell you whether you have done things right, whether you need to change the background images or text colour, or if you should use CSS to adjust properties like opacity and apply layers to make the text legible.
Images are essential for every website because they capture visitor attention and make websites visually interesting. However, your background images can present several issues that you should rectify if you want your website to be usable and provide a great user experience for all visitors. Following background image best practices will help you sidestep these issues before you encounter them and have to deal with them.
