This document answers questions asked frequently by web authors. While its focus is on HTML-related questions, this FAQ also answers some questions related to CSS, HTTP, JavaScript, server configuration, etc.
This document is maintained by Darin McGrew <darin@htmlhelp.com> of the Web Design Group, and is posted regularly to the newsgroup comp.infosystems.www.authoring.html. It was last updated on October 20, 2001.
Use an IMG element. The SRC attribute specifies the location of the image. The ALT attribute provides alternate text for those not loading images. For example:
<img src="logo.gif" alt="ACME Products">
For more information on images and the IMG element, see: http://www.htmlhelp.com//reference/html40/special/img.html
Here is a simple rule of thumb:
Lots of colors? Use JPEG. Solid colors and sharp lines? Use GIF (or PNG).
Different image formats compress the image data differently. Their different compression algorithms have different strengths and weaknesses. The GIF and PNG formats are excellent with images that have relatively few colors and no gradations. Most small web graphics fall into this category. These formats will compress these images well, and any lettering, lines, and edges in the images will remain sharp.
On the other hand, the JPEG format is excellent with images where colors blend smoothly from one to another. Photographs are good examples, because they usually have many subtle shadows and variations of color.
For comparisons of the different image formats, see <URL:http://www.adobe.com/studio/tipstechniques/GIFJPGchart/main.html>
Note that AOL's cache proxy servers convert GIF and JPEG images to their highly compressed ART image format (*.art) files, and by default, AOL browsers are configured to use these small, low-quality versions rather than the originals.
Just use the image as the link content, like this:
<A HREF=...><IMG ...></A>
A thumbnail image is just a copy of the full-sized image that has been modified to reduce the size of the file. It is linked to the full-sized image with a normal link:
<A HREF="full-sized.jpg"><IMG SRC="thumbnail.jpg" ALT=...></A>
There are several techniques for reducing the size of the file for the thumbnail image, including
Thumbnail images can use multiple techniques simultaneously. For example, Jakob Nielsen advocates "Relevance-Enhanced Image Reduction", which combines resampling/resizing and cropping.
Use an image map. Client-side image maps don't require server-side processing, so response time is faster. Server-side image maps hide the link definitions from the browser, and can act as a backup for client-side image maps for the few very old browsers that support server-side image maps but not client-side image maps.
The configuration details of server-side image maps vary from server to server. Refer to your server documentation for details.
Client-side image maps are implemented with HTML.
The MAP element defines an individual image map and the
AREA element defines specific linked areas within that image
map.
The USEMAP attribute of the IMG element
associates an image map with a specific image.
A detailed explanation (with examples) is available at
<http://www.htmlhelp.com//reference/html40/special/map.html>.
A tutorial is available at
<http://ppewww.ph.gla.ac.uk/%7Eflavell/www/imgmaptut.html>.
Use the BORDER="0" attribute in the
<IMG> element.
For example:
<A HREF="doc.html"><IMG SRC="doc.gif"
ALT="View document." BORDER="0"></A>
This is the result of including "white space" (spaces and newlines) before or after an IMG inside an anchor. For example:
<A HREF=...>
<IMG SRC=...>
</A>
will have white space to the left and right of the image. Since many browsers display anchors with colored underscores by default, they will show the spaces to the left and right of the image with colored underscores.
Solution: don't leave any white space between the anchor tags and the IMG tag. If the line gets too long, break it inside the tag rather than outside it, like this:
<A HREF=...><IMG
SRC=...></A>
Style checkers such as Weblint will call attention to this problem in your HTML source.
If your images are inside a table, be sure to set the BORDER, CELLSPACING, and CELLPADDING attributes to 0.
Also, extra space between images is often created by whitespace around
the <IMG> tag in the markup.
It is safe to use newlines inside a tag (between attributes), but not
between two tags.
For example, replace this:
<TD ...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
</TD>
with this:
<TD ...><IMG SRC=... ALT=...><IMG SRC=... ALT=...><IMG SRC=... ALT=...><IMG SRC=... ALT=...></TD>
According to the latest specifications, the two should be equivalent. However, common browsers do not comply with the specifications in this situation.
Most likely you forgot to close a quote at the end of the SRC attribute. Alternatively, perhaps you used a ">" character in an ALT text or somewhere else inside a tag. Although this is legal, several older browsers will think the tag ends there, so the rest is displayed as normal text.
This especially happens if you use comment tags to
"comment out" text with HTML tags. (See the answer to
"How can I include comments in
HTML?") Although the correct syntax is <!-- -->
(without "--" occurring anywhere inside the comment), some
browsers will think the comment ends at the first ">" they
see.
Validators will show you any syntax errors in your markup, but checkers such as Weblint and HTMLchek can show you where you are liable to provoke known browser bugs. See also the answer to "How can I check for errors?"
Here are some other possibilities:
Check out the following resources:
There are two basic approaches. The most cache-friendly method is to use a normal IMG tag that refers to a CGI script that randomly redirects the browser to one of several images. There is an example of such a CGI script at <URL:http://www.foad.org/%7Eabigail/CGI/random_images.html>. See the CGI Programming FAQ <URL:http://www.htmlhelp.com//faq/cgifaq.html> for more information about CGI.
The second method is to generate the HTML dynamically using a mechanism like Server Side Includes (SSI) or CGI. This method is less cache-friendly, but it does allow the surrounding markup (e.g., HEIGHT and WIDTH attributes, or the URLs for linked/image-mapped images) to vary with the image. If your server supports SSI, the details can be found in your server documentation.
You can't. The image file is necessary for the browser to display your document; you must send it to the browser. Even if a particular browser doesn't have a "Save Image" feature, there are many that do, and someone can always retrieve the image file by hand (using telnet) or from the browser's cache.
There are tricks that make it more difficult for some readers to save your images. However, just as with tricks that try to hide HTML source, these tricks cause various problems for law-abiding users and can't really prevent thieves from saving your images.
No. Character entities (©, &#nnn; and such) are permitted, though.
If you want to know how to write good ALT texts without markup, please see Alan Flavell's essay on choosing ALT texts at <URL:http://www.htmlhelp.com//feature/art3.htm>.
You can use <img align="right"> to float a image to
the right.
(Use align="left" to float it to the left.)
Any content that follows the <img> tag will
flow around the image.
Use <br clear="right"> or <br
clear="all"> to mark the end of the text that is to flow around the
image, as shown in this example:
<img align="right" src=... alt=...>
The image will float to the right.
This text will wrap to fill the available space to the left of (and if the
text is long enough, below) the image.
<br clear="right">
This text will appear below the image,
even if there is additional room to its left.
For an explanation with nice examples, see <URL:http://www.awpa.asn.au/html/images.html>.
If you want others to view your web page with a background image, the
most appropriate way is to suggest the background with a style sheet.
Cascading Style Sheets use the
background-image property to specify a
background image.
More information about Cascading Style Sheets can be found at:
http://www.htmlhelp.com//reference/css/
More information about the CSS
background-image property can
be found at:
http://www.htmlhelp.com//reference/css/color-background/background-image.html
With HTML, you can suggest a tiled background image with the BACKGROUND attribute of the BODY element. Here is an example:
<body background="imagefile.gif" bgcolor="#ffffff"
text="#000000" link="#0000ff" vlink="#800080"
alink="#000080">
More information about the BODY element can be found at: http://www.htmlhelp.com//reference/html40/html/body.html
If you specify a background image, you should also specify text, link, and background colors (see the answer to the question "How can I specify colors?") since the reader's default colors may not provide adequate contrast against your background image. The background color will be used by those not loading images. Authors should not rely on the specified background image since browsers allow their users to disable image loading or to override document-specified backgrounds.
Use a style sheet with the following ruleset:
body { color: black; background: white url(foo.gif) fixed }
Note that the background: fixed property used in the
above style sheet is supported by
Internet Explorer 3+,
Netscape Navigator 5+,
Opera 3.6+,
and other browsers.
In contrast, the proprietary BGPROPERTIES=fixed attribute is
supported only by Internet Explorer 3+.
Use a style sheet with the following ruleset:
body { color: black; background: white url(foo.gif) no-repeat }
Home,
Reference,
FAQs,
Tools,
Design,
Feature Article,
BBS,
Links
Copyright © 1996-2001 by the Web Design Group. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at http://www.opencontent.org/openpub/).