Home Articles Web design & development Using images on your website
Using images on your website and in other media communications should not be overlooked. Powerful images grab a visitor’s attention and draw them into the content. Users can spend 5.94 seconds viewing a site’s main image, but they will form their opinion of the site in less than a second.
Use relatable images to capture attention
Often relatable images capture attention – this is particularly effective on social media. Often relatable images capture attention. When used effectively, images of people can be very beneficial, including making websites appear more trustworthy.
The unexpected will get a second look
How many of you remember the famous advertising campaign for static, wood-burning stoves? They came up with a brilliant low-budget solution: take the stoves out of context – and put them somewhere outdoors – either on a beach or as shown here in the heathers – and treat it like your living room. It grabbed attention and was an effective campaign.
Be bold and imaginative. Do something unexpected and grab your audience’s attention. Throwing in a cute dog might also help!
Where to find images?
Original photography. If you have taken good, quality photos that would work well on the website – you should consider using them. Not only are they free option, but they will also be unique to your business and add a more personal feel to your website.
Professional photography. If you want original images, but don’t like the look of your own, with one internet search you may find professional photographers who will do the job for you. This may cost a bit more, but you will get exactly what you’re looking for.
Stock images. There are a host of images on the web which may well do the job. These will vary in quality and cost. Sites such as Pixabay, Pexels and Unsplash have great images, but they have likely been used many times across the web already. Other websites have a wider variety but may involve spending money, such as iStock.
Wherever you source your images, be sure to check you have the right use them on your website before you post them.
What size should your online images be?
Two measurements that tell you about an image’s size. One is the pixel dimension (px), the other the image resolution, which is defined as ‘dots per inch’ (dpi). 72dpi is the default resolution for digital use while for print you need 300dpi.
Ideally, your original image will have a large pixel size and at least 72dpi, if not bigger.
To find out the size of your image, right-click it and go to ‘properties’, then go to ‘details’.
What if my image is too small?
If your image is less than 72dpi – you can only display it at its current size, or smaller. If you want to display it at a larger size, you will need to find another image with a large enough DPI to ensure it isn’t blurry.
If you take an image that is too small and enlarge it, the image quality will be affected, and it will start to look fuzzy. The more you enlarge the image, the fuzzier it will get. Unless you are happy to use a low-quality image, there is no quick fix to get around it.
Using images on your website
Using images on your website can affect the download speed. When posting images on your website, make sure they are not larger than required – the larger the image, the longer it will take to download. This is particularly important if the image is being viewed on a mobile device.
Save for web. If you want to make sure your image is web optimised, use a photo editing application like Photoshop. And instead of simply clicking ‘save image’ it is best to select ‘save image for web’.
Scalability. The other consideration is how detailed the image is. It may work well on a large desktop computer, but will your image still look good when it is reduced for viewing on a mobile device, or when it appears on a social media share where it gets displayed as a thumbnail (very small) image? Clear, bold and simple images work better, and so are more scalable.
Use built-in functionality
To make adding images to your website easier, you can get functionality built into the website to optimise your images and do all the hard work for you.
A well-built website will automatically adapt the images you upload to fit with the web-page layout – whether that be for a large desktop or smaller mobile device. You can also get specific functionality added to your website that will automatically compress images or only allowing you to upload specified image sizes to reduce page loading speeds.
You can change whole sections of your website to make sure you display your content as effectively as possible on smaller devices – for example removing images if they don’t work on smaller screens.
Images also have search engine optimising (SEO) benefits for your website. By adding titles and alternative text (used for screen readers and displays if images don’t load) to every image you feature on your website, Google can better understand your page content and list it accordingly.
