Home arrow Graphic Design arrow Page 2 - Web Graphics Overview

Web Graphics Overview

Currently there are three dominant file types found on the Internet: GIF, JPEG, and PNG. Learn how each can work to help us preserve image integrity, while keeping files sizes minimal. Properly optimizing your graphics will make your site look more professional, and reduce the amount of time your visitors spend waiting for your pages to download.

Author Info:
By: Bryan Montford
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
August 02, 1999
  1. · Web Graphics Overview
  2. · CompuServe's Graphic Interchange Format (GIF)
  3. · Joint Photographic Experts Group (JPEG)
  4. · Portable Network Graphic (PNG)
  5. · Conclusion

print this article

Web Graphics Overview - CompuServe's Graphic Interchange Format (GIF)
(Page 2 of 5 )

Some say it should be pronounced with a soft "G," as in "Choosy moms choose JIF." However, most people I know pronounce it GIF, the "G" sounding hard, as in "Graphic." When in a discussion, I'll use whatever the other person seems comfortable with. Frankly I don't much care how it's pronounced as long as people understand what's being discussed. It's a name of a file format, not a political issue, and not worth debating. (Although some will debate that it's not worth debating.)

GIF was developed by Unisys specifically for online graphics. It supports a maximum of 256 colors and is best used on images with sharply defined edges and large, flat areas of color. Text and line based drawings usually fall into this category. GIF uses LZW (Lempel-Ziv-Welch) compression to make files small and transfer quickly over a modem. GIF is a lossless format, meaning that it doesn't discard information to save space. Please note that converting an image with thousands or more colors to 256 colors is a destructive change that will result in decreased image quality. GIFs currently come in two flavors, GIF87a and GIF89a. The GIF87a format has fallen out of favor somewhat since it doesn't support transparent colors, interlacing, or animation. Both types support dithering. If you don't need a transparent or animated GIF, then don't sweat over choosing GIF87a or GIF89a. Both should be viewable in any browser that supports images.

Some notes about GIF files: Fewer colors equal smaller files. GIFs have to store every color used in a table. The fewer colors stored, the smaller the resulting file.

Interlacing a GIF will make it appear more quickly in a browser, but will make the file larger. A good rule of thumb is to interlace images larger than 10 or 15k, but not those that are smaller.

You can dither a GIF and make it seem to contain more than 256 colors. Dithering works by grouping differently colored pixels next to each other fooling the eye into seeing a color that isn't really there. Dithering can increase file size significantly, since it works against the compression method used by GIF.

GIFs can compress an image with horizontal stripes better than one with vertical stripes. A GIF "reads" from the upper left to the lower right, compressing each horizontal row before moving on to the next, making it more efficient at storing files with "horizontally dominant" information.

blog comments powered by Disqus

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials