Wired Sonoma

Advancing the understanding and utilization of technology in Sonoma Valley.

Hi all,

I thought I would take a few minutes and give you guys a brief primer on how to choose the correct format to display an image on the Web. I see a lot of incorrect usage out there, even among large corporations, and the result is often an aesthetically displeasing mess.

There are fundamentally two different types of graphics: vector and raster. For this blog post we are concerned with the latter.

Raster graphics are *pixmaps*. That is, they are essentially a map which tells your web browser that this graphic has, for example, 512 pixels by 512 pixels, as well as the RGB color value and the level of transparency for each pixel.

Two raster formats can be counted on to be universally supported on the Web. They are the familiar GIF and JPEG formats. These formats are quite different from each other and are intended for specific uses.

Additionally, almost all new web browsers support the excellent PNG format, but this must be used with caution. There will always be an internet cafe in Bangladesh with six computers sharing the same dial-up connection, and running Windows 95. So PNG should be used with some caution. Furthermore, intelligent use of the aforementioned two formats will replicate all the benefits of PNG, and you needn't worry about your users seeing a broken image.

So: when do we use GIF, and when do we use JPG? A good rule of thumb is:

For photos, use JPG. For clip art, use GIF.

Before JPG was invented, photos had very large file sizes. JPG was a big step forward in that photographs could be reduced only to hundreds of kilobytes.

(NASA embraced this format and even used it on its Mars rovers, as it greatly facilitated the transmission of images back to Earth, where filesize is an absolute premium.)

However, this compression comes at a price. JPG is a "lossy" format, which means that some data is discarded before compression, and the surrounded pixels are blended together. The result generally looks pretty good, but not great. The more compression you apply, the lower the filesize and the lower the image quality.

Heavily compressed JPGs result in "artifacts". Those are the little blurs which you see on compressed images. I often see these artifacts in the header graphics and logos of high profile websites, and it looks terrible! You need to strike a balance between low filesize and image quality.

GIFs are a "lossless" format. So, when its use is appropriate, it will result in a brighter, cleaner image. However, there's a catch: GIF only supports 256 colors. If you try to export a complex image (for example a photograph or any image with a color gradient), the result is something called "banding", which you have no doubt seen. Instead of a nice gradient, we are left with several solid bands which do their best to replicate the gradient, but fail miserably.

(If you must export your complex image as GIF, there are utilities available to reduce banding, such as the Photoshop "noise" tool.)

So, for photographs and complex images with color gradients, use JPG, with smart compression.

For clip art and solid colors, use GIF.

Hope this helps!

Views: 29

Comment

You need to be a member of Wired Sonoma to add comments!

Join Wired Sonoma

© 2014   Created by Chip Roberson.   Powered by

Badges  |  Report an Issue  |  Terms of Service