|
|
A L L A B O U T W E B D E S I G N !™
Registered with the Library of Congress ISSN: 1526-1905
*** Exclusive Mailing ***
Solo Articles of interest to our subscribers
April 8, 2001
Article Sponsored by
LEARN WEB SITE DESIGN...AND START YOUR OWN HOME-BASED BUSINESS. Our online course will show you how! We can't promise you'll get rich, but we do promise an honest opportunity with a 100% satisfaction guarantee. Our next class is starting soon and space is limited! This is a great way to earn a little extra money each month on your own terms and schedule. Visit our site to see what our current students have to say. Great affiliate program as well! For details & a limited time special offer visit: http://WebDesignCourse4U.com/aawd
GIF interlacing, transparency
and aliasing/anti-aliasing
by
Peter de Pradines
Before we start I want to clear up some concern people seem to have about dithering and the 216 web-safe colors. Quite a few people have contacted me about this and there seems to be quite a lot of confusion.
There are two key points we need to keep in mind. First, we use GIF files in order to compress other much larger files like bitmaps (BMP) and so get them to download from the web server into browsers much quicker. Secondly the compression technique relies on there being large areas of the same color in the graphic.
This is not areas of similar color but areas of the exact same color. When these occur, the compression genie is happy because he can say (for example) print this red color pixel 291 times instead of saying print this red color pixel and have to say that 291 times. The first is much quicker. Can you see how the compression works and why it must be the exact same color?
Now let's take a quick look at web-safe colors. With 8 bits you get 256 combinations of zeroes and ones. Somebody (no names mentioned) stole 40 of those combinations for 'other things' sowe end up on the web with 216 colors that can be safely - fairly reliably - reproduced in most modern browsers on most current systems. Notice I said fairly reliably. It doesn't always work out but it does mostly.
What happens if the color we need in our graphic is not one of these 216? It may be that the color of the company logo doesn't exactly fit one of these and, because it's the company logo, we can't just up and change the color for the Web.
Most graphic programs will get around this problem by dithering two web-safe colors together so that the combination fools the eye into seeing the color we're after. Dithering is just a big word for alternating two colors pixel by pixel like squares on a chess board.
This works fine. We use a combination of two safe colors to get the 'appearance' of the one we want. One problem solved, but another created. Remember our GIF compression genie loves the same color in a long sequence. He does not like alternating colors. Dithering greatly increases the finished size of the compressed graphic, which is why we mostly try to stick to the basic 216 web-safe colors.
This concept often causes a lot of confusion and I hope that's cleared it up okay for everybody. Dither if you really must but don't if you can avoid it. Bit like life itself, I suppose.
Normal GIFs are displayed one row of pixels at a time, from top to bottom, or they wait until the entire file has downloaded before the image appears. On slow connections, this can mean potentially long waits with empty squares of space and generic graphic icons on the monitor screen.
As an alternative a GIF can be saved with interlacing which displays the graphic in a series of four passes. This gives the first hint of the incoming image after only an eighth of the image has downloaded. This result of the first pass is a blurry mosaic; but as more data flows in these blurred areas are filled in with real image information.
Quite quickly the image becomes more defined. As each pass occurs, first 25%, then 50% and finally 100% of the image detail is displayed. The advantage of interlacing is that it gives the user something to look while the rest is downloading. It's a flash-back to the old programmer's technique of using splash-screens when a programs starts up. It gives the user a focus whilst all the start-up housekeeping routines are run behind the scenes.
Also if the user is familiar with the site a blurry navigation graphic may not need to be filled out completely before it can be recognized and clicked on. Equally a partially downloaded image may be enough to show a viewer that they don't want to wait for the full download, allowing them to move on elsewhere.
The disadvantage is that interlacing adds a slight overhead to the compression. Nowhere near as much as that caused by dithering but, as the saying goes, rarely do you get something for nothing.
For quite a time GIFs came in two versions - the earlier 87a format and subsequently the improved 89a format.
The 89a introduced the ability to make portions transparent. Whatever is behind the graphics transparent areas (normally background color or graphic) will show through.
Previously this effect was achieved by chopping up graphics into small pieces, each displayed in distinct cells of a table. The areas that were to be 'transparent' help only a period character set to the same color as the background or, later, the non-breaking space. The problem here was that you could only get oblong transparent areas. The 89a format gave a technique that allowed just about any shape you needed.
To understand how transparency works, you need to start with the color table (the table that contains the pallete) for the indexed color image. In transparent GIFs one slot in the color table is designated 'transparent', and whatever pixel color fills that position is known as the TIC - Transparent Index Color (usually gray by default). All pixels in the image that are painted that color will be transparent when displayed in the browser.
In most graphic programs, the transparent area is specified by selecting a specific pixel color in the image with a pointer or eyedropper tool. All pixels in the graphic that are the selected color will be replaced with the TIC and therefore transparent when rendered in the browser.
The boundary between the edge of the graphic, often a solid color in a GIF, and the surrounding area is often stark. There is a sharp change from say the red of the graphic to the white of the background. With straight vertical and horizontal lines this is good for a sharp display. This abrupt color change was known as an alias.
The problem comes when any slope is required. Since pixels are square blocks anything that constitutes a slope must be shown as a series of steps. This has come to be known amongst those who like the jargon as the dreaded GIF 'jaggies' due to the jagged edge that can result on low resolution screens.
These days the problem is diminishing as screen resolutions rise but it certainly was a real problem not so long ago. In order to overcome this jagged edge effect on a GIF slope line a system known as anti-aliasing was introduced. Simply put this put in a series of intermediate pixels on the border half way between the graphic color and the color on the outside.
Anti-aliasing could be increased, giving more intermediate colors and therefore a softer edge, or decreased as required. Once again there was a premium to pay with GIFs. Anti-aliasing introduces a bunch of intermediate colors which increases the file size. Also with text care needed to be taken. As a rule of thumb, the larger the text or graphic, the more the benefit obtained by anti-aliasing. Very small text (12 point or less) is often made blurry and almost unreadable by anti-aliasing whereas large text (48 point and over) looks ugly without it.
Mostly people were real happy with being able to smooth larger text and long slope graphics with anti-aliasing. It certainly gave the web designer another choice and more flexibility. Some dedicated professionals split up their graphics into slices, some aliased and some not but this is usually over-kill. What does need attention if you use anti-aliasing is that you make sure to save your GIF against the right background.
If when anti-aliasing a graphic, especially text saved as a graphic, always ensure that you do it against background color as similar as possible to its final destination. This is equally so whether or not the 'background' of your saved GIF is set to transparent.
Imagine you have a GIF comprising of a red circle set against a white background. Since it's quite a large circle you decide it's best anti-aliased to give the circle edge a nice smooth border. Since when you finally save the GIF you're going to make white the transparent color you think not to worry what color is the background.
You save your GIF and finally insert it into your HTML page with a black background only to find to your horror that it's grown a fuzzy white halo all around. What's happened is that when you anti-aliased your GIF it picked intermediate colors between the red of your graphic and the white background. This resulted in intermediate pastel pinks and lighter shades.
Setting you transparent color to white only removed the white pixels - none of these intermediate light colors. When placed on a dark background they showed up in all their glory - a nice 'white' halo around you red graphic.
Whenever you anti-alias always do so against a background as close to that of the final designation as possible - even though you intend to make the graphic background transparent. Of course, it may just be that your intention is to get a halo and this may be a novel way of achieving that effect.
This covers the important basics of GIFs. There still is a great deal more to them than I have covered here. However these are their many features, benefits and places where you might trip yourself up.
Just because the old GIF has been around almost since Pontius was a pilot, don't think that they're low-tech, they're not. They're rugged little beasts that have adapted and survived through just about 100% of the Web's history, not a small achievement these days.
Article written by Peter de Pradines, Owner and webmaster of the HiperNet Group Graduate in Computer Science with 30 years hands-on experience. Peter lectures in Europe and holds winter workshops for small groups on the very beautiful Mediterranean island of Mallorca. Specializing in web design and copywriting he may be contacted at: Peter@dePradines.com or http://www.4SiteJournal.com
LEARN WEB SITE DESIGN...AND START YOUR OWN HOME-BASED BUSINESS. Our online course will show you how! We can't promise you'll get rich, but we do promise an honest opportunity with a 100% satisfaction guarantee. Our next class is starting soon and space is limited! This is a great way to earn a little extra money each month on your own terms and schedule. Visit our site to see what our current students have to say. Great affiliate program as well! For details & a limited time special offer visit: http://WebDesignCourse4U.com/aawd
To subscribe to All About
Web Design!(tm) send a blank e-mail to:
<a href="mailto:allaboutwebdesign-subscribe@yahoogroups.com">
mailto:allaboutwebdesign-subscribe@yahoogroups.com
</a>
To unsubscribe send a blank
e-mail to:
<a href="mailto:allaboutwebdesign-unsubscribe@yahoogroups.com">
mailto:allaboutwebdesign-unsubscribe@yahoogroups.com
</a>
Replying to this message will NOT remove you.
Copyright 1999, 2000, 2001 © Linda Anderson (aka windsong). All rights reserved. Please do not reprint, or host on your web site, without explicit permission. We disclaim any liability for the use of any contributed information contained herein. We also claim no responsibility for the legality or accuracy of the subscriber's advertisements or articles submitted and reprinted by permission.