TechVideos
  Home     About           Free Videos           FAQ     Contact  
Stay Informed Tell A Friend Bookmark this site
Copyright 2006

Comparison of Web-based Graphics: Formats and Compatibility Issues


INTRODUCTION

Whether creating a website or placing images on the web for others to view, it is important to have a good understanding of graphics. This paper will 1) compare and contrast the various graphic formats, 2) examine compatibility issues with graphics, and 3) compare some royalty-free websites for downloading images and clipart.

GRAPHIC FORMATS

Images can be classified using various approaches. They can be classified according to: 1) whether the images are stored as pixels or objects - raster versus vector images, 2) whether the images are static, animated, or interactive, and 3) whether information is lost when the images are converted back and forth - lossless versus lossy.

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.

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.

COMPATIBILITY ISSUES

When developing websites, especially those containing interactive graphics, compatibility issues often arise. The developer is often faced with several choices.

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.

To illustrate the small size of files created using Flash, an image was animated using both Adobe ImageReady and Flash. The animated image created in Adobe ImageReady was 200K. A similar animation was performed in Flash resulting in a file size of only 46K.

ROYALTY FREE STOCK IMAGES

Graphic designers, web designers, art directors and other creative professionals are continually looking for stock photos and illustrations for their web sites and brochures. Below are listed some websites that can provide or sell licensed images that can be used an unlimited number of times for one price. It should also be mentioned that if the Microsoft Office's Clipart Gallery contains thousands of royalty-free images. These images are available to anyone who has a copy of Microsoft Office or Microsoft Word.


CONCLUSION

Whether creating a website or placing images on the web for others to view, it is important to have a good understanding of graphics. This paper 1) compared and contrasted the various graphic formats, 2) examined compatibility issues with graphics, and 3) provided links to some royalty-free websites.



Powered by Sphider