GIF/JPEG combos.

by Joe Gillespie — Aug 1, 2001

JPEGs are the best format for photographic images and type is better delivered as GIFs, but what happens if you need to have type within a photograph? You either have to use an inappropriate GIF for the photographic image to get the text looking good or compromise the quality of the text by using a JPEG.

Here are two ways to combine GIFs and JPEGs to get the best of both worlds.

JPEG with type

In this JPEG image with type (5.5k), the lettering causes nasty artifacts to appear because JPEGs just can't handle that kind of contrasty situation even at relatively low compression levels. If it weren't for the type, the image compression could be pushed even further to get a smaller file size.

Arabian Nights GIF

Using a GIF for this image gives crisp type, but the image itself is severly banded. GIFs are not good at reproducing smooth gradations like this. Even with this poor quality, the file size is 7k.

JEPG with Gif overlay

This is a 3.6k JPEG file used as a table background image with a 1.5K transparent GIF as a foreground image. The total file size is 5.1K. Not only is the overall quality much superior, the combined file size is smaller.

You can also get a similar result with CSS-P. Using the 'Z' layers, a GIF with white text on a transparent background overlaying on a photographic JPEG image. Just make sure that the GIF text anti-aliases against a similar background colour or you will get a nasty halo.

In the GIF file opposite, I isolated the lettering plus its anti-aliased fringe by making an alpha channel of the type and selecting the black background with no anti-aliasing and zero tolerance. That selection was then used to clear the picture part of the combined image leaving just the type and fringe.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float