Image Formats on the Web

"When do I use a specific image format?"

• 44 different graphic formats?
• Can you name some of them?

There are two methods to render an image:  RASTER or VECTOR.

RASTER IMAGES

• A raster format breaks the image into a series of colored dots called pixels
• The number of bits used to create each pixel denotes the depth of color you can put in your images
• The more pixels, the more detailed an image will be
• 100 pixels per inch

FYI - a GIF image doesn't work overly well for photographs and larger images.  WHY?

256 is the upper color level for a GIF.

• 3 main Raster formats:  BMP, GIF, JPEG

META/VECTOR IMAGE FORMATS

• Usually proprietary formats:  CorelDraw, Hewlett-Packard Graphics Language, Windows Metafile
• Vectors of data stored in mathematical formats rather than bits of colored dots
• This allows for SCALABILITY - the ability to blow up an image without looking jagged or "pixelated"

WHAT IS A BITMAP?

• Microsoft's baby
• A series of colored dots
• A little heavy on the bytes

WHAT IS COMPRESSION?

• Compression is a computer term that represents a variety of mathematical formats used to compress an image's byte size
• Bitmaps can be compressed to a point ("run length encoding") - runs of pixels of the same color are combined into one pixel
• Bitmaps with little color variance will really compress

ENTER GIF

• Graphic Interchange Format, standardized in 1987 by CompuServe
• First format called GIF87a
• Updated version in 1989 to include animation, transparency - GIF89a
• No difference to the visible eye
• Animation - same concept as a picture book with small animation cells in each corner; an internal clock in the GIF keeps count and flips the image when the time comes
• Transparency - since there are only 256 colors available in a GIF, the computer is told to hone in on one of them.  It's done by choosing a particular shade already found in the image and blanking it out.  The color is dropped from the palette that makes up the image; whatever is behind it shows through.
• Interlaced vs. non-interlaced - interlacing is the concept of filling in every other line of data, then going back to the top and doing it all over again, filling in the skipped lines.  Graphic appears blurry at first then sharpens as other lines fill in.

JPEG

• Compression algorithm developed by the Joint Photographic Experts Group
• Its compression factor stores the image on the hard drive in less bytes than the image is when it actually displays

Back to Our Question...