Reducing Size of Web Graphics.
Computing & Information Services Department.
jim.cerny@unh.edu
http://www.unh.edu/NIS/Courses/Graphics/Examples/logo.html
updated 17-MAY-1999
Seminar Logo.
In contrast to the "Web Graphics" title or splash-graphic on the main outline page that was made with the Walrod font using Bitstream's PFR technology (6066 bytes for the Walrod PFR file), this page illustrates a smaller version of that title as a graphic logo.
GIF. perceptual palette. 44 colors. transparent. interlaced.
205x63 pixels. 3368 bytes.
GIF. Web palette. 16 colors. transparent. interlaced.
205x63 pixels. 2711 bytes.
GIF. Web palette. 8 colors. transparent. interlaced.
205x63 pixels. 2256 bytes.
Discussion.
These examples were made with the Adobe ImageReady program. Full-featured alternatives include Macromedia's Fireworks and Jasc's Paint Shop Pro. Another alternative is to use the GIFBot at NetMechanic. With GIFBot you enter a URL for a graphic to be reduced in size, e.g., the 44-color graphic above:
http://www.unh.edu/NIS/Courses/Graphics
/Examples/webgraphics-44cti.gif
and it will give you a series of GIF or JPEG results
that trade off image size with quality.
Just save any that you want to keep.
The three examples above are each saved as a
transparent, interlaced GIF, but with successively
greater reduction in the color palette.
This image is suitable for a GIF because it has a limited number of basic colors with sharp transitions. Attempts to optimize the image by color reduction do not produce dramatic results because the alternating background colors and the complex shapes of the letters make for frequent horizontal transitions. I'd regard the middle example with 16 colors as the best compromise, smaller in size than the 44 colors palette, but much better than the 8 colors palette which looses the yellows.
Technical Notes.
These images were prepared with Adobe Imageready 1.0. The font is "Walrod" set to 24 pt. The graphic was assembled in three layers, one for the black text, one for the pink background, and one for the lightyellow background. Accurate specification of the colors required a two-step translation process because Imageready allows for RGB, not names or hexadecimal. Appendix A of Danny Goodman's Dynamic HTML book lists color names and corresponding hexadecimal values. Armed with the hex values, we can use one of the RGB/Hexadecimal conversion utilities on the Web, such as are listed on the Web Authoring Helps and Hints page in the "Backgrounds and Colors" section. The result is:
--------------------------------------------- name hexadecimal RGB --------------------------------------------- lightyellow 255 255 224 FF FF E0 pink 255 192 203 FF C0 CB ---------------------------------------------The text was aliased on a white background. Imageready's optimization menu was used to select palettes. Each variation was saved as a GIF file with transparency and interleaving checked.
Return to Graphics Course.