Do you design funnels and are stuck what size you should choose as background image size? Then read here to know more about background images.
More...
Hi there, my name is Richard, and you will now learn about background images and image size. This is a question I see sometimes and I now it's time to answer this vital question.
The short answer
I recommend you us an image with a size of 1920 pixels wide by 1080 pixels tall. That way, your background will look great on all devices and you create funnels fast.
If the screen resolution is higher than the image size, the stretched image will still look great. If the screen resolution is lower, ClickFunnels will adjust the image size to fit the screen.
This answer was the short answer. If you want to know a bit more, you want to read the whole article.
The long answer
The screen resolution decides image size to the visitor. Big screens have higher resolutions and demand bigger images to look good. Mobile traffic is now more than 50% of all traffic, and the mobile has a smaller screen size. So you want to use bigger images if the majority of your traffic is desktop users. If mobile users are the majority, then you can reduce the size of the image for faster user experience.
The best advice is to use ClickFunnels functions to optimize for both desktop and mobile users as you will learn later in the article.
Desktop and Laptop Screen Resolutions
Based on information from Hobo, below is the most common screen resolution worldwide. I can mention I use 1920 x 1080, and I believe this resolution will be more and more common for desktop users.
- 1366×768 – 29.25%
- 1920×1080 – 17.34%
- 1440×900 – 7.32%
- 1600×900 – 5.72%
- 1280×800 – 5.27%
- 1280×1024 – 4.51%
So if you are using smaller images, the image will be stretched on a big desktop screen and the background image will be blurry and not so good looking. This is something you want to avoid since you want to focus on giving your visitors the best experience.
Mobile Screen resolutions
For mobile users, you see the screen resolution is much smaller. This is based on worldwide data.
- 360×640 – 41.11%
- 375×667 – 9.58%
- 720×1280 – 5.16%
- 320×568 – 4.55%
- 414×736 – 3.79%
- 320×534 – 3.46%
As you see, the mobile screen resolutions are much lower, but you have a few that still are pretty high.
ClickFunnels is responsive and will adjust the image based on the screen resolution to the viewer. You still want to test how your page is looking on your mobile screen.
Create two different pages based on the viewer's device
In ClickFunnels you can create one page for desktop users and one page for mobile users. I highly suggest using this to your advantage. That way, you will give your users the best experience with minimal effort.
Have two images where one is optimized for desktop users that usually use wider screens. The other one is optimized for a mobile user where the screen is generally taller.
You can set the different elements to be shown on desktop only, mobile only and both. In Clickfunnels you can see how both views are performing and adjust images, text, and layout based on the preview inside ClickFunnels. Remember also to test it on your mobile phone.
Want to know more about ClickFunnels? Read my review here.
Download Speed / Page Loading Time
One very important factor for choosing your background image is that high-resolution images usually are bigger in size. Pages with big images take longer to load and will affect the user experience negatively.
People today are not patient, and if they have to wait more than 3 seconds for a page to load, many will leave the page. The faster the page is, the better the user experience, and fewer people will leave your site.
So big background images are not recommended, and you want to test your page load time. This is the time it takes a user to load your page. You can use Google's PageSpeed Insights to check how your page is performing.
Usually, the best speed boost is to optimize your images, both resolution, and quality.
You don't want your viewers to wait
What background setting should you use?
In ClickFunnels, you have different settings you can set on background images. I have listed them below and how they work. The background will follow when you are scrolling regardless of the setting below.
Full Center Fit
The image will be put in the center of the screen and cover the whole screen. If the image doesn't fit the screen, the image can be blurry or be odd looking because it is stretched too much in one direction. The aspect ratio will most likely be altered with this setting, so even high resolutions images can seem strange.
Fill 100% Width
The image will be placed at the top of the screen and fill the with of the screen. That way it will keep the original aspect ratio. So a high resolution image will be nice looking regardless of the screen, even when it doesn't fit the height of the screen. You may have some white screen on the bottom of your page.
No Repeat
With this setting enabled, the image will be placed on the upper left corner and will not be adjusted, stretched or similar to fit the screen.
If the image is bigger than the screen, only then it will be adjusted. This will most likely happen on mobile screens only.
Repeat
The image will be placed on the upper left corner and repeated to fill the screen horizontally and vertically.
If you have a smaller image with patterns, this is the recommended setting. The background will look beautiful on the screen, and the image will be small and fast to load.
Repeat Horizontally
The image will be placed on the upper left corner and repeated to fill the screen horizontally only. Most applicable if you want an image to look like a top border of the screen.
Repeat Vertically
The image will be placed on the upper left corner and repeated to fill the screen vertically only. Most applicable if you want an image to look like a side border.
Repeat Horizontally - Top
The image will be placed centered on the top and repeated horizontally. The repeated image will be equally cut on both sides. Most applicable if you want an image to look like a border on the top of the screen.
Repeat Horizontally - Bottom
The image will be placed centered on the bottom and repeated horizontally. The repeated image will be equally cut on both sides. Most applicable if you want an image to look like a border on the bottom of the screen.
Want to learn more about ClickFunnels? Read my guide here.
Google mobile first indexing
Google is now indexing sites based on a mobile experience. This means that they use software that reads the page like a mobile phone user. If you want your page to be shown high on the google search results, I recommend you to optimize the page for mobile users.
This means you want to create a mobile only view that is optimized regarding font size, image size, and layout for mobile phone users. This is easy to do in ClickFunnels.
Conclusion - Do you want to use a background image?
The optimal background image size is 1920 x 1080. To load big images takes a longer time, and you want to have as small images possible to have the highest user experience. You also don’t want to have blurry and odd looking images.
So you want to optimize your page for mobile and desktop users.
You also need to decide if a full size background image will give your users the best experience. I usually use patterns or background color for the simplicity and user experience.
I also recommend using background images to a minimum.
