Download Design Concepts: Images

Design Concepts: Creating Images
Goals
• Understand how what dithering and
gamma are
• Understand how image compression works
• Understand how to add images to your
web pages
Dithering
• Typically, modern monitors can display 24bit, “True Color”
• However, there are other monitors which
don’t have “True Color” capabilities
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”
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”
Gamma
• Gamma can be thought of as the
“brightness” of a monitor
• Windows & Unix displays tend to darker
than Macintosh displays
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
Displaying Color as Images
• Analog images are continuous
representations of color
• This is somewhat of a problem for
computers, which like discrete
measurements
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
How Sampling Works
The original analog
representation
Measurements are
made at equal
intervals
Discrete samples
are taken from the
measurements
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
The Pixel
• Information about pixels is stored in a
rectangular pattern and displayed to the
screen in rows called rasters (from
Spalter).
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)
The Pixel (continued)
• Pixel size is measured using Dot Pitch
• DPI and Dot Pitch have an inverse
relationship ( DPI = Dot Pitch)
Bit-Depth
• Number of bits to represent pixel color
Expression
Name
Colors
21
2-bit
2
24
4-bit
16
26
6-bit
64
Bit-Depth
• Number of bits to represent pixel color
Expression
Name
Colors
28
8-bit
256
216
16-bit
65, 536
224
24-bit (True
Color)
About
16-million
Images on the Internet
• There are actually two main categories of
images that you might encounter on the
Internet
– Raster Graphics
– Vector Graphics
Raster Graphics
• Color information
is stored based on
location and RGB
value
• Costs lots of disk
space
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/
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
GIF Format
•
•
•
•
Graphic Interchange Format (GIF)
“Lossless” Compression
Originally developed by CompuServe
You can reduce file size by color reduction
and changing bit-depth
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
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
GIF Types
• Both types have universal browser-support
• Both types are saved with the .GIF
extension
GIF Format - Interlacing
• Normal GIFs are displayed in their entirety
when the image is completed downloaded
• However, interlacing allows the image to
“fade in”
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
GIF Format - Transparency
• Transparency allows designers to display
images that seem as if they weren’t bound
by rectangular borders
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
GIF Format - Transparency
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
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!
JPEG Format
• Different compression ratios can be
selected
• Represent a trade-off: File Size vs. Image
Quality
• Determined by “Q” setting (0-100)
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
Progressive JPEGs
• Display in a series of passes (similar to
interlaced GIFs)
• Number of passes can determined when
the graphic is saved
Progressive JPEGs
• Slightly smaller file size than regular
JPEGs
• Require more processing power than
regular JPEGs
• Not supported by all browsers
When to use JPEGs
• Images with large
gradations in color
(photos)
• DO NOT USE FOR
IMAGES WITH
“FLAT” COLOR
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
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
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)
Managing Graphics
• Try to design new graphics using Web-safe
colors
• Keep graphic dimensions small (smaller
graphics result in smaller file size)
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!
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”>
The <img> Element
• The <img> element also includes
other attributes
The alt Attribute
• For an XHTML document to be well
formed, the <img> element must include
the src and alt attributes
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
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
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
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
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
Height and Width
• It is very important to always assign
height and width attribute values
that are the exact dimensions of the
original image
Height and Width
• Do not use the height and width
attributes to resize an image on your
Web page
Height and Width
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
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.
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
Resources
• Some slides were adapted from the
following text & companion lectures:
XHTML, Comprehensive
First Edition
Dan Gosselin
Published by Course Technology (2004)
Questions?