Web Graphics Tips and 
Techniques
By: 
Giovanna Genard and Cyndi Carey

Audience Considerations | Graphic Format Tips | Techniques | Resources

GRAPHIC FORMAT TIPS
As Web professionals, we are pushing the boundaries of what we can do to create rich graphics that do not take forever to download. It is important to know your audience in order to achieve successful Web graphics design. Knowing when to use a JPEG versus a GIF, and how to design the images to make the most of their various compression schemes, will arm any Web professional with the power needed to develop effective Web sites.

JPEG File Format

  • JPEG is used as a first choice for photographic images.
  • Supports 24 bit color (displays up to 16.8 million colors).
  • Limitations: does not support transparency or animation.
  • Uses “lossy” compression (once you saved it, you can’t get the info back).
  • More Info: JPEG Graphics by Yale Web Style Guide

JPEG Tips

  • After you’ve opened a graphic, view it a 100% to verify the size on a browser, go to image size, down sample the image to ensure it only has 72 dpi (check resample box).
  • Photoshop Unshark Mask Filter: Sharpening the image makes it look crisper because you can control the sharpening values. However, this comes at a cost. JPEG compression engines like soft edges and applying the unsharp mask increases the contrast of edges, thus, increasing the file size.
  • To view the compression results, close image and reopen it (compression can’t be seen until you do this). Don’t need to do this if you use Fireworks or ImageReady. In these programs, you are able to preview the original image side by side the compressed version.
  • Turn off Photoshop previews: Web graphics don’t need them! File>Preferences>Saving Files. Change image preview to “Ask when saving.” In the Save dialog box, uncheck all the image previews. This can bring the file size down by 50%. Also, change "Appended File Extension" to “Always” and turn on the “Use lowercase” extension.
  • A progressive JPEG usually yields the smallest file size. However, it may not display well in all browsers or platforms.

Determining The “Real” File Size

  • MAC users: select image from the finder menu. From File menu, choose Get Info (command I). Look at the number in parenthesis, NOT the number of K on disk. There are 1024 bytes in a kilobyte. If file size says 25K, it is about 18.5 K.
  • Use freeware (such as DropImage) which display actual file weight and precise image dimensions.
  • Graphics aren’t the only weight in a page, text is too. Dreamweaver displays the actual entire page size at the bottom of the screen.

GIF File Format
Used for graphics with solid colors (line art, logos, text, icons, etc.), for photographic images you want to animate, or for images that use a transparent background.

  • Supports 8 bit color (256 colors)
  • Supports transparency (1 bit)
  • Can be animated
  • More Info: GIF File Format by Yale Web Style Guide

GIF Tips:

  • GIFs use Web dithering: alternating colors of pixels in a given row, which adds a significant amount of graphic file size. If using a gradient, it is best to apply it vertically rather than horizontally.
  • 4 GIF Rule: GIFs download in groups of four (this also applies to other image formats).
  • Safe palettes (download own custom palette)
  • Compressing: Lock down colors, (drop colors to minimum needed)
  • Gradient applied vertically (smaller size).

PNG

  • Uses lossy and lossless compression
  • Like JPEG, PNG supports 24 bit color (displays up to 16.8 million colors).
  • Supports true 8 bit transparency via an alpha channel
  • Supports animation
  • Not yet supported by all browsers
Audience Considerations | Graphic Format Tips | Techniques | Resources