Transcript Web Color & Images - Department of Computer and Information

Web Color & Images
CSCI N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Goals
By the end of this unit, you should
understand …
• … how computers interpret color.
• … how to specify web colors using
hexadecimal.
• … the differences among the three
major image formats: GIF, PNG & JPG.
• … how to build an image map.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Electromagnetic Spectrum
• The EM Spectrum is a measure of photons,
traveling at the speed of light, carrying some
type of energy.
• We measure that energy in terms of wavelength
and frequency.
Image source: http://imagers.gsfc.nasa.gov/ems/waves3.html
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Visible Light
• Occurs in a small part of the EM
spectrum, near the middle
• Wavelengths are 400nm to 700nm long
Image is from http://imagers.gsfc.nasa.gov/ems/visible.html
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Additive Color Model
• Computers use the
Additive Color Model,
which is based on visible
light.
• A color appears brighter
as we add light energy.
• We can combine
different visible light
wavelengths of red (R),
green (G) & blue (B) to
create new colors.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Subtractive Color Model
• The print media use the
Subtractive Color Model.
• When we add more color, a
color appears darker.
• We can think of ink or paint
as a filter that filters out
all colors except the color
we perceive, which reflects
back to us.
• In this model the primary
colors are cyan (C), magenta
(M), yellow (Y) and black
(K).
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Why RGB?
• The Additive Color Model uses red,
green and blue as primary colors.
• The reason for this is that human
eyes have receptors that react to
different levels of red, green and
blue light energy.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Some Color Terms
• Hue refers to a specific location on the
visible spectrum.
• Saturation specifies the amount (intensity) of
a color.
• Value (Brightness) specifies the darkness or
lightness of a color.
• We add white to a color to produce a TINT.
• We add black to a color to produce a SHADE.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Color as a Numeric Constant
• We depict color on the Web using a numeric
constant in triplet format, representing RGB
values.
• Many graphic programs represent RGB values
as a percentage (0%-100%) or as an integer
(0-255).
• On the web, we use hexadecimal numbers to
represent color triplets in the format:
#RRGGBB.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Common Hex Values
RGB
0
51
102 153 204 255
PERC
0% 20% 40% 60% 80% 100%
HEX
00
33
66
99
CC
FF
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Hexadecimal Numbering System
• The Hexadecimal Numbering System is
a Base-16 system; it has 16 digits,
ranging from 0 – F.
DEC
0
HEX 0
DEC 8
HEX 8
1
1
9
9
2
2
10
A
3
3
11
B
4
4
12
C
5
5
13
D
6
6
14
E
7
7
15
F
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Converting to Hexadecimal
STEP #1: Draw a
table with three
columns. Label the
last two columns
quotient and
remainder,
respectively.
Q
R
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Converting to Hexadecimal
STEP #2: In the leftmost column, divide
the number you are
going to convert by
16. DO NOT DIVIDE
PAST THE
DECIMAL POINT.
Put the quotient and
remainder in their
respective columns.
248/16
Q
R
15
8
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Converting to Hexadecimal
STEP #3: Take the
quotient of the
previous expression
and divide it by
sixteen. Repeat until
have 0 for a
quotient.
Q
R
248/16
15
8
15/16
0
15
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Converting to Hexadecimal
STEP #4: In the
Remainder column,
replace each digit
with the appropriate
hexadecimal digit.
Q
R
248/16
15
8
15/16
0
15
XF
DEC
0
1
2
3
4
5
6
7
HEX
0
1
2
3
4
5
6
7
DEC
8
9
10
11
12
13
14
15
HEX
8
9
A
B
C
D
E
F
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Converting to Hexadecimal
STEP #5: Transpose
the digits in the
remainder column
from the bottom to
the top. The result
is your hexadecimal
equivalent.
Q
R
248/16
15
8
15/16
0
15
X F
24810 = F816
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let’s Try One!
• Convert the following color to its
Hexadecimal Equivalent. Use the
format #RRGGBB in your answer:
RED: 151
GREEN: 225
BLUE: 160
HEX EQUIVALENT: #97E1A0
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Web Safe Colors
• The Web Safe Color Palette is a group of 216
colors that will display correctly on all web
browsers and almost uniformly across
operating systems.
• We can compose Web Safe Colors by
developing only colors that use the following
hexadecimal pairs: 00, 33, 66, 99, CC, FF.
• For hex colors that use pairs, we can use a
convenient shortcut. For instance, the
shortcut for #FFCC00 is #FCO.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
How Computers
Represent Images
• In the “non-digital” world, images
are continuous representations of
color.
• This is a problem for computers,
which like discrete measurements.
• The answer? Sampling …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Sampling
• Computers represent images (an analog
signal) using sampling.
• Sampling produces discrete values which
a computer can store.
• The frequency of digital samples can
greatly affect the quality of the digital
image. However, there is a tradeoff –
the more samples, the bigger the file
size and slower the download.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
How Sampling Works
The original
analog
representation
The computer
takes
measurements at
equal intervals.
The computer
then takes
discrete samples
from the
measurements.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Bit Depth
• Bit Depth refers to the number of
colors in a particular color palette.
• In a raw image, the deeper the bit
depth, the larger the file size.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Common Bit Depths
Bit Depth
Color Depth
Bit Depth
Color Depth
1-bit (21)
2
6-bit (26)
64
2-bit (22)
4
7-bit (27)
128
3-bit (23)
8
8-bit (28)
256
4-bit (24)
16
16-bit (216)
65,536
5-bit (25)
32
24-bit (224)
16,777,216
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Pixel
• The picture element, or pixel, represents
the color values at a particular location.
• For each location within a matrix, each
pixel records the RED, GREEN and BLUE
values.
• The computer stores information about
pixels is stored in a rectangular pattern
and displays to the screen in rows; we call
those rows rasters.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
More on Pixels
• Monitor pixels are actually circular light
representations of red, green and blue
phosphors.
• We measure pixel density using Dots
Per Inch (DPI); we measure pixel size
using Dot Pitch.
• DPI and Dot Pitch have an inverse
relationship:  DPI =  Dot Pitch.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Image Compression
• An image in its raw format would be too
large to transfer in a web download.
Because of this, we save images using
any one of several compression
algorithms.
• Some common compression types
include:
– Graphic Interchange Format (GIF)
– Joint Photographic Exerts Group (JPEG)
– Portable Network Graphic (PNG)
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The GIF Format
• The GIF format is a “lossless” compression
scheme originally developed by CompuServe.
• GIFs use LZW (Lempel-Zev-Welch) compression:
– LZW is efficient at condensing color information for
pixel rows of identical color and takes advantage of
large areas of “flat” color.
– LZW is good for line drawings, illustrations and
cartoon-like images, but poor for photographs.
– Unisys owns & enforces the patent for LZW
compression.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
GIF Features
• GIFs support up to 8-bit color (256
colors)
• GIFs support interlacing, transparency
and animation.
• Transparency allows designers to display
images that seem as if they weren’t
bound by rectangular borders.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
GIF Transparency
• How does it happen?
– We set the background of an image to a
color that we choose to be “invisible”, we
can identify in our image editing
program.
– The resulting image’s background
disappears and a web page’s background
replaces it.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
GIF Format - Transparency
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The JPEG Format
• The JPEG format supports 24-bit color and is
good for images with large gradations in color
(like photos).
• The JPEG compression uses spatial frequency
and samples image information in an 8 x 8
pixel area. Additionally, JPEGs use a “Lossy”
compression scheme.
• A browser must decompress a JPEG before it
can display it.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
JPEG Compression Ratios
• We can select different JPEG
compression ratios that represent a
trade-off: File Size vs. Image Quality.
• Graphics editors use a “Q” setting (0100) to determine ratios. A more
aggressive ratio will result in a smaller
file size, but less image quality.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
When to use JPEGs
• Use JPEGS for
images with large
gradations in
color (photos).
• Do NOT use
JPEGS for images
with large areas
of flat color.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The PNG Format
• To answer the GIF patent issue, opensource developers devised the PNG
format.
• The PNG format can support up to 24bit color, but with heavy file size.
• For web development, the PNG, like the
GIF, is well-suited for images with large
areas of flat color.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
PNG Features
• The PNG uses a lossless compression
scheme.
• The PNG supports “shades” of transparency
and allows the browser to interpret more
than 1 color as transparent.
• The PNG has built-in Gamma correction and
includes text capabilities for notes such as
copyright information.
• When should you use a PNG? Any time you
might use a GIF, you can replace it with a
PNG.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The <img /> Element
• We add images to a web page using
the <img /> element.
• It is an inline element and you
should always nest it inside a <p>
element or another block-level
element.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
<img /> Attributes
• Important <img /> attributes include:
– src – The src attribute specifies the path and
file name for the image you want to appear.
– id – The id attribute gives an image an internal
name, by which we can reference it using CSS or
JavaScript.
– height/width – The height & width attributes
specify the height & width of the image in
pixels.
– usemap – The usemap attribute specifies the
location of an image map script.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Using an Image as a Link
• We can create an image to serve as a
link by nesting the <img /> element
inside an <a> element, like this:
<a href=“http://www.iupui.edu”>
<img src = “images/logo.gif” />
</a>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let’s Try One!
• Download and
decompress the file
called
n241WebColorAndImages_
examples.zip from
Oncourse.
• Edit the file called
imageAsLink.html and
create a link out of
the image smiley2.png.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Preventing Ugly Borders
• Did you notice the ugly blue link
border that you saw in the previous
example?
• We can get rid of it by using a CSS
rule to specify a new value -- none
-- for the border property.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let’s Try One!
• Edit the file called
imageAsLink.html
and add the
following rule to the
<style> element:
img
{
border:none;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Image Maps
• Using an image map, we can include a
single image in our page with multiple
“hotspots,” each linking to a different
web page.
• We’ll use a client-side image map, in
which the instructions for the images
reside in the same web page where we
include the <img /> element.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The <map> Element
• The <map> element encloses the instructions
for a client-side image map.
• You can write the <map> element anywhere in
a web page, but many developers choose to
write them at the bottom of a script.
• The <map> element includes two important
attributes: the id attribute (for XHTML) and
the name attribute (for HTML). Both take
the same value – the internal name by which
you wish to refer to your map script.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The <area /> Element
• To define the coordinates for
different “hotspots,” we nest
multiple <area /> elements inside
the <map> element.
• The <area /> element has four
important attributes …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Important <area /> Attributes
• The href attribute specifies the link
for a particular hotspot.
• The shape attribute specifies the
pattern for a particular hotspot.
Possible values include rect, circle &
poly.
• The alt attribute describes the link.
• The coords attribute specifies the
coordinates of the hotspot.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
An Image’s Origin
• We determine coordinates of each
hotspot based on its shape. In doing so,
we need to remember that the origin of
our image (as the web browser sees it)
is the upper left corner of the image.
• The origin’s X and Y coordinates equal
zero. We measure everything relative
from the origin. As we travel to the
right, our X coordinate increases; as we
travel down, our Y coordinate increases.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Circle Shape
• To find a circle’s coordinates, first find the X and Y
of the center of the circle.
• Then find the length of the circle’s radius:
<area shape = “circ”
coords = “75,85,69” />
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Rectangle Shape
• To find a rectangle’s coordinates, find the Xs and Ys
of upper-left and lower-right corners, respectively:
<area shape = “rect”
coords = “60,66,115,226” />
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Polygon Shape
• To find the X & Y coordinates of each of the corners;
the first and last pair of coordinates are the same:
<area shape = “poly”
coords = “206,145, ... ,206,145” />
Pair
X Coordinate
Y Coordinate
1
206
145
2
118
203
3
118
167
4
54
167
5
54
122
6
118
122
7
118
85
8
206
145
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let’s Try One!
• Open the file
shapesMap.png in
an image editor and
calculate the
coordinates of the
shapes.
• Edit the file
imageMap.html to
add your map
definition.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Linking an Image to <map>
• To link an image to a map definition,
edit the usemap attribute of the
<img /> element. The value should
point to the name of your map
definition, like this:
<img src = “images/myMap.png”
usemap = “#mapDef” />
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let’s Try One!
• Edit the file
imageMap.html to
add a usemap
attribute to the
<img /> for
shapesMap.png.
• Point the value of
usemap to your map
definition.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science