When it comes to creating Background Images for your Website there are two important considerations that can help to increase performance. The size of the image file, as well as the dimensions of the image as expressed in pixels.
The faster the images appear on your site, the happier your visitors will be. Another benefit is reducing the amount of bandwidth that your site is using which may help to keep your monthly hosting fees down.
Image File Formats
A common mistake is to select an inappropriate Image File Format when saving your image to a file. Even though the image displays properly, it may contain noise or take an unacceptable amount of time to download.
When to use the PNG Image Format
The Portable Network Graphics (PNG) image file format is highly suitable when you have an image containing large areas of the same color. An example would be a small object surrounded by a large background region of a solid color. Another would be a simple pattern such as the striped patterns below.
PNG images use a lossless form of compression. This makes PNGs great for preserving quality. However, depending on the underlying composition of the image, this can work against the goal of reducing file size.
Two additional features that the PNG format allows for is are transparent background colors and the support for Alpha Layers. These two features are not used very often with background images because transparency and alpha layers effect whatever is beneath them. Unless you are creating layered background images, there is nothing beneath your background image except for the color of the web page’s background. Support for these additional features is missing in some of the older Web Browsers. For example, Internet Explorer 6 is infamous for the way it mishandles transparent PNGs.
When to use the GIF Image Format
There was a time when Compuserve’s GIF (Graphics Interchange Format) was protected by copyright and they demanded payment to use their proprietary format. This is no longer the case as the patents have since expired in the US, Canada, Europe and Japan. The Software Freedom Law Center says that after 1 October 2006, there will be no significant patent claims interfering with employment of the GIF format.
Despite this, unless you want to create animated Images, there are very few reasons to select this format today. However, you may still encounter GIF files in Clipart collections and in general the format is supported by a large number of 3rd party tools.
There is nothing inherently wrong with using GIF files. They work in similar ways to PNG files in terms of their compression algorithms and the types of images that are suitable for these formats. However, GIF files are more limited due to the fact that they do not support more than 256 colors or an Alpha Layer.
When to use the JPEG Image Format
When you have a complicated image, such as a photograph or a texture, lossless compression (such as used in the PNG or GIF image file formats) often results in very large files when compared to JPEG (Joint Photographic Experts Group) files. This is particularly true with files that are large dimensionally, such as those giant photographic backgrounds you may come across online.
The JPEG format allows for a variety of compression levels which are generally specified as a percentage. The lower the value, the more compression artifacts or visual noise will appear. The above sample textures are saved as a single JPEG file using a compression setting of 80%. In general you will want to use the lowest compression setting you can before hitting an unacceptable level of quality deterioration.
Because of the way the compression works in PNG or GIF images (a form of RLE – Run Length Encoding), Vertical Gradients (center, below) work very well with these formats. An entire row of pixels can be compressed to a few bytes. With larger images however, the GIF Image File Format may run out of colors when attempting to represent smooth gradient transitions.
Horizontal Gradients (left, above) or gradients of various arbitrary angles (right, above) are another story altogether. These are often best handled using the JPEG format – especially when the images are large.
Use trial and error when in doubt
There are many images that fall into the gray area between being suitable for use as a PNG or a JPEG. In these cases you can simply save a series of JPEG files (each using a different compression setting) and find the smallest file with acceptable quality and compare it to a PNG version of your image. Weigh the quality savings of the PNG version versus the file size savings of the JPEG version and make a decision on which way to proceed based on your findings.
Why size matters for Tiled Background Images
Another common mistake happens when Graphic Designers believe the smallest file they can create is the best option. The trouble appears when a tiny background image gets tiled over a large background area. It requires a far greater number of instances of the image to by handled by the Web Browser.
As you can see in the diagram above, the tiles on the left are a quarter the size of the tiles on the right. The Web Browser must render 16 of them to cover the same area as the 4 larger tiles on the right. Very small background images, in terms of their pixel dimensions, can slow Web Browsers down as well as introduce flickering. This can be particularly noticeable on slower or older computers.
Some websites employ background images as small as 8 pixels wide by 8 pixels tall. A 1080p screen (which consists of 1920 pixels by 1080 pixels) would require 32,400 copies of the tiny image to fill the screen!
There are circumstances where this is of lesser concern. For example, If you are only tiling your background image horizontally or not at all.
Selecting an appropriate Image File Format is an important step to ensuring your images are not wasting bandwidth unnecessarily. If you will be tiling your background image, ensure that it is not too small dimensionally. This helps reduce the number of times Web Browsers must draw the background image. These two considerations can go a long ways towards increasing the Efficiency of the Background Images on your Website.