Transcript Images - Department of Computer and Information Science

Design Concepts:
Module B: Adding Images
CSCI N241: Fundamentals of Web Design
Copyright ©2004  Department of Computer & Information Science
Goals
• Understand how what dithering and
gamma are
• Understand how image compression
works
• Understand how to add images to
your web pages
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Dithering
• Typically, modern monitors can
display 24-bit, “True Color”
• However, there are other monitors
which don’t have “True Color”
capabilities
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Dithering
• As a result, 24-bit colors which are
not recognized by less powerful
displays are approximated.
• The approximation can result in a
speckled look called dithering
• Solution? The “Web Palette”
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Web Palette
• 216 “Web safe” colors
• Cross-section of Windows and
Macintosh color palettes
• Colors look generally the same for all
users
• AKA – “Netscape Colors” or “Web
Safe Palette”
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Gamma
• Gamma can be thought of as the
“brightness” of a monitor
• Windows & Unix displays tend to
darker than Macintosh displays
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Gamma
• Result? Images created on a Windows
machine may look “washed-out” on a
Mac; Images created on a Mac may
look too dark on a Windows machine
• Lesson? Test your images across
platforms or, at the very least, check
for gamma using a gamma correction
tool
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Displaying Color as Images
• Analog images are continuous
representations of color
• This is somewhat of a problem for
computers, which like discrete
measurements
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Displaying Color as Images
• The analog signal representing a
continuous image is sampled to
produce discrete values which can
be stored by a computer
• The frequency of digital samples
greatly affects the quality of the
digital image
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
How Sampling Works
The original analog
representation
Measurements are
made at equal
intervals
Discrete samples
are taken from the
measurements
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Pixel
• Sample location and sample values
combine to make the picture element
or pixel
• 3 color samples per pixel:
– 1 RED sample
– 1 GREEN sample
– 1 BLUE sample
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Pixel
• Information about pixels is stored in a
rectangular pattern and displayed to
the screen in rows called rasters
(from Spalter).
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Pixel (continued)
• Monitor pixels are actually circular
light representations of red, green
and blue phosphors
• Pixel density is measured using Dots
Per Inch (DPI)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The Pixel (continued)
• Pixel size is measured using Dot
Pitch
• DPI and Dot Pitch have an inverse
relationship ( DPI = Dot Pitch)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Bit-Depth
• Number of bits to represent pixel color
Expression
21
24
26
Name
2-bit
4-bit
6-bit
Colors
2
16
64
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Bit-Depth
• Number of bits to represent pixel color
Expression
Name
28
8-bit
216
16-bit
224
24-bit (True
Color)
Colors
256
65, 536
About
16-million
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Images on the Internet
• There are actually two main
categories of images that you might
encounter on the Internet
– Raster Graphics
– Vector Graphics
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Raster Graphics
• Color
information is
stored based on
location and
RGB value
• Costs lots of
disk space
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Vector Graphics
• Color information
is stored in a
series of
mathematical
calculations
• Don’t cost a lot of
disk space
• Fairly processorintensive
Image from
http://www.povray.org/
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Raster Image Compression
• An image in its raw format would be
too large to transfer in a web
download
• Because of this, images are generally
saved using any one of several
compression algorithms
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format
•
•
•
•
Graphic Interchange Format (GIF)
“Lossless” Compression
Originally developed by CompuServe
You can reduce file size by color
reduction and changing bit-depth
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format
• Uses LZW (Lempel-Zev-Welch)
compression
– Efficient at condensing color information for
pixel rows of identical color
– Takes advantage of large areas of “flat” color
– Good for line drawings, illustrations and
cartoon-like images
– Patent for LZW is owned and enforced by
Unisys
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Types
• GIF87a
– Can support up to 8-bit color (256 colors)
– Supports interlacing
• GIF89a
– Supports everything supported by GIF87a
– Also supports transparency
– Also supports animation
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Types
• Both types have universal browsersupport
• Both types are saved with the .GIF
extension
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format - Interlacing
• Normal GIFs are displayed in their
entirety when the image is completed
downloaded
• However, interlacing allows the image
to “fade in”
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format - Interlacing
• How does this happen?
– Rows of pixels appear only after 12.5%
of it has been downloaded
– 3 subsequent “passes” display 25%,
50% and, finally, 100% of the image
• Results in slightly larger file size
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format - Transparency
• Transparency allows designers to
display images that seem as if they
weren’t bound by rectangular borders
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format - Transparency
• How does it happen?
– The background of an image is set to a
color that the designer chooses to be
“invisible” (this color is later identified as
the invisible color)
– The resulting image’s background
disappears and is replaced by the web
page’s background
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
GIF Format - Transparency
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
JPEG Format
• Joint Photographic Experts Group
(JPEG)
• Supports 24-bit “True Color”
• Good for images with large
gradations in color
• Must be decompressed before they
are displayed in a browser
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
JPEG Format
• Based on spatial frequency
• Samples image information in an 8 x
8 pixel area
• “Lossy” Compression – image
information is lost during the
compression process; Lesson? Make
changes to copies of your original!
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
JPEG Format
• Different compression ratios can be
selected
• Represent a trade-off: File Size vs.
Image Quality
• Determined by “Q” setting (0-100)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
JPEG “Q” Setting
• Lower setting is a more aggressive
ratio, resulting in smaller file sizes,
but lower image quality
• Higher setting is less aggressive,
resulting in better quality images, but
larger files
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Progressive JPEGs
• Display in a series of passes (similar
to interlaced GIFs)
• Number of passes can determined
when the graphic is saved
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Progressive JPEGs
• Slightly smaller file size than regular
JPEGs
• Require more processing power than
regular JPEGs
• Not supported by all browsers
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
When to use JPEGs
• Images with
large gradations
in color (photos)
• DO NOT USE
FOR IMAGES
WITH “FLAT”
COLOR
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
PNG Format
• Portable Network Graphic (PNG)
• Open source solution to GIF patent
issue
• Like GIF, good at compressing images
with large areas of flat color
• Support of up to 24-bit color
• Lossless compression
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
PNG Format
• Two dimensional progressive display
(similar, but better than, GIF’s
interlacing)
• Supports “shades” of transparency;
allows for more than 1 color to be
transparent
• Built-in Gamma correction
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
PNG Format
• Includes text capabilities for notes
such as copyright info
• Browser support is spotty, at best
• Never use for images with large color
gradations (use JPEGs instead)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Managing Graphics
• Try to design new graphics using
Web-safe colors
• Keep graphic dimensions small
(smaller graphics result in smaller file
size)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Managing Graphics
• Don’t attempt to reduce color color
information on your own (results in
dithering) -- browsers are capable of
approximating nearest colors
• Use correct compression schemes
appropriate for your image!
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The <img> Element
• The src attribute specifies the
filename of an image file
• To include the src attribute within
the <img> element, you type img
src =“mygraphic.gif”>
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The <img> Element
• The <img> element also includes
other attributes
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The alt Attribute
• For an XHTML document to be well
formed, the <img> element must
include the src and alt attributes
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The alt Attribute
• The alt attribute is very important
for user agents that do not display
images and Web browsers that are
designed for users of Braille and
speech devices
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The alt Attribute
• Alternate text will display if an image
has not yet downloaded, if the user
has turned off the display of images in
their Web browsers, or if for some
reason the image is not available
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The alt Attribute
• The alt attribute also serves
another purpose:
– For any <img> elements that do not
include a title attribute, the value
assigned to the alt attribute appears as
a ToolTip in Internet Explorer and other
browsers when you hold your mouse
over the image
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Height and Width
• When you create an <img>
element that includes only the
src and alt attributes, a Web
browser needs to examine the
image and determine the number
of pixels to reserve for it
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Height and Width
• However, if you use the height
and width attributes to specify
the size of an image, the Web
browser will use their values to
reserve enough space on the
page for each image
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Height and Width
• It is very important to always
assign height and width
attribute values that are the exact
dimensions of the original image
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Height and Width
• Do not use the height and
width attributes to resize an
image on your Web page
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Height and Width
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Height and Width
• Another reason not to use the height and
width attributes to modify the size of an
image is that although you may reduce
how the image appears in a browser, the
browser still needs to download the
original image in its original size, which
may result in the page rendering more
slowly than necessary
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Using Images from Other
Locations
• You can place images in subfolders
that are relative to the location of the
current Web page folder
• You can link to images at other
locations on the Web by assigning an
absolute URL to the src attribute of
the <img> element.
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Using Images from Other
Locations
• You can see one example of linking to
an image on the Web at the W3C
Web page for validating XHTML
documents
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Resources
• Some slides were adapted from the
following text & companion lectures:
XHTML, Comprehensive
First Edition
Dan Gosselin
Published by Course Technology (2004)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science