Optimizing Web Graphics

1
Optimizing Web Graphics

• Session 6
• INP150

2
Image Types

• Types
• Bitmap / Raster---dots
• Bitmap images are made of individual pixels
  arranged in patterns.
• Vector---object(s) (math)
• Objects are created as collections of lines in
  vector graphics

3
Comparing a vector-based image with a bitmap image

• Bitmap images are great for photographs because
  they tend to offer greater subtleties for shading
  and texture but require more memory and take
  longer to print.
• Vector images are best for drawings that need
  sharper lines, more detail, and easy
  modification. Vector images require far less
  printing resources.

4
Image Formats

•  PICT
• TIFF
• BMP
• JPEG
• GIF
• The last two are the standard for use on the web

5
JPEG GIF

• When To Use Which Format?
• In General
• JPEG work better for photographsthat have
  thousands colors
• GIFs are for images where color is limited to
  256 (216 for web)

6
So How Do I Choose?

• GIFS are required in instances where the color
  fidelity must be exact.
• GIFS are great at compressing images with large
  horizontal expanses of color.

7
Which Is Better?

• Neither -- it depends on your use intent

8
Dithering

• Dithering is when the display can not show all
  the true colors and so tries to combine pixels
  from its 256 color palette to try and approximate
  the other colors. This will make the image appear
  speckled banded.

9
Storing Color Information

• There are 2 ways to store color raster/bitmap
  images
• Indexed
• RGB

10
Indexed

• Mapped to 256 colors or less
• Use a color look-up table (CLUT)
• A CLUT is a computer version of a paint stores
  mixing chart

11
RGB

• Known as true color
• 8 bits (0 to 255) for each Red - Blue - Greento
  form a 24 bit/pixel (88824)
• Palette 16.7 million colors (2 24 16,777,216
  colors)

12
Ways To Take Up Less Space

• Compression
• Using fewer colors and still show a clear image
• Dithering

13
Compression

• Math algorithms are used to re-encode data into
  more compact representations of the same
  informationUsing fewer colors and still show a
  clear image Lossy Lossyless

14
Optimizing JPEGs

• Allows you to control compression
• Experiment with different ratios
• Programs are different some use that decreases
  compressions
• Others do the exact opposite
• There seem to be no hard fast rules
• You simply have to experiment
• Remember -- your eyes will be more critical than
  your readers

15
Optimizing GIFs

• They dont allow you to control compression
  directly
• But can do it automatically to fit the smallest
  space given a specific of colors in the image
• This rendering is called
• reducing color depth or
• dropping color depth or
• palette optimization
• Fewer colors are better than more colors

16
Working w/GIFs

• Many GIFs have wasted space
• They assume every image has 256 colors but many
  don't ( like buttons, bullets, etc)
• Going below 16 colors is not a good idea!!
• When you save the file in a GIF format the image
  will automatically be reduced to the smallest
  possible size for the color palette youve
  selected.

17
What Programs To Use

• High-end alternative
• Adobe Photoshop
• Lower cost alternativesmay do just what you need
  without the
• L-View Pro
• Graphics Workshop
• GraphicConverter (PowerPC)
• DeBabelizer Lite LE
• There are specialized programsthat optimize just
  for the web
• Fireworks
• Adobe ImageReady
• A Smaller GIF (PowerPC)

18
EXPERIMENT WITH TRIAL ERROR

• EXPERIMENT WITH TRIAL ERRORLET YOUR EYES BE
  THE JUDGEGIVE YOURSELF TIME TO "PLAY"

19
Sites that have a great deal of information that
was used here

• Everyone's Guide to Optimizing Graphics
• All Things Web
• Optimizing Web Graphics