Notes 6
— print
(last updated:
Jun 30, 2009)
— print
Graphical Images in Web Pages
The image element, img is
used to display standard graphical images in one of three
common formats. All these formats use compression to reduce
the size of the image.
The formats are
- GIF: graphical image format, this is, historically
the earliest of the three.
The number of colors in a GIF file is restricted to 256.
Some of the aspects of compression algorithm were
considered proprietary (patented by Unisys).
The extension of such files is ".gif".
-
JPEG: a format designed by the Joint Photographic Experts Group.
It is a lossy format in that all the image information is
approximated instead of captured exactly. It allows a degree
of compression for which, for lower values, decreases the size
of the image
as well as its quality. This format is most common for
images generated by digital cameras. The extension of such
files is ".jpg".
- PNG: Portable Network Graphics,
a non-proprietary substitute for GIF.
This is less popular than the other two formats.
The extension of such files is ".png".
Both GIF and PNG formats support the
transparent color which allows the background to show through;
JPEG format does not.
Other image formats, such as BMP, are supported by web browsers,
but these uncompressed and typically of a much larger size.
Image size
Although there's no absolute rule about the size of an image, you should
strive to keep them not much more than 20K bytes. On a 56K modem (which
are still quite common), a 20K image takes about 4-5 seconds to download.
Information about transmission speeds (optional)
Common transmission media:
| technology | speed | comments |
|---|
| modem | 56Kbps | standard telephone connection |
| ISDN | 64 - 128 Kbps | Integrated Services Digital Network |
| DSL | 512 Kbps - 8 Mbps | Digital Subscriber line |
| Cable Modem | 512 Kbps - 52 Mbps | |
| T-1 | 1.544 Mbps |
common in corporations or universities |
| T-3 | 44.736 Mbps | |
Data transfer time at 56K:
56K = 56,000 bits/sec. = 5,600 bytes/sec. (each transmitted byte is 10 bits)
20K bytes = 20,480 bytes * (1 sec/5,600 bytes) = 3.7 sec
The HTML image element
This image element is a complete element
(no ending tag) which
uses the following attributes:
- src: the URL of an actual image file
- width, height: here are some points about these
attributes:
- they are always in pixels;
- they create a space of the specified width and height;
- the image is stretched to fit these parameters
- if there is no image a space is left of this size.
- alt:
text which appears if image does not; also appears
as a "tooltip" for certain browsers
- border: width of border around image
- usemap: the URL to an imagemap (map) element
- ismap: server-side imagemap
The only necessary attribute is src:
<img src="URL-of-some-image-file" />
As with hyperlinks, the src value can be either an absolute or
relative URL.
Usage of width, height and alt attributes
Generally it is recommended to use the
width, height and alt attributes.
A user may decide, for the sake of speed, to direct his or her
browser to not download any images.
In that case, these attributes cause the browser to
retain the outline of the image with correct dimensions
and thus the structure of the page.
One downside of using width and height
is that you have to
remember to change these values
if you resize the image.
Image creation in HTML-Kit
In HTML-Kit, the image creators are in the Objects tab:
-
The fifth from the right creates a basic image (img) tag.
-
The third from the right runs a dialog in which you can
browse for the image file locally.
The advantage of the latter is that it can discover and set the
width and height
attributes correctly; the disadvantage is that
it sets the URL to the full path to the image, whereas, in all
cases, you want a relative path.
Sample image
Consider the following image, yahoo.gif:
Download this by right-clicking and saving in an appropriate location.
Then, assuming your HTML document is saved in the same folder as the
image, this is the code you want:
<img src="yahoo.gif"/>
You can right-click on the image and discover the
width and height through
the properties selection.
In this case we could set the width and height.
Also it is recommended to set the alt text value, getting
something like this
<img src="yahoo.gif" alt="Yahoo" width="130px" height="30px" />
If the image is not available, or somehow not permitted to download,
the
width and height
serve to hold a place of the correct size,
and the
alt value
gives information about what is being omitted.
For example, if you were to set src="" you'll get this:
Scaling
There are occasionally usage for changing the
width and height attributes from the image dimensions,
this is called scaling. Generally, if you want an image
to be a different size, it is best to scale it using a software tool.
Automatic proportional scaling (keeping the width and height
at the same ratio) can be done by modifying one dimension
and leaving out the other such as this:
<img src="yahoo.gif" width="70px" />
which generates:
Images maintained in a subfolder
It is commonplace to keep the images that you use
separate from the HTML code by storing them in a separate
subfolder, say, of the name images (there can be more than
one). In that case, the src attribute would reflect
that the image is "one step below" the document as follows:
<img src="images/my_image.gif" />
Note that the "/" is more versatile for general web usage,
even though "\" represents a folder separator on Windows,
and will work on a Windows system.
Image as a hyperlink
We can make it act like a hyperlink to yahoo simply by
surrounding it as follows:
<a href="http://www.yahoo.com"><img src="yahoo.gif" /></a>
which has the following effect:
Used in this way the hyperlink leaves a border around
the image. The easiest way to get rid of this is to
set the border attribute to 0 in the image:
<a href="http://www.yahoo.com"><img src="images/yahoo.gif" border="0" /></a>
obtaining a more desirable presentation:
Image hyperlinks for navigation
If the images' dimensions are the same, either in
height or width or both, and they have the
same background color, they can be concatenated together
to act as a navigation row or column.
For example, consider these three images
(home.gif, first.gif, second.gif),
held in the images subfolder,
all of width 100 and
height 20:
The most consistent way to create rows and columns of
images is using a table with
cellpadding and cellspacing set to 0.
To create a row-orientation, use the following:
<table summary="" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html"><img src="images/home.gif" alt="" border="0"></a></td>
<td><a href="first.html"><img src="images/first.gif" alt="" border="0"></a></td>
<td><a href="second.html"><img src="images/second.gif" alt="" border="0"></a></td>
</tr>
</table>
which looks like this:
To create a column-orientation, use the following:
<table summary="" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html"><img src="images/home.gif" alt="" border="0"></a></td>
</tr>
<tr>
<td><a href="first.html"><img src="images/first.gif" alt="" border="0"></a></td>
</tr>
<tr>
<td><a href="second.html"><img src="images/second.gif" alt="" border="0"></a></td>
</tr>
</table>
which looks like this:
© Robert M. Kline
