Download Web Development - School of Computing

Images & Image Maps
16th February
Images & Image Maps




Web authors can add icons, logos and high impact
images to their pages
Images enhance web pages
Important issues to consider are image complexity and
file-size
General rules to be followed:




Use images to enhance page layout and content
Keep image complexity low
Use thumbnail versions of images to reduce download time
Use icons and logos to distinguish the web page
General Information

Computer screen is divided horizontally and
vertically into pixels

Example: a monitor with a resolution of 800x600
has 800 and 600 pixels in the horizontal and
vertical directions respectively
Types of Graphics

Graphic types commonly used on Web
pages:



GIF
JPG
PNG
4
GIF







Graphics Interchange Format
Best used for line art and logos
Maximum of 256 colors
One colour can be configured as transparent
Can be animated
Uses lossless compression
Can be interlaced
5
JPEG







Joint Photographic Experts Group
Best used for photographs
Up to 16.7 million colors
Use lossy compression
Cannot be animated
Cannot be made
transparent
Progressive JPEG – similar to interlaced display
6
PNG



Portable Network Graphic
Support millions of colors
Support multiple levels of transparency
(but browsers do not -so limit to one transparent color for Web display)




Support interlacing
Use lossless compression
Combines the best of GIF & JPEG
Browser support is growing
7
Images

Images take a long time to load so JPEG and GIF
formats allow progressive loading of images


Progressive JPEG
Interlaced GIF

Images are loaded with gradual resolution

Transparency allows the viewer to see the background
of a Web page through the part of the image that is
transparent
Image Scaling

Users can scale images up or down by using
an image program or XHTML tags

Why would it not be recommended to scale
images up?


Resolution will worsen
Staircase effect (jaggedness of the image
boundaries)
XHTML Image Element

Configures graphics on a Web page
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />

src Attribute


alt Attribute


Configures alternate text content (description)
height Attribute


File name of the graphic
Height of the graphic in pixels
width Attribute

Width of the graphic in pixels
10
XHTML <img /> Alignment
XHTML More <img /> Attributes

Adding Vertical Space


vspace Attribute
Adding Horizontal Space

hspace Attribute
A more modern approach is to use the CSS
padding property
Accessibility & Images

Required:

Configure the alt attribute




Alternate text content to convey the meaning/intent of the
image
NOT the file name of the image
Use alt=“” for purely decorative images
Optional:

Configure the longdesc attribute


Used when meaning cannot be conveyed in the alt text
Usually a URL to a Web page with text
Image Links

To create an image link use an anchor
element to contain an image element
<a href="index.html"><img src="home.gif"
height="19" width="85" alt="Home" /></a>
Home
14
Using Images


A web page that uses an image – School of Computing
Homepage (http://www.comp.dit.ie)
<a href="http://www.comp.dit.ie/cgames/"> <img
src="images/cgames.gif" alt="cgames"
name="cgames06" width="175" height="66"
border="0" id="cgames06"> </a>
Choosing Names for Image Files



Use all lowercase letters
Do not use punctuation symbols and spaces
Do not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)

Keep your file names short but descriptive



i1.gif is probably too short
myimagewithmydogonmybirthday.gif is too long
dogbday.gif may be just about right
Organizing
Your Site
• Place images in
their own folder
• Code the path to
the file in the src
atttribute
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”/>
17
Other Image Topics





Thumbnail Images
Image Maps
Sources for Graphics
Guidelines for Using Images
Accessibility
Thumbnail Image

A small image configured to link to a
larger version of that image.
19
Image Maps




An image map is defined as a single image
that links to multiple URLs or XHTML
documents
They allow us to link different parts of an
image to different web pages
Image maps are both client and server-side
based
Examples are roadmaps and layouts
Image Maps (example)
Triangle.html
Rectangle.html
Circle.html
mailto:....@....
Types of Image Maps


There are 2 types of image maps :
Server side



Requires client-server communication twice
Server side maps existed before the client maps
Client side


Client resolves the click locally and then requests
the web page
Web authors should use client-side image maps
in their web pages
Creating Image Maps

Create the image

Define the virtual shapes of the map

Configure the image map

Create the XHTML files (URLs)
Creating Image Maps

XHTML provides 3 virtual shapes





Rectangle
Polygon
Circle
Each of the virtual shapes can be defined by
a set of points
The image software can be used to find the
co-ordinates of the points used to define the
virtual shape
Image Maps

<map> element


Defines the map
<area> element


Defines a specific area on a map
Can be set to a rectangle, circle, or polygon



href Attribute
shape Attribute
coords Attribute
25
Sample
Image Map
<map name="boat" id="boat">
<area href="http://boat.com" shape="rect"
coords="24, 188, 339, 283" alt=“fishing boat" />
</map>
<img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" width="416"
height="350" />
Write the XHTML code for the image
map in the next slide

Rectangle, coords are 10,25,90,60
Polygon, coords are 100,60,210,60,150,10
Circle coords are 252,40,35

Use the 3 tags <img>, <map> and <area>


Write the XHTML code for this
Restaurant Image Map
Appetiser as
rectangle
Meals as
triangle
Pizza as
circle
Using Image Maps

The <img> tag is used to define an image

The <area> tag is used to define one virtual shape
at a time
<img src="foodMenu.jpg" usemap="#menuMap" />
<map name="menuMap“ id=“menuMap“>
<area href="http://www.burgerking.com" alt="Appetizers"
shape="rect" coords="10,25,90,60" />
<area href="http://www.legalseafood.com" alt="Meals"
shape="poly" coords="100,60,210,60,150,10" />
<area href="http://www.pizzahut.com" alt="Pizza" shape="circle"
coords="252,40,35" />
</map>
Sources for Graphics








Create them yourself using a graphics application:
 Adobe Photoshop
 Adobe Fireworks
 Google’s Picasa (http://picasa.google.com/)
Download graphics from a free site
Purchase/download professional-quality graphics
Purchase a graphics collection on a CD
Take digital photographs
Scan your photographs
Scan your drawings
Hire a graphic designer to create graphics
30
Guidelines
for
Using
Images






Consider image load time
Reuse images
Consider image file size with image quality
Screen Resolution
Specify dimensions
Gamma – brightness & contrast
31
Images and Accessibility

Don't rely on color alone.
 Some visitors may have colour perception deficiencies.
Use high contrast between background and text color.

Provide a text equivalent for non-text elements.
 Use the alt attribute on your image elements

If your site navigation uses image links, provide
simple text links at the bottom of the page.
32
Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP
Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility
and Protecting Against Worst-Case Scenarios with XHTML and CSS,
New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript