Jessett.com home  

graphic design

design principles
choosing color
design layout
software
graphic formats
photoshop tutorials
gradient map images
transparent backgrounds
using the liquify tool
creating a favorites icon
quick tips

home > graphic design > graphic formats

graphic formats

Graphics on the web can hugely add to the visual effect of a web site, but they also add to the download time. Web graphics can be static, animated or photographic. These are usually either gif, jpg or png file formats.

It is virtually impossible to "teach" on-line how to create graphics, it takes both creative talent as well as knowledge of the tools. Most tools provide both a within-product tutorial as well as a booklet. You can also learn a lot from the "Help" menu in the software. There are some specific Photoshop tutorials here.

graphic formats

gif

  • 8-bit colour
  • Compresses solid areas of colour and preserves detail, like logos, or illustrations with type
  • Reduced amount of colours and interlaced for faster download
  • Support tranparency
  • Also used for animated graphics

jpg

  • 24-bit colour
  • Preserves the quality of brightness and hue found in photographs
  • Also used for continuous-toned images
  • Can be saved as high or low quality
  • A progressive jpg file can also be used - low-resolution version of image appears while the full image is downloading
  • Don't support transparency

png

  • png-8 supports 8 bit colour
  • Compresses solid areas of colour
  • Preserves sharp detail
  • Supports transparency
  • More advanced compression than gif (see above) - can be 10-30% smaller file size than gif
    • View optimized images in gif and png-8 format to compare file size
  • Only supported by version 4+ browsers
  • http://www.w3.org support it in the HTML 4 specification over gif (because the gif format is owned by Compuserve)
  • Read more about png from w3.org here: http://www.w3.org/Graphics/PNG/

basic pointers

  • Keep the file size to a minimum
  • Always use RGB colour
  • Use the web palette (216 web-safe colours)
  • Keep the physical size small - larger graphics look clunky on a web page

If gif:

  • Save with as few colours as possible
  • Save as an interlaced .gif
  • Make the background colour (where applicable) transparent

If jpg:

  • Lowest quality possible
  • Save as progressive