1. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 19: GIF Format

2. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  Wiley and the book authors, 2002 Summary

3. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition3  Wiley and the book authors, 2002 Synopsis GIF (Graphic Interchange Format) was the first graphic file type to be displayed by early web browsers, and it remains the most popular and versatile format for distributing color images on the web to this day. Any image can be saved as a GIF, but they excel at condensing graphical images with areas of flat color (no gradients) GIFs are completely platform-independent, meaning a GIF created on any platform can be viewed and edited on any other platform. They were originally developed by CompuServe to distribute images over their network to a variety of platforms (this is why you sometimes see GIFs referred to as “CompuServe GIF”). It is also the only graphic file format that is universally supported by all graphical browsers, regardless of version.

4. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition4  Wiley and the book authors, 2002 8-bit indexed color GIF files are indexed color images that can contain a maximum of 8-bit color information (they can also be saved at lower bit rates to dramatically reduce the file size). This means they can contain up to 256 colors. Lower bit depths result in fewer color choices Indexed color means that the set of colors in the image, its palette, is stored in a color table. Each pixel in the image contains a reference to a cell containing the color for that pixel. When you convert a 24-bit image to GIF, it is necessary to first convert the image to Indexed Color mode, and as a part of that process, reduce the number of colors to a palette of 256 or fewer colors. The image- editing tool does its best to approximate the full color range by using the most appropriate colors to approximate the image (an adaptive palette). You can specify an alternate set of colors to use in this process (such as the web-safe palette).

5. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition5  Wiley and the book authors, 2002 GIF compression There are 2 main things to know about GIF compression.  First, it is a “lossless” compression, meaning no image information is lost in the compression process (some information may be lost in the conversion process from RGB to indexed color, though).  Second, GIF uses LZW (Lempel-Zev-Welch) compression, which takes advantage of repetition in data streams. E.g., when the compression scheme hits a row of 15 identical blue pixels, it can store the information as “15 blue” instead of representing each of the 15 pixels  Unisys caused quite a stir on the Internet in 1994 when they announced that it would begin charging licensing fees to developers incorporating GIF compression into their products. This led to the development of PNG

6. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  Wiley and the book authors, 2002 When to use GIFs GIF is a versatile format for condensing color images for use on the web. It is particularly well suited for any image with areas of flat color, such as logos, line art, icons, cartoon-like illustrations, etc. It compresses them cleanly and efficiently. Even if the image contains some photographic elements, if the majority is flat colors, GIF is the best bet. You will also need to use the GIF format if you want a portion of the image to be transparent, because it is the only format that has this ability and is universally supported (PNG does support transparency). GIF is also a good option for adding simple animation to your page without relying on plug-in technology. GIFs are not particularly good for photographic images. With the 8-bit limit, true-color information is lost and the subtle gradations of tone become pixelated when the image is reduced to 256 colors. GIF compression also does not perform well on these types of images.

7. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition7  Wiley and the book authors, 2002 Interlacing Normal GIFs are either displayed one row of pixels at a time, from top to bottom, or all at once when the entire file has been downloaded. On slow connections, this can mean potentially long waits with empty space and generic graphic icons on the screen As an alternative, you can save a GIF file with interlacing. An interlaced GIF is displayed in a series of 4 passes, with the first hint of the upcoming image appearing after only 1/8 th of the file has downloaded. The first pass has the appearance of a blurry mosaic; as more data flows in, the blurred areas are filled in with real image information and the image becomes more defined. Graphics programs that support the GIF format provide an interlacing option in the Save As or Export dialog box. Interlacing does slightly increase the size of the GIF file, however.

8. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition8  Wiley and the book authors, 2002 Transparency The GIF89a format introduced the ability to make portions of graphics transparent. Whatever is behind the transparent area (most likely the background color or pattern of the web page) will show through. With transparency, graphics can appear to be shapes other than rectangles. In most graphics tools, the transparent area is specified by selecting a specific pixel color in the image with a special transparency pointer or eyedropper tool. All pixels in the image that have the same color index will be transparent when they are rendered in a browser

9. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition9  Wiley and the book authors, 2002 Preventing “Halos” Far too often, you see a transparent graphic on the web with light-colored fringe around the edges that doesn’t blend into the background color This effect is the result of anti-aliasing, the slight blur used on curved edges to make smoother transitions between colors. Aliased edges, by contrast, are blocky and stair-stepped. When the color around an anti-aliased edge is made transparent, the blur along the edge remains intact, and you can see all those shades of gray between the graphic and the darker background. Halos make graphics look messy and unprofessional Once an image is saved as a GIF, the only way to fix the halo is to erase the anti-aliased edge, pixel by pixel. Even if you get rid of all the edges, you’ll be left with blocky edges and the quality of the image will suffer

10. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition10  Wiley and the book authors, 2002 Preventing “Halos” (cont.) One way to avoid halos is to keep your image and text edges aliased. That way there are no stray pixels between your image and the background color.  Aliased edges are halo-proof and require fewer pixel colors resulting in potentially smaller file sizes. Unfortunately, the blocky edges often just look bad Using a matte color tool or a colored background layer are also effective ways to eliminate the halo that don’t result in the blocky appearance in the image.  In this method, you either will leave out the background of the image and set the matte color when saving the file or set the background color of the image to match the color of the web page that the image will be placed on. This will result in an anti-aliased edge of the graphic, but it will be blended into a color that is similar to the color that the image will be placed on.

11. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition11  Wiley and the book authors, 2002 Preventing unwanted transparent areas In some instances, you’ll find that the color around the edge of your image that you want to make transparent also appears within the image. This means that if you select the edge color for transparency, parts of your image will disappear as well. The most general way to prevent this is to create the image normally and convert it to the paletted/indexed color, convert it back to RGB mode, paint the color you want to be transparent with a color that does not appear in the graphic, then convert it back to the paletted/indexed color mode. Then select the new background color for the transparent color.

12. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition12  Wiley and the book authors, 2002 Minimizing GIF file sizes When designing and producing graphics for the web, it is of utmost importance to keep your file sizes as small as possible.  Tools for optimizing GIFs  There are several software tools specifically for creating and optimizing graphics for the web. These will generally offer previews of your optimization settings (even providing side-by-side comparisons), so you can make adjustments to the settings while keeping an eye on the resulting file size and overall image quality  Design Strategies  You can help keep the file size under control by the design decisions you make o Limit dimensions: scale large images down Crop any extra space around the important areas of your image o Design with flat color Fill areas with solid colors rather than gradients Limit the amount of photographic material in your GIFs Favor horizontal fields of color in your designs when applicable Turn off anti-aliasing when it isn’t necessary

13. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition13  Wiley and the book authors, 2002 Minimizing GIF file sizes (cont.) o Reduce the number of colors You can reduce the size of a file considerably by saving it at a lower bit depth which results in a fewer number of colors For greatest optimization and quality, choose a power of 2 for the number of colors in the image (2, 4, 8, 16, 32, 64, 128, or 256) The goal is to find the minimum number of colors that still maintains the integrity and overall character of the image o Limit dithering When an RGB image is reduced to an indexed color, dithering usually occurs. This is the random dot pattern that results when colors are approximated by mixing similar and available colors from a limited palette.