Large backgrounds can sometimes be a great way to add an instant visual impact to a website. As designers there are various options available to us when it comes to the background of a website, such as using large images or patterns. The following article takes a look at the different background styles available, discussing how and when they are best used. As with most things however, there can be a downside to large backgrounds, with bandwidth and site performance taking the hit if the images aren’t implemented correctly. If you are thinking of having a large background image in your design, it’s important that you know your limitations.
Essentially there are many different styles, but the most commonly used styles on websites are:
* Photographs as backgrounds
* Graphics and illustrations as backgrounds
* Animations as backgrounds (not recommended)
Photographs and illustrations are most widely used, animations are still experimental (not recommended due to compatibility issues with different operating systems and devices), but as bandwidth is becoming cheaper and Internet connection speeds are getting faster, more websites can afford to use these.
One of the most common problems with large backgrounds is that they have to conform to many different screen resolutions. A web designer should test the website’s design using as many different screen resolutions as possible, to avoid one of the common mistakes that is associated with using large backgrounds.
Particularly a web designer should experiment with different browser window widths, because many users don’t expand their browsers to the full screen size, even though they may have a large resolution display.
Let’s look at the most common mistakes that a web designer should avoid, when dealing with large backgrounds.
It’s not wrong to use a centered, tiled or scaled image as a background, in fact it’s even recommended in order to keep the symmetry of the website, however misusing these techniques could give the impression of an average or mediocre design to the website’s visitors.
Let’s examine the picture below of a website. This screenshot was created at a 1024×768 screen resolution:
As you can see, at this resolution, there is nothing wrong with the design, however let’s see how it looks at a 1680×1050 resolution:
The image used in the background is centered. It looks like a regular image on a website and doesn’t blend into the background. Avoid using background images in this way, by making sure that the photo is large enough in width for the most commonly used screen resolutions. The best solution is to blend the images’ corners into the background, so that users with larger screen resolutions won’t notice it.
In order to correctly tile an image, you must ensure that the edges of the image are consistent with the pattern, therefore creating a seamless background on the website. For example, the image below shows how a pattern, which is titled, is cut incorrectly. You can see the edges of each individual image:
In order to create a seamless background a web designer must cut the picture in such a way that the left edge blends into the right edge and the top edge blends into the bottom edge, like in the image below:
You can see the edges of the individual images seamlessly blend into one another. This image was created from pattern below:
When scaling an image, the most important factor is image quality and the target resolution. Also a web designer should take into consideration the different image formats that are optimized for each particular style of image.
In the case of large images it’s essential to optimize an image as much as possible in order to save bandwidth (more about bandwidth later in this tutorial). Avoid scaling up small images, because the resolution of the image will drop significantly as you can see on the screenshot of a website below (try viewing this on a large resolution display):
The problem with the above example is that the website automatically scales the image according to the screen resolution which causes the background image to become pixelated when viewed on large resolution displays.
Large backgrounds usually equate to large file sizes which can lead to a huge impact on bandwidth and also user experience.
The bandwidth is the amount of data that is be moved from on place to another, specifically from the server to the client. By using large graphics, a website’s load time can increase significantly.
Let’s look at the following example:
Here is this website’s net usage report:
There are 12 requests and a total of 627 KB is downloaded. This means that each time someone visits the website 627 KB is downloaded, adding to the total bandwidth of the website. If the website has an average of 50 visitors per day, this will total 31,350 MB per day.
High resolutions are not everything to considerwhen you design websites, you should also consider smaller screen resolutions. What if a large background website is viewed from a mobile phone? A web designer should design for every browser, in order to present the website to a large audience. These days more and more visitors tend to browse the web with devices such as the iPhone and other smartphones.
If the photo that you want to use in the background of your website is too small or will look awkward, then create the whole design around the photo. For example:
As you can see the photo is small on purpose, which adds to the whole design.
Another tip is to create single color wide space on the photo itself, then use this color to paint the rest of the background, therefore making a seamless blend between the photo and the actual background.
Here the image is centered, the left and right edges are a single grayish color and the rest of the background is filled with this color.
As a best recommended practice use large images, above 1700 pixels in width to cover almost 95% of the display sizes available today.