Introduction to HTML

Lesson 3: Images

Lesson 3
Images

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

32

Introduction to HTML

Lesson 3: Images

Lesson Objectives:
Images & Formats
Points to Consider

Inserting Images
Creating Images
Transparent Images
GIF Animations
Imagemaps

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

33

Introduction to HTML

Lesson 3: Images

Getting Images
Clipart/Stock Photos - images can be
downloaded or purchased.
Graphics can be created in special graphics
programs.
Use your own original photographs.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

Libraries of clipart and stock photographs can be readily purchased at computer

stores or online.
When creating your own graphics, the first question to ask is, which software
should you use? Programs like Adobe Photoshop, Adobe Illustrator, CorelDraw!,
and Paint Shop Pro are well-known and good choices for creating graphics.
You can also take digital photographs or scan your own pre-existing photos into
the computer, and then modify them using a graphics program.

34

Introduction to HTML

Lesson 3: Images

GIF Image Format

(Graphics must be saved as GIF or J PG):
GIF (CompuServe Graphics Interchange
Format).
Supports up to 256 colors.
Saving as an Interlaced GIF allows the browser
to show a blurry version and then make it
clearer as it downloads.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

The GIF format once gained its popularity with CompuServe but it is now the
most commonly used graphic format on the web. The GIF format generally
downloads faster than others but with its limitation of 256 colors, it is not ideal for
photographs.
A GIF file can be saved as interlaced or non-interlaced. An interlace GIF allows
the browser to show a blurry version of the image as it downloads. Large images
especially should be saved as interlaced so the user has something visual to look
at while the web page is downloading.
There is an 89A version of GIF which allows the user to choose one color in the
image to be transparent. This is a very useful feature for the web as it makes an
image appear to be floating on the web.
Advantages of GIF:
Shorter download time when compared with JPEG.
No information in the graphic is lost during the compression process.
GIF files are compressed files (i.e. 256 colors).

35

Introduction to HTML

Lesson 3: Images

J PEG Image Format

(Graphics must be saved as GIF or J PG):
J PEG (J oint Photographic Experts Group)
formats.
Supports up to 16.7 million colors.
Progressive J PEGs work the same way as
Interlaced GIFs.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

The JPEG format is relatively new but due to its high compression rate, it is now
often preferred on the web. The name of this format is JPEG and the file
extension is .JPG. Because it supports a large number of colors, JPEG should
be used for photographs and other high resolution images. However, JPEG does
not support transparent colors.
The JPEG equivalent of an interlaced GIF is the progressive JPEG which shows
a blurry image while it is being downloaded.
Advantages of JPEG:
JPEG has 16.7 million color palette.
JPEG images are better looking because it reproduces photographic
quality.

36

Introduction to HTML

Lesson 3: Images

Points to Consider
Download time. Avoid testing the patience of
your visitors!
The file size of the image is a very important
consideration in using graphics on the web.
In general, the total size of all images on one
page should not exceed 40KB.
However,always keep the overall experience of
your audience/visitors in mind.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

Main differences between GIFs and JPEGs:

GIF
Does not reproduce photographic
quality.

JPEG
JPEG is able to reproduce photographic
quality.

GIF can only contain a maximum of

256 colors.

JPEG has a 16.7 million-color palette.

Ability to make specific color

transparent.

It cannot be rendered transparent.

In GIF no information in the graphic is

lost during the compression process.

In JPEG there is loss of information

about the image during compression.

GIF files load faster than JPEG files.

JPEG files tend to load slower than GIFs.

37

Introduction to HTML

Lesson 3: Images

Inserting Images
Use the empty Image Source tag.
Syntax:
<IMG SRC=image location/path>.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

When using the <IMG SRC> tag, you are telling the browser where the image
can be found. If you are using a relative address, it can be written as:
images/logo.gif. If you are using an absolute address or URL (Uniform Resource
Locator), write as: http://www.mysite.com/images/logo.gif.
If you have no images, download an image from www.clipart.com and save it in a
folder entitled images and type as in the following exercise.
Practice Exercise
<BODY>
<IMGSRC=images/filename.ext><!Theextshouldbe
replacedbygiforjpgdependingontheimagebeingused.>
</BODY>

38

Introduction to HTML

Lesson 3: Images

Creating Graphical Hyperlinks

Graphics and icons can be used as links
also. Syntax:
<A HREF=http://www.XYZinc.com/><IMG
SRC=XYZlogo.gif ALT=XYZinc></A>
Imagemap: A single graphic that allows you
to access different HTML pages by clicking
on different parts of the image. The hot spots
(links) in the imagemap needs to be defined
by using a special mapping program.
Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

Note: Bandwidth can be a major challenge for graphical hyperlinks because

many users use 56K and 28.8K modems.
To create imagemaps, mapping programs can be downloaded from shareware
sites on the web, though these take a long time to download.
Practice Exercise
Open default.htm and type the following:
<BODY>
<AHREF=http://www.microsoft.com<IMG
SRC=images/logo.gif></A>
</BODY>

39

Introduction to HTML

Lesson 3: Images

Attributes of <IMG>
<ALT=__>: Displays text instead of the
image until the image is loaded on the clients
computer.
<ALIGN=___>: Aligns the text that comes
after the image with the image itself. Possible
values are: Top, Bottom, Left, Right, Middle.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

The ALT attribute can be especially helpful for users who are surfing the web with
text-based browsers as it gives them an idea of what the image is about.
Note that the ALIGN attribute does not move the image itself. It aligns the text
that comes after the image with the image.
Practice Exercise
<BODY>
<IMGSRC=images/logo.gifALT=ABCCompanyLogo
ALIGN=Middle>
<H2>TheABCCompany...uptothetimes.</H2>
</BODY>

40

Introduction to HTML

Lesson 3: Images

Lowres Attribute
<Lowsrc=path>
Shows a low res (resolution) version of the
image while the other is downloading.
This lowres version is a separate file.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

With the LOWRES attribute, you can keep the user entertained while the actual
high-quality image is downloading
(To practice this, we would need two versions of the same image with different
qualities. This would have to be created in a graphics program.)
<BODY>
<IMG SRC=images/logo.gif LOWRES=images/logolow.gif>
</BODY>

41

Introduction to HTML

Lesson 3: Images

Height/Width Attributes
<Height=pixels>
<Width=pixels>
Indicate the exact size of the image.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

These attributes should not be used for sizing/scaling the image as they do not
affect file size, only the appearance in the browser.
Practice Exercise
Type the following and then change the values for HEIGHT and WIDTH to see its
effect.
<BODY>
<IMGSRC=images/logo.gifHEIGHT=100WIDTH=85>
</BODY>

42

Introduction to HTML

Lesson 3: Images

Border Attribute
Thickness of the border around the linked
image.
Syntax:
<Border=pixels>
Make the Border=0 if you dont want a border
around the image.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

The BORDER is simply a frame around the image. It is effective for certain
images.
Practice Exercise
Type the following:
<BODY>
<IMGSRC=images/logo.gifBORDER=3>
</BODY>

43

Introduction to HTML

Lesson 3: Images

Reducing Download Time

Use fewer colors.
Save files as Interlaced GIFs or as
Progressive J PGs.
Use Height, Width attributes.
Make use of the browsers caching features.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

44

Introduction to HTML

Lesson 3: Images

Transparent GIFs
Used very commonly on the web.
The transparent images appear as though they
are floating on the page.
Are saved in the GIF 89A format which allows
you to choose one color (usually the
background color) in the image as transparent.
Paint Shop Pro, PhotoShop, etc, can be used
to create transparent GIFs.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

45

Introduction to HTML

Lesson 3: Images

Imagemaps
Allows you to create a graphical interface.
Helpful for navigation of the web site.
An imagemap is one single image, GIF or J PG,
with hot links for which a map is defined.
Currently a popular feature on many web sites.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

3.1.

46

Introduction to HTML

Lesson 3: Images

Server-Side Imagemaps
The first form of imagemaps.
The HTML code (mapping file) completely
depends on the server and must meet its
specifications.
These imagemaps put additional load on the
server.
Can only be tested once the files are loaded on
the server.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

47

Introduction to HTML

Lesson 3: Images

Client-Side Imagemaps

Developed by Netscape Communications.

Began to be used in HTML 3.2.
Client-side basically means browser-based.
The browser does the processing; not the
server.
No need to know the specs of the server.
Allows you to test the imagemap before placing
on server.

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

48

Introduction to HTML

Lesson 3: Images

Animated GIFs
A series of images saved as one file using a
special program.
Images must be saved as GIFs.
All the images should be the same size.
Created in a standard graphics editor.
Images are put together in a program like GIF
Construction Set (shareware version available
at www.mindworkshop.com).

Lesson 3 - Images

Copyright 1999, Pinnacle Software Solutions Inc.

49

Introduction to HTML

Lesson 3: Images

Summary
Libraries of clipart and photographs can be downloaded, ordered on-line, or
purchased from a retail shop.

GIF format is one of the most popular graphic formats on the web. GIF files
download fast, but have a limitation of 256 colors and thus are not suitable for
photographs.

JPEG supports up to 16.7 million colors. JPEG files are ideal for
photographs.

Transparent GIFs are very common on the web; they appear as though they
are floating on the web page. Paintshop Pro, Photoshop, etc, can be used to
create GIFs with transparent backgrounds.

An imagemap is one single image (GIF or JPEG) with hot links for which a
map is defined. Imagemaps allow you to create a graphical interface and are
helpful for navigation of a web site.

GIF animations are a series of images saved as one file. Images must be
saved as GIFs. All the images must be the same size.

50

Introduction to HTML

Lesson 3: Images

Exercises
1. What images do common browsers support?
2. Can images be hyperlinked?
3. How do you make an image as background?
4. Make a simple HTML document with an image as a background and give
<ALT> attribute to the image. Also give a heading to the page in <H1> tags.

51