i Click here for our COVID-19 update
phone-number phone-number email

Tips for Using Images Effectively in Web Design

27th June 2018

Amongst the many tools open to a web designer to wow visitors to a given page, the humble image remains one of the most important. Though it has less technological sophistication than a cascading menu or a video background, a great photograph or drawing will capture the eye and the imagination in a way that is hard to match.

That’s perhaps why imagery has become so important again in web design of late. From a flat trend for icons and bold text at one point, we have cycled back to the use of great photography especially – the ‘hero image’ is now a mainstay of many a website, dominating a page and defining its look and feel.

Humans have a visual imagination, and the ‘hero’ image responds to that – and leverages it. Your first job on any web page is to keep your user’s attention. You want to reduce the bounce rate – the number of people leaving a page almost immediately because they find it some combination of boring, confusing or difficult to use – and imagery is a great way to connect immediately with your audience.

Maximising the effectiveness of your imagery, then, is a key means of maximising the effectiveness of your website. Grabbing attention, holding it and then directing it to the content your users want to see, or the content you want them to see, are all roles that can be served by imagery. So. How to make your site look its best?


  1. Use a high-quality hero image. The point of a hero image is that it dominates the screen. But when an image takes up most of the browser space, it needs to look incredible. As screens get sharper and more high-res, the impact of a stunning large-format hero image on a landing page is vital – but can only be achieved by matching the crispness of your users’ screens with the sharpness of your image.


  1. Consider cropping images. Care should be taken to draw the user’s attention to the main focus of the image, without leaving too much unnecessary empty space. Think about what the photograph is trying to convey – and where it is meant to be directing your user’s attention. Put that in the centre of things, even if you have to cut something else out to achieve it.


  1. Use images for UI elements and icons. Now this one’s a bit clever. Depending on the website you’re creating, images could be a really great way to illustrate particular sub-pages, or stories, or blog posts. Don’t full back on icons or clip-art – use crisp, exciting photography throughout your site. It’ll give every page an impact and identity … and your users will thank you for it.


Is your website ready for its close-up?


Contact Image Plus for Web Design & Development

If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.

Contact us on 024 7683 4780 or send us an email at info@image-plus.co.uk.

The latest from our blog

Apr 05

How can CRO and UX be used together to create an effective web design?

CRO and UX are – or should be – bosom buddies. They go together like peas and carrots. They’re a dynamic duo. In short, take together they’re your website’s secret... More

Mar 08

Wwwomen Through History

It's International Women's Day, and if that's not an excuse for a history lesson, we don't know what is. The history of the internet and digital technology is full of... More