RASTER AND VECTOR IMAGES
The first classification method divides images into either
raster or vector graphics. Raster graphics, also called
bitmap graphics, refer to images where the color value of
each pixel is stored. Examples of programs that operate
on raster graphics are Microsoft Paint and Adobe Photoshop.
Vector graphics refer to graphic images where the graphics
are stored as objects (e.g., lines, ovals, and rectangles).
Examples of programs that operate on vector graphics are
Microsoft Word, Adobe Illustrator, and Macromedia Flash.
With raster images, as they are zoomed or magnified they become blurry, unclear, or pixilated. Vector images, on the other hand, appear clear regardless of how many times they are zoomed, since they are redrawn at the appropriate resolution. See examples of zooming in on raster and vector images. Furthermore, the information in raster images cannot be easily edited or searched since they simply contain the color value of each pixel needed to display the image. Vector images, however, are typically stored in plain text format which makes them easier to be read and modified by software applications. At the same time, since vector images are stored in plain text format they can be more easily indexed and searched.
Raster Formats
GIF - Graphics Interchange Format. GIF is a raster image format this is widely used on the Web.
Files stored using this format are limited to 8 bits/pixel or 256 colors.
The GIF format works well on line drawings and simple cartoons.
The LZW compression algorithm is used which was patented
in the USA by Unisys.
(This patent expired in the USA in 2003).
JPEG: Joint Photographic Experts Group. JPEG is a standardized raster format that works well on natural, real-world scenes like photographs, naturalistic artwork. This format stores full color information 24 bits/pixel (16 million colors). JPEG is the most commonly used format for storing and displaying photographic images on the Web.
A comparison of GIF and JPEG formats illustrates that with real-world scenes the quality of the JPEG images is superior to the GIF images. At the same time the JPEG images require less storage space. On the other hand, notice that with line drawings, the GIF images require less storage space and result in a sharper picture.
PNG - Portable Network Graphics. PNG is standardized raster format created as an alternative to GIF. PNG is supported by all major graphics software and is now very widely used. It has become an open file format standard.
TIFF - Tagged Image File Format. TIFF is a raster file format for digital images. It is owned by Adobe Systems and is supported by most image scanning and editing software. TIFF is a de-facto standard graphics format for high color depth (32-bit) graphics.
Vector Formats
Microsoft Word, Adobe Illustrator, and Macromedia Flash are some examples
of applications that operate on vector images. These application store
images as objects (e.g., lines, ovals, and rectangles).
For example, depending on the application, the yellow circle
shown below might be stored using the following attributes.
| |
fill-color: | yellow | |
| line-color: | black | ||
| line-style: | solid | ||
| line-weight: | 3 pt | ||
| height: | 0.75" | ||
| width: | 0.75 | ||
| rotation: | 0 degrees | ||
| transparency: | 0 percent |
Another approach that is starting to gain momentum is Scalable Vector Graphics (SVG). SVG is an open source, XML grammar for defining vector-based 2D graphics for the Web. SVG uses geometrical primitives such as points, lines, curves, and polygons to represent images in computer graphics. Like Flash, in order to view SVG documents in your browser, you must first install a viewer. Unfortunately very few people currently have the SVG plug-in or viewer installed.
STATIC, ANIMATED, AND INTERACTIVE IMAGES
A second approach to classifying images is whether the
images are static, animated, or interactive.
Static
graphics
are fixed images that do not change when viewed or downloaded.
Animated graphics, or motion graphics, are images that dynamically change when viewed. This is accomplished utilizing animated Gif89a file format, delayed refresh, and multi-media video technology. While the images can change, the viewer does not have control over the viewing order. Shown below are some examples of animated images.
Interactive graphics/websites provide the user some control over the viewing process. For example, the images may allow objects to be drag and dropped or may have moving text and images. This interactivity is accomplished with the use of plug-ins, applets, and scripts. Shown below are some examples of interactive graphics/websites. The first two examples only work in Internet Explorer. The first example uses dynamic HTML to constraint objects. When the object "First Name" is moved, the remaining objects are automatically repositioned to maintain this constraint. The second example below uses dynamic HTML to maintain constraints between multiple views of ice cream flavors. For example, if the value of the labeled box chocolate is changed, then the bar chart is automatically changed. The third example below incorporates mouse rollovers. Notice as the mouse is moved over the navigation buttons a line appears under the text. The fourth example illustrates interactivity accomplished by dragging and dropping pieces to a puzzle.
LOSSLESS AND LOSSY IMAGES
A third approach to classifying images is whether or not
information is lost when converting images back and forth.
Lossless formats allow images to be converted back and forth and
maintain the same quality. Examples of lossless formats include
GIF, PNG, TIFF, and all vector formats.
Lossy formats on the other hand use a compression algorithm that possibly "drops"
some of the data. JPEG is an example of a lossy image.
Choice #1 is to remove any features that may cause compatibility issues. This approach restricts the graphics and interactivity to those features that are supported by all browsers. Unfortunately, the website may then lack the desired interactivity and appeal. This choice removes all VBScript code and most code written in JavaScript that runs on the client machine. This is because VBScript only works in Internet Explorer, and JavaScript code typically does not work across browsers, unless several version of the code are written to allow cross-platform viewing and interactivity.
Choice #2 is to create multiple versions of the documents. This would be the professional and courteous thing to do. Under this approach, depending on the browser type, screen resolution, etc, the user is directed to an appropriate document. This approach requires developing multiple versions of each document and then performing tests on each document. This is a very time consuming process.
Choice #3 is to ignore compatibility issues. Under this approach the developer designs websites for one platform and ignores all other platforms. Maybe the website is designed for users running Internet Explorer with a resolution of 800 x 600. This approach is fine for personal websites or when it is known that all users are using the same platform – such as a computer lab. However, it is not acceptable for a larger audience.
Choice #4 is to run all applications from the server (e.g., using PHP or ASP). The major drawback to this approach is all updates necessitate a round trip to the server in order to re-render the image.
Choice #5 is to use plug-ins. This currently maybe the best approach because it overcomes the boundaries of compatibility issues. Every browser will display a document the same way. Currently the industry default for displaying interactive vector graphics is Flash. It is estimated that 97 percent of all computers/browsers surfing the Internet are already configured, to view Flash documents [HREF 1]. Flash is a fully programmable environment that allows you to create interactive, media rich, professionally looking websites. Flash is the most widely used technology in the world. Listed below are some reasons why Flash has become so popular.
| Size | Dimensions (pixels) | Cost |
| Small | 360 x 540 | $59.00 USD |
| Medium | 1500 x 2250 | $129.00 USD |
| Large | 2700 x 4050 | $199.00 USD |
| Size | Price |
| Small | $1 |
| Medium | $3 |
| Large | $5 |
| X-Large | $10 |
| XX-Large | $10/20 |