Optimizing Web Graphics
Download
Report
Transcript 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