Full-screen images used as homepage backgrounds are one of the biggest trends in modern web design, and for good reason. Compelling imagery is an effective way to quickly capture visitors’ attention, conveying information about your brand with minimal text.
Are you wondering how effective images really are? Posts with images typically produce 65 percent higher engagement rates than text-only posts, according to Inc.
If you’re thinking about using a full-screen background image on your website, here are five important tips to consider, including website background image size, image selection, and text overlay.
1. Choose relevant, eye-catching images
Naturally, image selection is one of the most time-consuming steps when implementing a full-screen background on your website. To effectively engage readers and convey information about your brand, choose a picture that’s both relevant and interesting.
For instance, if you’re selling pottery, an image of you working in the studio would be a better choice than an unrelated landscape. Similarly, a dynamic photo of you in-action will likely be more engaging than a plain product shot.
If you’re wondering where to find background images, you have a few options. Your best bet is to use your own images, as this will ensure it’s relevant and that there are no licensing issues. However, you should use a professional-grade photo, and if you don’t have one, you may want to browse license-free image sites like Unsplash.
2. Pay attention to size
One of the biggest concerns when using a full-screen background image is its size. Not only does it need to be the proper dimensions, but you must also pay attention to proportions, resolution, and file size.
The best website background image size is 1920 x 1080 pixels, according to Malama Online Marketing, and the ideal ratio is 16:9. The dpi (dots per inch) should be at least 72, yet you still want to keep the file size as small as possible to minimize site load times.
This might seem specific, but using the incorrect image size can lead to pixilation, distortion, stretching, and other viewing issues.
3. Carefully consider your overlay
Most people add text overlays (such as their company name and a few additional sentences) on top of their background images. The keys to successful text overlay include:
- Limiting text – If you include a long paragraph of text on top of a background image, you’re taking attention away from the visual. Keep your text short and sweet, as you have the rest of your website to go into more detail.
- Ensuring readability – The Grafix Artist Blog offers helpful strategies for effectively displaying text over background images. Overall, it comes down to proper placement and appropriate contrast to ensure the words are easy to read.
4. Test on different browsers
Chances are, you always use your favorite web browser when working on your website. But before you finish implementing a background image, it’s important to test out your design across different browsers.
If you use Chrome, for example, make sure the image also loads and displays properly when using Safari, Firefox, and Edge. You should also view your background on a smartphone and tablet to pinpoint any mobile display issues.
5. Make sure your site can stand alone
Finally, it’s important to plan for the worst-case scenario: if your image doesn’t load. Even if you do everything right, pictures may not load due to transfer issues, hosting problems, and other uncontrollable circumstances.
For this reason, your website should be able to stand on its own, even if the image is missing. Don’t rely on one picture to carry your entire site!
Need to find an eye-catching image for your new website? Watch the video below and find out how to get free professional photography through WordPress.com:
ABOUT THE AUTHOR
Go WordPress 