1-up PDF - Classes by Thomas Powell

Chapter 5
Images
Presented by Thomas Powell
Slides adopted from
HTML & XHTML: The Complete Reference, 4th Edition
©2003 Thomas A. Powell
Image Introduction
• Images are good for
–
–
–
–
illustrating ideas
showing strictly visual information
providing navigation
And yes, decoration
• You need to think about the value of the image because
it does come with a price.
– Does the look matter? Yes
– Does functionality matter? Yes
– Over time decorative graphics will not be seen. This is the same
with overly animated pages. The idea at play here is sensory
adaptation.
Image Intro. Contd.
•
Images are made up of pixels (picture elements)
– small dot which can be set to a color
– Resolution is number of pixels across and down
• Consider typical screen resolutions: 640x480, 800x600, 1024x768, 1200x1600
– Bit depth = number of bits to represent each color
•
•
•
•
•
4 bit per pixel = 16 colors
8 bits = 256 colors
16 bits = thousands of colors
24 or 32 bit = millions of colors
Two general image storage formats
– Vector format -- describe image as set of curves
• Illustrations, geometric style displays
– Bitmap – a bunch of dots with colors
• Photos and complex imagery
•
Image display formats are always bitmap!
– Vectors are rendered into bitmaps
– Bitmaps are decompressed (typically) into other bitmap
Web Graphic Formats
• The Web supports numerous image file types
–
–
–
–
No actual limit to types of images delivered
Problem is browser support
Limited to GIF, JPEG, and somewhat PNG
BMP also commonly supported but not efficient for delivery
File Type
File Extension
GIF (Graphics Interchange Format)
.gif
JPEG (Joint Photographic Experts Group)
.jpg or .jpeg
XBM (X Bitmaps)
.xbm
XPM (X Pixelmaps)
.xpm
PNG (Portable Network Graphics)
.png
GIF
• GIF (graphics interchange format) .GIF
•
•
•
•
256 colors only
lossless compression
low degree of compression
run length encoding compresses continuous horizontal
regions well
• good for illustrations and line art
• can make interlaced and transparent
– Pronunciation seems a big deal
– Unisys patent rumor and PNG
Some Examples of GIF Characteristics
GIF compression
Transparency
Dithering
Interlacing
JPEG
• JPEG (Joint Photographic Experts Group) .jpeg
or .jpg
•
•
•
•
•
•
•
•
24bit color possible
Lossy compression
Can adjust the compression level
Not good with continuous color regions or text (introduces
residue)
Good for photographs
Can make progressive
Can’t make transparent
New version called JPEG 2000 promises wavelet based
compression
Format Comparison
Format Comparison Contd.
Format
GIF
JPEG
Compression Scheme
Lossless (preserves file
size for minimal
compression of
continuous horizontal
regions of color)
Lossy (trade image quality
for file size)
Color Depth
Supported
Progressive or
Interlaced
Rendering
Transparency
Animation
8-bit (256 colors)
Interlaced
Yes (1 degree)
Yes
24-bit (millions
of colors
Progressive
No
No
Images and Download
– Image download issues
• 1MB @ 56Kbps = 2.5 mins
• 1MB@T1 (1.544Mbps) = 5 seconds
– Image size is determined by
• physical size in pixels
• number of bits to represent the colors in a pixel
– One approach to reduction of image size is reduction of color
another is higher degrees of compression (quality vs. file size)
– When it comes to high speed Web pages, compression of
images is not the only thing to consider.
• Remember, small images doesn’t necessairly translate into a fast
Web page.
• Server load, number of connections, HTTP compression, HTML
optimization, etc.
Obtaining Images
• Where people get images
• Make them
– Photoshop, Illustrator
• Capture them
– Scanner, digital camera, etc.
• Buy them
– CD-ROM clip-art libraries (www.eyewire.com)
• Steal them
– This is VERY illegal!
• Note: Fair use law is unclear and many people
are abusing it
Image Basics
• <img> element is used to insert an image into a page
– <img src=“http://www.xyz.com/images/logo.gif” />
Absolute link
– <img src=“logo.gif” /> Relative links are probably better
• The alt attribute used to set alternative text rendering for
the image
– <img src=“logo.gif” alt=“Big Company, Inc.” />
– Be careful with meaningful alt values
• red ball? Picture of building, etc.
• alt attributes not just for text browsers but may be for people who
turn images off or show as tooltips
Alignment of Images
• Image alignment
is with align
attribute, table,
or style sheet
– <img
align=“TOP”
src=“logo.gif” />
– Initial values are
top, middle, and
bottom
Alignment of Images
• Netscape initially added text flow capability with
align=“left” and align=“right”
– There are few other possibilities align values like
baseline, texttop, absmiddle, absbottom, etc.
– These attributes are very proprietary and CSS should
be used instead.
HSPACE and VSAPCE
• With text flowing around
images you need to set some
buffer horizontally and
vertically using hspace and
vspace respectively.
<img src=“logo.gif”
align=“left” hspace=“10”
vspace=“20” />
Controlling Text Flow
• With text flow you also need to consider the returns so <br />
has the attribute clear. The clear attribute allows you to clear
columns flowing around images
• <br clear=“left” />
– Clear until left column can be reached
• <br clear=“right” />
– Clear until right column can be reached
• <br clear=“all” />
– Clear until both left and right columns can be reached
– Some developers use tables needlessly when
this minor extension could be employed
– Under CSS you do not need these extensions
Image Height and Width
• To allow the browser to layout a page right away it is important to
indicate the size of images using the height and width attributes set
in pixels or percentage.
<img src=“logo.gif” height=“100” width=“300” />
• You can resize things with height and width but it will distort when
getting bigger and getting smaller may provide little obvious benefit.
<img src=“logo.gif” height=“1” width=“1” />
• height and width can be used with percentage values to create
interesting effects, try
<img src=“logo.gif” height=“100%” width=“100%” / >
Lowsrc
• Another useful performance improvement
comes in the form of the lowsrc attribute. Set
this attribute to an image to load before the
current image (usually it is smaller or black and
white)
– <img src=“colorlogo.gif” lowsrc=“bwlogo.gif” />
– Simple animation is possible with the lowsrc attribute
but be careful since speed of loading is unpredictable,
use animated GIFs instead
Image Tricks
• Be aware that there are tricks that can be
employed with images particularly with “invisible”
images with which you can push things around
in a variety of ways
• <img src=“clearpixel.gif” height=“100” width=“100”>
• <img src=“clearpixel.gif” hspace=“100”>
– Note: Netscape 4 later introduces a non-standard tag
<spacer> to provide the same function as the image
trick. Do not use this tag
Images and Links
– Images can be used with links
• <a href=“http://www.yahoo.com”><img src=“button.gif”></a>
• Remove the border put around the image because of linking
– <img src=“button.gif” alt=“button” border=“0” />
– When removing the color around an image you should strive to make
the image look like it is pressable with a bevel or similar feature. Don’t
make the user hunt for what is active in the document.
• Careful with spaces between the close <img> and the close tag
</a> this may introduce a “tick” though some browsers fix this for
you
– In general an entire image is “clickable” but with the idea of
imagemaps it is possible to make certain areas of an image go
to one location or another. This hotspot style image is useful to
make complex user interfaces.
– Two basic types of image maps: client-side and server-side
Image Maps
– Server-side images are older and have drawbacks in that they
require the server to decode the selection
• Set using the ismap attribute
• <a href=“http://www.bozo.com/cgi-bin/imagemap/main.map”><img
src=“bozo.gif” ismap></a>
– Client side image maps include the information locally to decode
the click so they are faster
• Set using the usemap attribute in the <img> element to reference a
client side map
<img src=“logo.gif” usemap=“#bozomap” />
<map name=“bozomap” id=“bozomap”>
<area shape=“rect” coords=“1,0, 10,10” href=“index.htm” />
<area shape=“rect” coords=“10,10, 20,20” href=“index2.htm”
/>
</map>