Optimizing Web Graphics Session #6 INP150

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

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.

Image Formats  PICT  TIFF  BMP  JPEG  GIF  The last two are the standard for use on the web

JPEG & GIF  When To Use Which Format?  In General:  JPEG work better for photographs that have thousands + colors  GIFs are for images where color is limited to 256 (216 for web)

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.

Which Is Better?  Neither -- it depends on your use & intent

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.

Storing Color Information  There are 2 ways to store color raster/bitmap images 1. Indexed 2. RGB

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

RGB  Known as true color  8 bits (0 to 255) for each Red - Blue - Green to form a 24 bit/pixel (8+8+8=24)  Palette 16.7 million colors (2 24 = 16,777,216 colors)

Ways To Take Up Less Space  Compression  Using fewer colors and still show a clear image  Dithering

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

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

Optimizing GIFs  They don’t 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

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 you’ve selected.

What Programs To Use  High-end alternative  Adobe Photoshop Adobe Photoshop  Lower cost alternatives may do just what you need without the $$  L-View Pro L-View Pro  Graphics Workshop Graphics Workshop  GraphicConverter (PowerPC) GraphicConverter (PowerPC)  DeBabelizer Lite LE DeBabelizer Lite LE  There are specialized programs that optimize just for the web  Fireworks  Adobe ImageReady Adobe ImageReady  A Smaller GIF (PowerPC) A Smaller GIF (PowerPC)

EXPERIMENT WITH TRIAL & ERROR  EXPERIMENT WITH TRIAL & ERROR LET YOUR EYES BE THE JUDGE GIVE YOURSELF TIME TO "PLAY"

Sites that have a great deal of information that was used here  Everyone's Guide to Optimizing Graphics Everyone's Guide to Optimizing Graphics  All Things Web All Things Web  Optimizing Web Graphics Optimizing Web Graphics