|
There are three main image formats that are recognized by all the popular browsers
(IE, Firefox, Safari, Opera and Chrome). These three image formats are PNG, GIF
and JPG/JPEG. See the section 9.3 on Image Properties for more information about the technical differences between these formats.
There are two primary means of displaying images on webpages.
One means is to use an image as the background of a page. The other is to use an image on a page
as an illustration, for interest or as a link. To display an image as the background of a page,
you need to use CSS. To display an image on a page, the <img /> tag is used.
Consideration must be exercised when using images on a webpage and a number of
different issues should be taken into account. First, one must bear in mind that a user might have set their
browser to not display images in order that the pages download faster. Or, it may be that the user has a visual handicap and is using a text reader to
interpret your page. In order to handle those cases, the alt attribute for the <img /> tag
should is used and is a required attribute for the <img /> tag. The alt will be displayed when the image is not displayed.
This is particularly important when an image also contains information or directions to the user.
For example, a graphic image depicting a button that is labeled "Click here for more information"
might be used. If the user cannot see the image, the direction on the button is non-existent.
Other issues to be considered when using images are the size of the image files and the number
of images used on a page. Large image files, or the use of a large number of files on one page,
can cause the page to load very slowly. A user may not wait for the page to load and go to
another site instead. Ways to reduce the size of image files is discussed further under image
properties. In addition, the use of too many separate images on a page can result in a page
that not only has a disorganized appearance but is also disorienting to the user.
When adding images to a web site, make sure that you are not violating copyright laws by
using an image that you yourself did not create. Many web sites contain images that
you are free to download. Other sites ask that you give them credit when you use one
of their images. You should always give credit to the author or creator of any items you use in your web page.
To add an image to a webpage, use the image tag <img />.
When using this tag, the image will not be repeated across the webpage as
background images are and text will not overlay the image. Images added
with the <img /> tags can add interest to a page, illustrate a point, display a chart,
or serve as active links to other pages.
The opening <img /> tag can take several attributes.
The most important of these is the source, <src>, attribute.
The value for this attribute is the filename and filepath of an image.
Other attributes are the required alt for alternate text to be displayed if
the image is not displayed and the title attribute which displays a little popup bubble with the content of the attribute.
- Open your first XHTML file in Notepad. Locate your cursor immediately after the ruler line tags (
<hr /> tags).
-
Add the following
<img /> tag, where filename is the name of an image file (.png, .gif or .jpg file) and the alt attribute has a string describing the image:
<img src="filename" alt="description of the image" />
- Save your file and view it in a browser.
Images can serve as links to pages just as text can be a link.
To make an image "clickable", nest the <img /> tag inside anchor tags
with a reference to another page:
-
Copy the right arrow and left arrow images
from the course network drive to your directory or locate arrow images from
one of the free sites on the WWW.
Add the following line to the bottom of your first XHTML page:
<a href="second.htm"><img src="arrow_right3.gif" /></a>
- Save your file and view it. Click on the arrow. Your second XHTML page should appear.
-
Open your second XHTML file in Notepad. Add the following line to the bottom of the file:
<a href="first.htm"><img src="arrow_left3.gif" /></a>
The format, size and properties of the images on a webpage
can influence the effectiveness of a webpage. Therefore, in order to
design effective webpages, it is necessary to understand the format,
size and properties of images.
The leading browsers, IE, Firefox, Safari, Opera and Chrome, use
three main image file formats: PNG, GIF and JPG/JPEG. Depending upon other properties
of the images you are using, you may want to choose one or the other format for the images
on your webpages.
The size of the image files you use on your webpage influences how quickly the
page loads into a browser. If a page is loading too slowly, the user will often
not wait and simply go to another page and a company may loose a customer,
or a non-profit organization may loose a donor, etc.
Interlacing is a property of some image formats. Interlaced images
are displayed in browsers in stages in which each stage gradually sharpens the
image. Interlacing can be used with large image files so that the user gradually
gets the final image. Interlacing lets the user know that an image is being loaded.
The thought behind interlacing is that gradual image development is better than
waiting in front of a blank screen while an entire image downloads. The hope is
that by giving the user the image in stages, the user will wait for the final image.
Aliasing refers to the jagged look that you may find, for example,
when you draw a line that is not perfectly horizontal or vertical on a computer
screen. Using anti-aliasing in an image refers to a process that smooths the
jagged edges by blending the color of the edge pixels with the color of the background.
Resolution is a measure of image clarity and is measured in pixels per unit.
Web-safe colors are cross-platform colors that should display
consistently in the two major browsers across different platforms such as
IBM, Macintosh and UNIX systems. In the RGB color scheme, which uses
two characters to represent the amount of red, green and blue, web-safe colors
can be recognized because they contain only the digits 00, 33, 66, 99, CC and
FF for each red, green and blue value.
A raster image is composed of pixels organized on a grid. Each pixel in a
raster image is stored as a combination of colors. If the dimensions of a
raster image are increased, pixels are added by interpolation, which lowers
the image quality. Therefore, raster images are resolution-dependent. Raster
images are good for photographs which may have continuously varying colors.
A vector graphic is stored in a mathematical construct called a vector.
Vector information is stored as a set of instructions, instead of groups of pixels.
This makes vector graphics resolution independent. Vector graphics are suitable
for images which consist of solid color areas of shapes or text, but not for
photographic quality images.
8.3.1 GIF format
GIF files use
LZW compression which is a proprietary compression method.
LZW is a lossless compression
method. Lossless compression means that no information in the
original file is lost due to the compression method. Lossy
compression used in other compression methods, means that
some information in the file may be lost due to compression
and uncompression processes.
GIF files use one byte to store a color.
One byte can represent 28 or 256 different colors.
However, you should keep in mind that not all 256
colors in the RGB color scheme are browser safe colors.
That is, not all 256 colors are guaranteed to be interpreted
and displayed correctly in a browser.
When an image file is converted to GIF format, if a color is
encountered that cannot be represented within the RGB format,
a process called dithering is employed. In dithering, the colors
of adjacent pixels are adjusted to blend into an approximation
of the original color.
GIF files can also use a transparent background color.
This property of GIF files makes them suitable for images
whose background should disappear against the background
of the webpage. The GIF format is suitable for images that
contain line drawings or fancy text, but is not always suitable
for photographs which often require a larger color palette
than can be represented in one byte.
8.3.2 JPEG format
The JPG/JPEG format uses a lossy compression method which means that some
information in the original image may be lost during the compression/uncompression
processes. When saving a JPG/JPEG file in image processing application, the user can
usually set the level of compression to be used. The higher the level of
compression that is chosen, the more information may be lost. However,
the more compression used, the smaller the file is and smaller files will load
into a browser faster. This means there is a trade-off between image size and
image clarity.
JPG/JPEG files use 24 bits to store color information. This means that 224 or
16,777,216 colors (sometime referred to as "Millions of Colors" in image processing software)
can be represented in JPG/JPEG files. Transparent background colors are not supported in
JPG/JPEG images. JPG/JPEG files do not support animation.
8.3.3 PNG format
PNG.
PNG-8 files use 8 bits (1 byte) to store color information and PNG-24
files use 24 bits to store color information. PNG-32 offers the best quality but at the largest size. PNG files use a non-proprietary
compression method that preserves the sharpness of the original image and
PNG supports transparency, interlacing and animation. However, PNG files
tend to be very large.
Image maps create clickable areas within an image.
When the user passes the mouse cursor over clickable
area of an image which has an image map, the cursor
changes shape, indicating that this area represents a link.
Image maps are tedious to create by hand and are usually
done using a software application. However, we do a
simple image map by hand so that you understand the
components of an image map.
-
First, copy the textboxes.gif file either from the network drive or by right clicking on the filename.
Place it into your XHTML directory. This file contains a very crude image file.
Look at the image by opening it in a browser.
It contains two "commands", telling the user to click on each.
-
Since I created this image file, I know that the dimensions of the image
are 750 X 336 pixels. We will create an image map that creates two
clickable areas on this image.
- But first, create a new XHTML page. The title of the page should be "Image Map Example".
- Within the
<body> tags, add an image (<img />) tag whose src attribute is the "textboxes.gif" image.
- Save this file as "mapexample.htm".
-
Above the
<img /> tag, we will add the XHTML codes for the image map.
The <map>…</map> tags are used for image maps.
Each image map needs a name. The name attribute is
used within the beginning <map> tag to name the image map.
-
Between the beginning ending
<map> tags, areas are
defined for the desired clickable areas of the image using the
<area> tag. Each area has a number of attributes. The
shape attribute defines the shape of the clickable area. The
values for the shape attribute are rect, circle or poly,
where rect stands for rectangle.
-
The
coords attribute defines the coordinates of the shape in pixels.
The coordinates for a rectangle are the top, left and bottom right corners
of the rectangle. Each corner is represented by a point using the x,y
Cartesian coordinate system. On a computer screen, the origin, (0,0)
is at the top, left of the screen. For an image, the origin is the top, left
corner of the image. X values increase to the right and Y values increase
to the bottom. For a rectangular area that starts at the origin and is 50
pixels wide by 25 pixels high, the coords attribute is "0,0,50,25"
where the first "0" is the X value of the top left corner, the second "0"
is the Y value of the top left corner, the "50" is the X value of the bottom
right corner and the "25" is the Y value of the bottom right corner.
The coordinates for a circle are the (x,y) values for the center
of the circle and the radius of the circle. For a circular area on an
image map that is centered at a point 100 pixels from the left edge
of the image and 90 pixels down from the top edge of an image
and has a radius of 45, the coordinates are "100,90,45".
The coordinates of a polygon are the set of the (x,y)
coordinates for each point on the polygon. The first point is
repeated at the end of the set of points to close the polygon shape.
For a triangular area with a top point at (50, 10), a bottom right point at
(70, 60) and a bottom left point at (30, 60), the coordinates are "50,10,70,60,30,60,50,10".
More complicated polygons can be created by defining more points.
The href attribute is used within the <area> tag to define the link for the clickable area.
The values for this attribute are the same as that for the <a>…</a> tags;
a local reference or an XHTML page on another server.
-
For the very simple image that we are using, we will define
two rectangular areas that link to our first and second XHTML
pages respectively. We will leave a narrow, non-clickable area
in between the two rectangular areas. Add the following code
for an image map before the
<img /> tag in your new XHTML file.
<map name="firstmap">
<area shape="rect"
coords="0,0,365,318" href="first.htm"
alt="go to first page">
<area shape="rect"
coords="385,0,750,318" href="second.htm"
alt="go to second page">
</map>
-
The last step needed to complete the image map is to add an attribute to the
<img /> tag to let the browser know that you are using an image map with this image. Add the following usemap attribute to the <img /> tag:
usemap = "#firstmap"
-
Save the file and view it in a browser.
Slowly move your mouse cursor around the image.
Notice how the cursor changes when it is over one
of the clickable areas. There should be a narrow
column in between the clickable areas which is not clickable.
The code should appear as follows:
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<map name="firstmap">
<area shape="rect"
coords="0,0,365,318"
href="first3.htm"
alt="go to first page">
<area shape="rect"
coords="385,0,750,318"
href="second.htm"
alt="go to second page">
</map>
<img arc="images/textboxes.gif" alt="links to other pages" usemap="#firstmap" />
</body>
</html>
- A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
- HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html
- HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/
- HTML and XHTML Information www.w3c.org/markup
- HTML reference including browser suppport http://www.w3schools.com/html/html_reference.asp
- W3Schools HTML Tutorials http://www.w3schools.com/default.asp
- Willcam's Comprehensive HTML Cross Reference http://www.willcam.com/cmat/html/crossref.html
- Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
- Lynch, P. J. & Horton, S. (2001) Web Style Guide. Yale University Press: New Haven. ISBN 0-300-08898-1.
- Yale Web Style Guide at http://info.med.yale.edu/caim/manual/contents.html.
- Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
- Fixing Your Web Site at http://www.fixingyourwebsite.com/index.html.
|