Graphic File Formats
Bitmap vs. Vector Graphics
Bitmaps images are exactly what their name
says they are, a collection of bits that form an image. The image consists of a
matrix of individual dots (or pixels) that all have their own color. Bitmap
images can contain any number of colors but we distinguish between four main
categories, line-art, grayscale images, multitones, and full-scale images.
Bitmap data can be saved in a wide variety of file formats, including BMP, JPEG,
GIF, PDF, and others. Advantages of Bitmap graphics are that they can represent
complex, photographic images, they are quite universal with almost any program
being compatible with these images, and they require little overhead to display.
Disadvantages of Bitmap graphics are they do not maintain editability, their
file sizes can get quite large, especially if not compressed in some way, and
they are not effectively scaleable to larger sizes and begin to look unnatural
and blocky.
Vector graphics are basically points
connected by lines of various shapes, filled with solid or gradient colors. Each
individual line is made up of either a vast collection of points with lines
interconnecting all of them or just a few control points that are connected
using so called bezier curves. This method generates the best results and that
is used by most drawing programs. Vector data can be saved in a wide variety of
file formats, including EPS, PDF, and PICT. Advantages of vector graphics are
their file sizes are usually very small, they have infinite resolution, and the
image remains editable as long as it remains in a vector format. Disadvantages
of vector graphics are they are NOT well suited to photographic images and their
formats are not as universally interoperable as bitmaps.
Bit Depth -
The number of bits used to store information
about each pixel of an image. The higher the depth, the more colors there are
available for storage.
Color Depth - The number of bits
per pixel that can be displayed on a computer screen.
The higher the color depth, the wider color range displayed.
These are related to gigs, pngs, and jpegs because
a gif image's color palette is limited to a
maximum of 256 colors, jpgs are used extensively for photos and other continuous
tone images on the web, and pngs provide
advanced graphics features such as 48-bit color, including an alpha channel,
built-in gamma and color correction, tight compression and the ability to
display at one resolution and print at another.
| Bit Depth |
|
Interlacing - a method of encoding a bitmap image such that a person who has
partially received it sees a degraded copy of the entire image. When
communicating over a slow communications link, this is often preferable to
seeing a perfectly clear copy of one part of the image, as it helps the viewer
decide more quickly whether to abort or continue the transmission.
Advantages : the interlaced feature should
only be used for large gifs in which a 'blurred' image is displayed first to the
user. The user can then get an idea about the image and choose to stop or
continue the download. For smaller images (6 KB or less),
interlacing
should not be applied.
Disadvantages : though the user generally
"feels" that an interlaced image is being downloaded faster, adding the feature
to gif images increases their file size. Therefore, interlacing is most suited for large images where displaying the image is of prime
importance and a little increase in file size can be ignored.
Transparency - a method of allowing a bitmap to
occlude some areas when it is placed on top of something else, and to show the
background through in other areas.
Optimization -
finding the correct compression settings to
make the image as small as possible with as little loss of resolution as you can
get away with.
Dither -
a technique used in
computer graphics to create the illusion of color
depth in images with a limited color palette.
File Format Chart
| Abbreviated Name | Full Name | Owner | File Extension | Uses | Advantages/Disadvantages |
| AI | Adobe Illustrator Document | Adobe Systems | .ai | It provides sophisticated tracing and text manipulation capabilities as well as color separations. |
It provides new features for developing
web graphics and objects It has superior integration with other Adobe
products. It works for both Windows and Macintosh. It has a
steep learning curve, even for veteran users and
could
use a more user-friendly method of saving symbols and objects
|
| BMP | Bitmap Image File | Microsoft | .bmp | Use BMP for any type of bitmap images. | BMPs are huge files, but there is no loss in quality. BMP has no real benefits over TIFF, except you can use it for Windows wallpaper. |
| CDR | CorelDRAW Document | Corel Corporation | .cdr | Several innovations to vector-based illustration originated with CorelDRAW: a node-edit tool that operates differently on different objects, fit text-to-path, stroke-before-fill, quick fill/stroke color selection palettes, perspective projections, mesh fills and complex gradient fills. | It differentiates itself from its competitors in a number of ways. The first is its positioning as a graphics suite, rather than just a vector graphics program. Second, the package consistently includes a large collection of fonts and clip art. The Biggest improvement with CorelDraw over the other graphic software programs is its ability to edit bitmaps right in Draw. |
| GIF | Graphics Interchange Format | CompuServe | .gif | Use GIF for simple Web graphics having limited colors. | GIF files are always reduced to 256 unique colors or less and they make very small, fast-loading graphics for the Web. GIF is great for Web buttons, charts or diagrams, cartoon-like drawing, banners, and text headings. GIF is also used for small, compact Web animations. GIF should rarely be used for photos. |
| JPEG | Joint Picture Experts Group | Joint Photographic
Experts Group |
.jpeg or .jpg | Best for photos when you need to keep the file size small and don't mind giving up some quality for a significant reduction in size. | It is not suitable for images with text, large blocks of color, or simple shapes, because crisp lines will blur and colors can shift. Only JPEG offers the options of Baseline, Baseline Optimized, or Progressive. |
| PICT | Picture | Apple Computer | .pict, .pic, .pct | In Macintosh Applications | PICT is an old, Mac-only bitmap format, similar to BMP for Windows. PICT is not often used today. It is limited to Macintosh computers and applications. |
| PNG | Portable Network Graphic | World Wide Web Consortium |
.png | Use PNG when you need smaller file sizes with no loss in quality. | PNG files are usually smaller than TIFFs, in my experience. PNG also supports alpha transparency (soft edges) and was developed to be a Web graphics replacement for GIF. |
| PSD | Photoshop Document | Adobe Systems | .psd, .psb, .pdd | Use PSD when you need to preserve layers, transparency, adjustment layers, masks, clipping paths, layer styles, blending modes, vector text and shapes, etc. | PSD is Photoshop's native format. It is a good format for manipulating and changing images with control over separate image channels, layers and paths. It only works within certain applications, not useful for display on the web or other online services. |
| SWF | Small Web Format | Macromedia | .swf | Allows you to browse the contents of a Flash file, examining each tag and the values assigned to each field | Devised for storing animations (optionally including sounds), although it can also do a lot more than do animations. For example, process forms or even build entire web sites. In order to play a SWF file in a user's browser, they must have a Flash plug-in installed, however most users do have this. |
| TIFF | Tagged-Image File | Adobe Systems | .tiff or .tif | It is good for any type of bitmap images. Keep as an original image file with all information intact. | TIFF produces large files, but there is no loss in quality. TIFF also preserves layers, alpha transparency, and other special features when saved from Photoshop. The type of extra information stored with TIFF files varies in different Photoshop versions, so consult Photoshop's help for more information. |
| Windows BMP | Windows bitmap | Microsoft | .wbmp | You can load WBMP images into any mobile device, which supports WAP. | This format is very simple: it does not support any compression and stores images with color depth = 1 bits per pixels only. |
Resources
Adobe Web Tech Curriculum
http://www.adobe.com/education/webtech/CS2/toc.htm
Tutorials from Adobe includes information
about graphics
Bit and Color Depth
http://www.devx.com/projectcool/Article/19997/0/page/7
An excellent discussion of bit depth in gifs and jpegs
Bit Depth Tutorial
http://www.cambridgeincolour.com/tutorials/bit-depth.htm
Understanding Bit Depth
Bitmap vs. Vector Graphics
http://www.prepressure.com/image/bitmapvector.htm
Good discussion of bitmap and vectors graphics
Bitmap and Vector Graphics Explained
http://www.photoshopsupport.com/shoptalk/vectors-and-bitmaps.html
From a PhotoShop tutorial
Choosing the Best Graphic Format for
the Job
http://office.microsoft.com/en-us/help/HA010563051033.aspx
From Microsoft
Comparison of PNG and GIF Interlacing
http://nuwen.net/png.html
Explains the advantages of PNG graphics and interlacing
File Formats and Extensions
http://teacherworld.com/formats.html
List of various file types
File Formats and Extensions
http://teacherworld.com/formats.html
List different types of files and file
extensions
Graphic File Formats
http://www.how-to.com/Operations/graphic.htm
Information on the various file
formats
Importing Graphics into Flash
http://www.informit.com/articles/article.asp?p=170278&rl=1
Provides insight into vector and bitmap graphics
The PNG Home Page
http://www.libpng.org/pub/png/
An excellent resource for PNG graphics
Web Style Guide
http://webstyleguide.com/graphics/
Explains graphics for web page construction
Which Graphic File Format is Best to
Use When?
http://graphicssoft.about.com/od/graphicformats/f/summary.htm
Excellent guide for graphic use
Wikipedia Graphic File Format Summary
http://en.wikipedia.org/wiki/Graphics_file_format_summary
A table from Wikipedia
Wikipedia Comparision of Graphic File
Formats
http://en.wikipedia.org/wiki/Comparison_of_graphics_file_formats
A table from Wikipedia
Return to Homepage
2007 ©