Download Optimizing Web Graphics

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

1.
2.
There are 2 ways to store color
raster/bitmap images
Indexed
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
8
as true color
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


There seem to be no hard fast rules


Others do the exact opposite
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


Lower cost alternatives
may do just what you need without the $$





Adobe Photoshop
L-View Pro
Graphics Workshop
GraphicConverter (PowerPC)
DeBabelizer Lite LE
There are specialized programs
that optimize just for the web



Fireworks
Adobe ImageReady
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
All Things Web
Optimizing Web Graphics