Clear up your graphics

Many novice (m)ISVs design websites for their products themselves. The home-made design allows the quick and low-cost getting started. However, if you have no experience in web design there are lots of non obvious peculiarities that you have to know to make your website attractive. One of the most important things is graphics. Look at your web site in different web browsers and check if your logos, screenshots and artwork are clear and glamour. The website images appearance depends on the image file formats. There are three standard formats for website images: JPEG, PNG, and GIF. You should use each format for different purposes.

Today I’d like to tell about the common mistake of freshmen designers - using inappropriate image format for their logo or screenshots. I met this situation many times. The simple demonstration bellow shows the specifics of using those three formats for logo picture.

Using JPEG format
Although JPEG offers good compression ratio and allows using high color palette, it affects the picture quality. The better compression means the lower quality. If your image consists of monochromatic areas with sharp bounds then using JPEG format will make your picture “dirty” and inaccurate. That’s why JPEG is often good for photos rather than for logos, screenshots and artwork.

If we’d use JPEG for the logo picture on our Dr.Explain website then it would look inaccurate.
Using JPEG format
Not good, right?

Using PNG format
PNG is a very useful format indeed. It offers high color palette support, good compression ratio, transparency and doesn’t affect the quality of the picture. PNG images look clean. The format is perfect for screenshots. Nevertheless there is an issue that sometimes makes PNG useless for web design. Web browsers may display PNG images in slightly altered gamma, especially if the picture uses transparent alpha channel. So, if you use PNG image in conjunction with other design elements its borders may be visible and the whole design will look like patchwork.

If we’d use PNG for our logo picture then its borders would be visible on the gradient background in some browsers.
Using PNG format
This is not perfect also.

Using GIF format
Although GIF format supports only 256 color palette in most cases it’s enough to display your artwork without loosing the quality. Of course you must adjust the picture palette in image editor first to select the right colors. It’s better to use the same color table for all elements of your website design to make the it seamless and solid-drawn.

We do use GIF format for our logo to make the header graphics seamless.
Using GIF format
It looks perfect, does it?

Conclusion … Please recall this post when you’re making a new design for your website. Choose appropriate image formats for different graphical elements… or hire a designer

3 Responses to “Clear up your graphics”

# Ruaon 22 May 2007 at 7:11 pm

You could use tweakpng to remove the gamma correction from the png file, then it would match up. there’s a chunk called gAMA that you remove.
# Vincenton 15 Jun 2007 at 12:31 pm

PngOptimizer is great to clean a PNG of every tags not needed for a website (like Gamma). And it provides a very good optimization of the image without altering data.

http://psydk.org/PngOptimizer.php?lang=en
# Fendion 13 Aug 2007 at 6:32 am

Thanks Vincent for the PngOptimizer link.

Good for creating PNG screenshots.