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 April 26, 2007.
The following questions have moved to another section of the FAQ.
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">
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, and have different strengths and weaknesses. The JPEG format is good for images where colors blend smoothly from one to another. Photographs are good examples, because they usually have many subtle shadows and variations of color.
The GIF and PNG formats are good for 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.
PNG transparency is much richer than GIF transparency, allowing partial transparency and other interesting effects. However, Internet Explorer for Windows (even version 6) doesn't support anything more than GIF-style transparency.
Note that AOL's cache proxy servers convert 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 src=... alt=...></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
You will need graphics software to create thumbnail images. Freeware graphics utilities will perform all of these functions.
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.
In your HTML, you can specify the BORDER attribute for
the image:
<a href=...><img src=...
alt=... border="0"></a>
Or in your CSS, you can specify the border property for linked images:
a img { border: none ; }
However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.
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>
may 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.
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=...>
</td>
with this:
<td ...><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.
Finally, extra space between images can appear in documents that trigger the "standards" rendering mode of Gecko-based browsers like Mozilla and Firefox.
There are a number of possibilities:
<img src="example3.jpg alt=...>
<img alt="2 + 2 > 3" src="example4.png">
file:///c:/path/example5.gif).
If so, then you should replace them with
relative URLs
(e.g., example5.gif)
or http URLs
(e.g., http://server.example/path/example5.gif).
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.
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.
No. Character entities (©, &#nnn; and such) are permitted, though.
You can use <img align="right"> to float an 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:
The image in this example will float to the right.
<img align="right" src=... alt=...>
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.
The CSS float property can also be used.
With CSS, you can suggest a background image (and a background color, for those not using your image) with the background property. Here is an example:
body {
background: white url(example.gif) ;
color: black ;
}With HTML, you can suggest a 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">
If you specify a background image, you should also specify text, link, and background colors since the reader's default colors may not provide adequate contrast against your background image. The background color may be used by those not using your background image. Authors should not rely on the specified background image since browsers allow their users to disable image loading or to override document-specified backgrounds.
With CSS, you can use the background-attachment property. The background attachment can be included in the shorthand background property, as in this example:
body {
background: white url(example.gif) fixed ;
color: black ;
} Note that this CSS is supported by
Internet Explorer,
Mozilla,
Firefox
Opera,
Safari,
and other browsers.
In contrast, Microsoft's proprietary BGPROPERTIES attribute is
supported only by Internet Explorer.
With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example:
body {
background: white url(example.gif) no-repeat ;
color: black ;
}
All rights reserved.