web design
|
web design | Graphic Web Design |
|
GIFsGIF (pronounced giff by cool people, jiff by others) stands for Graphics Interchange Format. Because of the way GIFs compress image data, they are valuable for certain types of images, and utterly heinous for others. When it comes to graphic web design, GIFs are best used for simple logos and text. For other images, like photos, JPEGs do a better job condensing. Why? GIFs, in essence, look at images as rows of pixels. When they see a continuous row of the same color, they count how many pixels long it is. Where a bitmap (BMP) file would have to say "blue blue blue blue blue blue blue blue", GIFs can just say "8 blue". In essence. Naturally, it's more complex than that, but if you want to study the LZW algorithm, upon which GIFs are based, you're at the wrong site. If you're curious about the Unisys copyright on the LZW algorithm, and the lawsuits against sites using GIFs built with unlicensed software, you're also at the wrong site. (In any case, the patent expired in the United States in June 2003, and it won't be much longer before it expires in other countries as well. But if you're really worried, you can use the even more compact PNG format, which isn't as widely compatible, though most browsers can see them.) GIFs (and PNGs) are especially useful for their transparency, which allows you to drop them anyplace on a page without having to make their backgrounds match up with the area behind them. To a degree. However, because of anti-aliasing, GIFs can sometimes appear to have a fuzzy edge when dropped against the wrong shade of background. Anti-aliasing softens edges in images, making their normally pixellated appearance more palatable, by averaging values. If you have a red circle on a white background, an aliased GIF will show jaggies - the staircase-looking sharp corners that result from trying to draw a curve with tiny square pixels. But the anti-aliased GIF looks smoother. How? Between the red pixel and the white pixel, the anti-aliasing routine places a pink pixel - the average value between red and white. As the curve is drawn, these smoothing pixels are created in various shades, depending on the shape of the curve and the color-depth of the image. Now maybe you can see the problem GIFs run into. If the transparency color you selected is white, then the anti-aliasing will fuzzy-up the image with lighter pixels, which will look terrible against a darker background. The reverse is also true -- if your transparency color is, say, a super dark magenta, then your image will look bad against light-colored backgrounds. The closest thing to a solution is to save multiple versions of your GIF - one against each background value you anticipate. Now. About animated GIFs... Animated GIFs are not appropriate for websites. Animated GIFs do not look professional. Animated GIFs violate the Geneva Convention, I'm pretty sure. They're fine for buddy icons, and banner ads that we're going to ignore anyway, and for fraudulent businesses that want to draw in suckers. ("If this banner is flashing, you've won! All we need is a credit card number to confirm you're over 18! Oh, and a social security number, to make sure you're a legal citizen.") Don't use animated GIFs. |