Fog of Eternity | Website design and discussion

Accessible web design standards recommend that the graphics file format PNG is generally preferable to the older GIF. PNG is a more advanced file format and was designed specifically to replace GIF. It has a greater colour depth, wider transparency options, and generally compresses to a smaller file size than a GIF. The majority of the time PNG is indeed a more desirable file format to use when incorporating graphics into a web page. Most of the images you see on Fog of Eternity are PNG. There are occasions, however, when PNG files can be inappropriate and indeed provide undesirable results. In fact it’s the more advanced nature of PNG that creates the problem.

When using a graphics package, or defining a colour for a web page background or similar, we use the RGB colour model. This basically adds together red, green and blue light in varying amounts to produce a huge variety of colours. For example, representing white with #ffffff. So when defining the background of the Fog of Eternity site I used CSS to define that.

body
{
background-color: #ffffff;
}

Web sites also often take advantage of background images, in addition to colours, to incorporate into their design. And this is where PNG can cause a problem.

RGB is a relative colour model, rather than an exact one. There may be slight differences in appearance of any RGB combination depending on the hardware that is rendering it (the video card in a computer’s case). They’ll be close, but they may not be exactly the same. Importantly, however, the RGB combination will be consistent on the same system.

For GIF and JPG files, and for HTML and CSS files, any RGB values are handed over directly to a computer system’s display hardware, which renders the colours. And this means that RGB from all these formats will be consistent with each other.

PNG, however, behaves differently. PNG files contain attributes that attempt to automatically compensate for the slight differences between systems when it comes to rendering colours. This is called “gamma correction” but I will try to explain in layman’s terms. When you save a PNG file, it saves as part of its attributes the gamma information of the system it’s been saved on. When a PNG file is loaded onto a system where the display gamma is different, it compensates so that the file appears as it was originally saved (rather than having the slight differences between systems ).

The problem here is that when images are used as part of an overall web design it can be more important to have consistency of colour rather than exactly correct colour metric values. I’ll use an example from a website I am currently designing. The opening page has two background images, both of which use a background colour with the same RGB value - #990000 - as the background colour of the entire page, which is specified in the CSS code. So when I initially tried to use PNG files for the background images I kept getting inconsistencies in the appearance, as demonstrated in the first screenshot, because of the exact nature of the PNG RGB rendering. But when I used GIF files for the background images, because they use the same relative rendering of RGB as the code in the CSS, the problem was solved, as you can see by visiting www.evivine.com.

It’s true that there are various workarounds to reduce the image of PNG gamma correction, and the problems are also worse in some browsers than others (when using Firefox the difference in colours was minimal, the screenshots demonstrate a much wider variance in Internet Explorer). But there’s no real way of making PNG images that match CSS colours in all situations, and when images need to match a stylesheet in this way then GIF can still be a much safer format to use.

Filed under: CSS, Design by Robin Cannon

Subscribe to our RSS feed