How to Create the Perfect Background Image for Your WordPress Website
Have you ever heard about the 80/20 principle? It's also known as the Pareto Principle and it states that roughly 80% of the effects come from 20% of the causes.
Bear with me because, even if you're not into math, this principle will prove itself incredibly useful to improve your website design in very little time.
After looking over hundreds of homepages during the 5 Day Better Homepage Challenge, this principle has proven once again to be true.
Roughly 80% of the websites we looked at had the same troublesome element causing a majority of the problems.
The problematic element? Your background image.
We noticed that you like big, full-screen background images on your homepage.
And we understand. A well chosen image will instantly offer a WOW-effect to visitors.
Unfortunately, the background image was also causing roughly 80% of the problems we identified.
A poorly picked background image will actually hurt the effectiveness of the homepage.
In this article you’ll discover how to pick and create the perfect background image and give your homepage that design boost you’re looking for.
The Most Common Problems With Background Images
There are two obvious and two less conspicuous problems with background images.
The two obvious problems are speed and readability.
We noticed that many background images took a long time to load. This happens when the image is too big or not optimized for the web. This is annoying for visitors, but is also a negative factor for SEO.
The second and even bigger problem is readability. Unfortunately, some images just don’t play nice with text overlays which can make your actual homepage message impossible to read.
The title of your homepage is the most important element of the page. It's what gets visitors to stick around and read on. If that title is hard to read because it doesn't overlay well on your background image, chances are that new visitors will bounce rather than squinting to figure out what your website is trying to offer.
The two less obvious problems are related to your brand image and the clarity of your message.
Not every business can afford to have custom images taken by a good photographer. Luckily, there are a lot of websites that offer free, natural looking stock images. But this also means that everybody has access to the same photos.
Using the exact same stock image as your competition can hurt your brand image and make you blend in rather than stand out from the crowd.
The choice of your image also plays a big role in the clarity of your message.
Because of the growing trend in full screen background images, we’ve seen businesses use them even though the actual image has nothing to do with the product or service they provide.
But you shouldn't use an image just for the sake of having an image...
If you can not find a photo that’s closely related to your business, ask yourself if using an image is the best choice here. You can make a good looking design using colors and patterns rather than images. That's exactly what the websites below are doing.
Having an unrelated image is bad for clarity, but so is counting on the image to do all the talking.
If the image is necessary to understand what the website is about, you will have a big problem with SEO.
Search engines can only read code. They can not “see” images. An image like the one below will never help the site rank for anything Crossfit related.
The only thing Google can read on this image is "Become a Better You".
Although you can add attributes to your images to help search engines understand what the image is about, it will never be as visual for your “human” visitors or have the same impact on your rankings as words in a big homepage headline will.
Now that we’ve covered the 4 problems with background images, let’s see how you can avoid making the same mistakes. It will only take you a few minutes and all of it can be done with free online tools.
What Image Should You Choose for Your Homepage Background?
First question: What image will help you communicate your core message?
Brainstorm a bunch of words you would like to have pop up in the visitor's mind when landing on your website.
Off course if you have original, high quality photos, that’s even better.
Look for an image with uniform colors. A text overlay on an image with very dark and very light areas will always be harder to read than a more uniform image.
Download the photos you like in a resolution that's at least 1920 px wide.
Let’s Kill Two Birds with One Stone: Readability and Brand Image
Now there is one simple trick to making any image instantly more suitable for a text overlay.
What this simple trick?
Adding a background overlay.
Let me show you how to do this by using a free, online tool called PicMonkey.
You'll first discover how to use a standard overlay and then we'll ramp it up a bit and use a gradient overlay.
The Need For Speed
Now that you have your image in the right dimensions, it’s time to optimize it for the web.
This sounds complicated but is actually super simple!
Go to Kraken.io, pick the "free web interface" and upload your image.
The data size of your image is instantly reduced without any visible loss in quality!
If you're using a Thrive Theme, you can use the built-in image optimize function so you don't need to use Kraken at all. You can see how to use this cool feature here.
It's Your Turn Now
Were you accidentally making one of the mistakes described above?
If so, were you able to use the simple tricks we showed to fix it? Let us know how you managed in the comments below!