Graphics on the Web
How much do you want to know??
Terry Griffin
Prerequisites
• Bits
• Bytes
Graphics on the Web
•Everyone places pictures on the web.
•Some people place pictures on the web.
•At least a few individuals place pictures on the
web
Graphics on the Web
•Why should you care?
• Adds a dimension to your web site
• If you are going to make a web page, then
you should do it right 
Overview
•What are graphics??
•Images
•Logos
•Backgrounds
•Any colorful enhancement of a web page
Overview
Concerns
• Download time
• Blurry pictures
• Squished pictures
• Placement and organization (another talk)
Terminology
•Picture Size (which picture – file is bigger??)
270 kilobytes
1.1 megabytes
Terminology
•Bit Depth
24 bits
16 bits
8 bits
Terminology
•Bit Depth
Grayscale (8 bits)
1 bit
Terminology
• Bit Depth
• 24 bits = 224 = 16777216 (millions of colors)
• 16 bits = 216 = 65536
• 8 bits = 28 = 256
• 8 bits = 28 = 256 (shades of gray)
• 1 bit = 2 colors (black / white)
Terminology
• Pictures are made of Pixels
• What’s a Pixel?
• Smallest piece of a picture.
• Represents a single color
• More pixels = better clarity
Pixels
Pixels
R
G
255 0
B
0
R G B
204 0 204
Terminology
• Compression
• Reduces the size (disk space) of an image.
• Typically by reducing bit depth.
• Usually not noticeable
198 kilobytes
68 kilobytes
Terminology
• Compression
• Lossy Compression
•Reduces file size by “removing” pieces of the picture
•Actually just condenses the picture, not reversible
•Usually not noticeable by the human eye
• Lossless Compression
•Reduces file size, but retains the original image
information
•Relies on the repetitive nature of particular images
•Reversible
Picture Formats
Bmp
Gif
Jpg
And many more….
Png
Picture Formats
• JPEG/JPG (Joint Photographic Experts Group )
• JPG is a lossy compression technique that is designed to
•
•
•
•
compress color and grayscale continuous-tone images.
The information that is discarded in the compression is
information that the human eye cannot detect.
JPG images support 16 million colors and are best suited
for photographs and complex graphics.
The user typically has to compromise on either the
quality of the image or the size of the file.
JPG does not work well on line drawings, lettering or
simple graphics because there is not a lot of the image
that can be thrown out in the lossy process, so the
image loses clarity and sharpness.
Busy slide #1
Picture Formats
• GIF (Graphics Interchange Format )
• Unlike JPG, the GIF format is a lossless compression
technique and it supports only 256 colors.
• GIF is better than JPG for images with only a few
distinct colors, such as line drawings, black and
white images and small text that is only a few pixels
high.
• With an animation editor, GIF images can be put
together for animated images.
• GIF also supports transparency, where the
background color can be set to transparent in order
to let the color on the underlying Web page to show
through.
Busy slide #2
Picture Formats
•
•
•
•
•
PNG(Portable Network Graphics)
Not supported by all browsers.
PNG developed as a patent-free answer to the GIF
format, also an improvement on the GIF technique.
An image in a lossless PNG file can be 5%-25%
more compressed than a GIF file of the same image.
PNG builds on the idea of transparency in GIF
images and allows the control of the degree of
transparency, known as opacity. Saving, restoring
and re-saving a PNG image will not degrade its
quality.
PNG does not support animation like GIF does.
Busy slide #3
Making a choice
•This 200 x 200 pixel image saved as:
•Gif = 40 kbytes
•Jpg = 117 kbytes
•???
Choice
•This 1024 x 768 pixel image
saved as:
•Gif = 258 kbytes
•Jpg = 60 kbytes
•???
More Terms...
•Crop
More Terms...
•Resize
More Terms...
•Skew
More Terms...
•Dither
Why does all this matter??
• Over-compressed or skewed images have
a poor look.
• Under-compressed images download slow.
What’s the bottom line??
• Save photographs as jpg.
• Save images (graphs, charts, formulas,
etc.) as gif.
• Edit in gif, not jpeg.
• Don’t force an image to be something it’s
not!!
Web Examples
• Example 1
• Example 2
• Example 3