Home: Technology: Workshops and Technology Resources: Workshops

Graphics and Images on the Web
http://www.arhu.umd.edu/technology/workshops/mmpublishing/webgraphics.html

Balance file size with image quality: smaller the file size, the faster the download time.

How do you make files smaller?

• Reducing image size
• Reducing the number of colors (GIF)
• Compression (JPEG)

 

Image Size

In order to calculate the appropriate image size you must take into account the monitor size and connection speed of your intended viewers before hand.

640x480 screen resolution: 72dpi, 600 x 300 after menus
800x600 screen resolution: 72dpi, 780x440 after menus
832x624 screen resolution: 72dpi, 765 x 420 after menus
1024x768 screen resolution: 72dpi, 980 x 580 after menus

ladies.tif

ladies723x480.jpg (88k)

ladies874x580.jpg (120k)

Color Depth

If you lower an image's color depth, you will reduce the number of colors it contains, which in turn will reduce its file size and download speed when on the web.

Using Photoshop to Reduce the Color Depth.

Color Online

Not all monitors can display 24bit (or millions of color)- some only display 8 bit or 256 colors.
When you look at a 24 bit image on a system that can display fewer colors- that system will handle colors it cannot display accurately by dithering them.

Dithering is the intermixing of two palette colors to create the impression of  a third color. It is used to make images that contain a limited number of colors (256 or fewer) appear to have a greater range of colors and shades.

Palettes and Dithering
Windows vs. Mac browser palettes- share 216 out of 256 colors
i.e. If you use the Mac system palette for an image, any of the 40 non-shared colors you use will be dithered when the image is viewed on an 8-bit Windows browser.

Non dithering web palette
palette.gif
The 216 colors that are shared between browser palettes won't dither from platform to platform- use these colors for all the flat areas of your web graphics; don't worry about the non-216 palette colors used in antialiasing graphics.

Browser Safe Color Palette from Lynda Weinman

"The Browser Safe Palette is useful for flat-color illustrations, logos with flat-color, and areas in any image that have a lot of a single color. When a browser dithers flat colors it looks far more objectionable than when it dithers photographs."

Flat color Illustration Test

JPEG vs Adaptive Palette gifs

Choosing a file format for web graphics

Let the content of the Image-- whether it's flat color or continuous-tone-- determine which file format you use.

JPEG Format:

• Standard for displaying photographs and other continuous-tone images
• JPEG supports millions of colors
• File sizes are reduced with lossy compression rather than color reduction.
• Looks great on 24-bit monitors- on 8-bit monitors they are dithered into the host's operating system palette
• Don't use JPEG with flat-color art, type or images with sharp, well-defined edges; compression produces artifacts.
• Don't resave a JPEG format again as a JPEG- the image will deteriorate with each save.
• Example: http://www.lynda.com/products/books/dwg/dithering.html


Gif Format:

• 8 bit or less images- flat-color illustrations, logos with flat-color, and areas in any image that have a lot of a single color
• File sizes are reduced by limiting the number of colors.
• Images can be indexed to 256 colors or less; less colors means smaller file size.
• Don't double dither- don't select option for dithering.
• Use browser safe palette or fill all flat-color areas with color from the browser safe palette; browser palette will dither pixels to create color that the palette does not contain- the resulting dithering is not noticeable in edges and shadows.
• Flat color Illustration Test : http://www.lynda.com/products/books/dwg/flatdither.html
• GIF compresses by looking at each horizontal line and recording colors so files will be smaller if there is less vertical noise.
• Antialiased Text; various file types, example 1, example 2


Adaptive-Palette GIF

• Composed of 256 colors that are most common to the image rather than the default system set of colors.
• On a 24-bit display, an 8-bit adaptive-palette image looks nearly 24-bit in quality
• On an 8-bit display- browsers will remap the 8-bit adaptive palette into the host operating system's palette


Adaptive-Palette GIF vs. 24-bit JPEG

• Photographic image saved as adaptive-palette GIF or JPEG will dither on display systems that offer less than 24- bit color depth.
• JPEG- your image may retain the greatest color integrity, and readers with 24-bit display systems will receive a higher quality image.
• Adaptive-palette GIF- take advantage of the GIF format's perks- transparency and interlacing
• 3children-wjohnson.jpg
• 3children-wjohnson.gif (adaptive palette, no dithering)
• 3children-wjohnson.psd

Brightness Differences between Platforms

• Your pages will look different on different computer monitors and platforms.
• Mac monitors and color cards tend to make everything look lighter.
• Use gamma setting of 2.2 (rather than usual 1.8) with Control Panel utility "Gamma"
• This setting closely simulates what your Mac graphics are going to look like on a PC.
• Check your pages on other platforms and make informed changes if necessary

General Guidelines

• Helpful files such as Gamma Correction, Color Look-up Tables, etc., http://www.lynda.com/files/
• Backgrounds: browsers tile GIF of JPEG files- to create faster download times, make your tiles small- 96x96 pixels
• Use alt tag and size


IMG SRC="amstudies2.gif" ALT="American Studies" WIDTH="345" HEIGHT="49"
• Choose a background color for your default that is the dominant color in your texture
• Type:
•  Anti-alias type but reduce colors
• Use 216 color palette for flat areas
• When setting type on a flat background, 3-4 intermediate colors will usually work
• Reduce type to between 2 and 3 bits deep
• View your image through a browser on computers other than your own so you can see how quickly it actually downloads and how good (or bad) it looks.
  

 

Back to Top

Contact Information:

Contact us with questions, comments and feedback: acs-worskhosp@umail.umd.edu
Search the Arts and Humanities web site