July 30, 2019
A banner image (also called a “hero” image) is the big picture that you see when opening up a website design. It is usually located at the top, but its location can vary as recent design trends shift and designers try to make their websites look more unique. In this blog, I will be talking about how to choose the correct banner for your site.
What is the Perfect Banner Image for your Website Design?
If you go with a generic “text to the left” style banner image then you have to find an appropriate graphic for the back. In this case, the best solution would be to find an image that has a lot of free space on the left so that the text can be visible. If the image is too busy on the left side then you might run into the issue of illegible text. If the image is busy overall then the best solution would be to put a dark overlay over it with white text on top.You should also look for an image that has a more realistic feel. Be careful when using stock images as they might look too “fake” for the viewer and you want to make sure the user believes your website and its authenticity. There are several free resources for high-quality images such as Unsplash and Pexels, for example. Websites like these have more authentic images that don’t look as staged as images from Shutterstock or Adobe Stock.
What Size Should Banner Images Be?
Ideally, the banner image should be landscape. If picking a portrait image, then the scaling of it might be off. See below for a simple guide to follow for size:
“The minimum resolution on most computer screens is 1024 x 768 pixels, so we recommend a hero image of around 1600 x 500 pixels so you can maintain a 16:9 ratio as a good rule of thumb. Then depending on how it responds and looks on mobile, you might need to switch out the hero image for a smaller screen to 800 x 1200 pixels.”
Alternative Banner Image Layouts
With upcoming design trends, we are getting the option to be more creative with our hero images. There are multiple examples across the web where images are used in a non-traditional way. Shifting it to the left or right, leaving one side blank with a solid background, or removing the image completely and playing with shapes, videos and animation are some examples. One of the coolest examples is when the image has animation like clouds moving behind a mountain as you scroll or water moving in the distance. It is important to keep your website clean and creative at the same time, and you can achieve that with a slight animation in the background of an image.
Example: Hero Image Animation 1
Example: Hero Image Animation 2
Finding a photo can be the hardest part of designing a website. Sometimes a designer spends hours looking through images to find the one that will direct the design. When looking for one, try to find one with no other text on the image. And make sure it fits the context of the website. It doesn’t always have to be cliché (ex. Laptop image for technology brand), if you go more abstract or visual it can still send the message.
Find out more about design and design thinking here!