Learn the most common web graphic formats

Online Graphic Formats

Because the web originated during a period of very slow connection speeds, online formats are usually compressed through a series of techniques that tend to lower the quality of the graphics. Different graphic formats are more suitable to certain types of images, and they offer different functionality and compression methods.

Bitmaps vs Vectors

Graphics in computers can be stored in one of two ways...as bitmapped graphics (AKA Raster Graphics) or as vector graphics. Bitmap graphics are images which are stored as a series of pixels in a grid each with a certain amount of colors per pixels. Vector graphics, on the other hand are mathematical definitions of objects as shapes that are converted into bitmaps for display.

The advantages of using vector graphics is that they are resolution independent. Vector graphics can be resized to any scale without loosing any quality. The graphics are simply scaled to the resolution of the device (monitor, printer, etc) and then rendered as a bitmap at that device's maximum quality. Think of what would happen if we described a vector of a circle on a monitor. If the monitor's resolution was set to 800x600 pixels, we could put a circle at the center of the screen by telling a graphics program to draw a circle with a radius of 1 inch at position 400,600. If themonitor's resolution was 72 pixels per inch, the circle would show up as a 72 pixels wide. If the graphic was then printed to a printer with 1000 dots per inch resolution, the printer would use 1000 dots to print the circle in an inch.

The problem with using vector graphics is that they are unable to describe extremely rich bitmaps like photos. Vectors are best used for typography or images where there isn't a lot of variation between pixels. They are also very small because they don't need to store every pixel of information, but only a very short definition of the graphic.

The advantages of using Bitmap Graphics is that they can richly show photos and other images where the variation between colors is broad. Unfortunately, bitmaps are very large and can grow in size very quickly depending on the resolution of the image. Bitmaps store information for each pixel in a specified number of colors. A couple of things are important to a bitmap. The width and the height of the bitmap, and the amount of colors per pixel in the image.

A third item that might be referred to in a bitmap is the density of how the pixels will be displayed. This is usuallly noted as dots per inch or pixels per inch. This has nothing to do with the total amount of pixels in the image, but with how the resolution of the device presenting the pixels will affect the density with wich the pixels will be displayed. So for on screen graphics, you might see a 72 dots per inch resolution, but for printing, you might see the pixels show up with a 600 dots per inch density.

Online file format differences
GIF PNG JPG SWF
  1. The SWF format is a vector based format that can act as a container for other formats. Compression is inherited from other programs and can be customized.
  2. Transparency like compression is inherited from . In addition, you can add a vector based 8-bit alpha transparency to any animation
Compression lossless lossless lossy variable*
Max Colors 256 indexed Trillions Thousands Thousands
Transparency 1-color 16-bit Alpha none vector/alpha*
Animation yes no no yes
Interactivity no no no yes

Types of Compression

Because bitmaps can be extremely large, different compression methods have developed over the years to bring the size of a file down. The methods can be split into two camps: Lossy and Lossless. Some graphics formats give you the option of combining these two for maximum effect. Some formats like GIF also limit the amount of colors stored in the files. The less colors stored in a file format, the smaller the file.

Because all information in a computer is stored in Binary code, images have to be stored as information that is stored one or more bits per pixel. A single black or white pixel fits into a single bit as either a 1 (for pixel is ON) or 0 (pixel is OFF). The more colors an image requires, the more bits that have to be used to store evere pixel. 8 bits will store up to 256 colors 2 to the 8th power, 16 bits will store

The simplest type of bitmap is a 1 bit per pixel file. If you had a 100 pixel file, that file would take exactly 100 bits to store and each pixel would either be black or white. If the same file could have a total of 256 color per pixel, each pixel would take 8 bits to store and the total file would be 25,600 bits to store. Each color ads to the file size literally exponentially.

Lossless Compression

Lossless compression is the simplest type of compression and it seeks to compress image without loss of quality. This is achieved by looking at patterns within the data and storing the information of the image as a series of definitions of the patterns. Think for example of a 100x100 pixel image where only the first pixel is ON and the rest of the pixels are OFF. You could store the image as a map of every pixel in the image and specify wether the individual pixels are ON or OFF or you could simply write it as 1 pixel ON, 99 pixels OFF. The second definition is a lot shorter and it's how lossless compression works. Lossy compressions is especially good with images with large repetivive patterns of data.

Lossy Compression

Lossy compression takes a look at the image and modifies it so that it can be better compress with lossless pattern recognition. Because the image changes, we lose a bit of quality from the original. Lossy compression is extremely good for imags with a lot of colors and is how JPEG achieves incredible compression ratios.

Graphics Interchange Format (GIF)

The first type of graphic formats available to web browsers was the Graphics Interchange Format...commonly known as GIF (pronounced like the Peanut Butter JIff). The format was developed by one of the first online firms Compuserve. The format uses two ways of achieving smaller file sizes. It is a Bitmapped graphics format, which means that vectors

First, it supports no more than 256 colors for an image or 8 bits of indexed color. Indexed color means that the colors can be any of up to 256 colors specified by the file itself. This can be quite limiting and means that the format is best suited for images that don't have a lot of color like logos and flat colored images. The format can also produce files which use less than 256 colors. The less colors are used in the image, the smaller the file size will be.

The GIF format also allows for 1 bit transparency. So one of the 256 colors can be used as a transparent color. This works ok for some uses, but when there are soft shadows, the 1 color transparency fails to reproduce soft blended images.

Second, the format uses a LZW (Lempel-Ziv-Welch) lossless data compression alrorythm. This means that the images saved in gif will be compressed without loss of visual quality (not counting the loss of quality because of the low color range). Unfortunately, the LZW compression algorythm was pattented in 1985 by Unisys and Compuserve and controversy over the patents spurred the development of PNG (Portable Network Graphics) format. Since then, however all relevant patents have expired.

The GIF format is also one of the main formats that allows for an animation by storing multiple frames of animations in a single file. Some online advertisements are still done with the GIF format instead of the newer PNG or JPEG format.

Portable Network Graphics (PNG)

As mentioned above, the PNG format was originally developed as a response to some patent issues with the GIF format and it's acceptance was rather slow, but is not easily accepted by all major browsers and most other document formats.

The advantages of the PNG format is that it allows for RGB or Red Green and Blue channels each with either 8 bits (24-bit) or 16 bits per channel (48 bits) of information, so you can store very complex images. It also allows for an 8-bit or 16-bit transparency channel which allows for very complex, smooth transparency effect.

PNG files cannot be animated like GIF so they're not substantially used for online advertisements.

The PNG format compression is better than the GIF losless and not as good at compressing full color images as JPEG.

Joint Photographic Experts Group (JPEG)

A lossy compression format with lossy compression that is optimized for reproducing photos. The JPEG format was designed to understand that human eyes are much more sensitive to grayscale (luma) information than they are to Color (Chroma) information. Therefore the JPEG format compresses things more things that would be less apparent to humans and less if the changes would be more apparent to our eyes. The result is for compression ratios that can achieve 10 to 1 or 50 to 1 compression factors.

JPEGs cannot be animated. The compression achieved with JPEG for photographic images is superior to PNG, but for images with small gradients, or a lot of solid colors, the JPEG compression would be inferior. Most web design graphics are better stored with PNG compression. Most photos are better stored with JPEG compression.

Small Web Format (SWF)

Pronounced swiff, is a format that was originally developed as a vector graphic format, but can be a container for either vector, bitmap or even video files. The format is a great format for developing graphics with complex animations or interactivity. The format requires a plug-in in order to be displayed on browsers, but it is the most distributed plug-in with more than a 95% penetration of desktop browsers.

blog comments powered by Disqus