The <image> Tag

Images are specified using the code <img src="filepath" alt="text" />. The image borders and size are best assigned through CSS styling. Images have an intrinsic size which will be used by the browser in the absence of styling information. The alt="text" specification serves many purposes:

1. It makes information about the image available to visually challenged users.
2. Some browsers show the text specified in this attribute as a tooltip when the mouse cursor hovers over the image.
3. Images are intended for human consumption. This attribute provides information that makes the image accessible to search engine spiders. This may help to improve the way the container HTML document is indexed.
4. Stuffing important keywords into this attribute is a possible technique to improve the search ranking of the document. Although this practice is quite widespread, we are not aware that this does in fact have the desired results. In any case, it is dishonest.
5. Finally, should the image fail to load the text defined in this attribute will be shown by the browser. This ensures that the page continues to make some sense to the user even in the absence of the image.

Images share some attributes in common with other HTML elements:

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.

The following attributes specific to image elements

• The alt attribute has already been discussed above.
• The height and width attributes are not strictly necessary. However, if specified they ensure faster rendering of the webpage. This is particularly important for pages containing a large number of images.
• The usemap attribute specifies the location of a map containing the coordinates and links for a client side image map. This attribute can either specify a named map defined in the same file, e.g. usemap="#jigsaw" or specify a URL. In the former case note the use of the #. Firefox is quite happy to interpret a named internal map without the #. However, IE and Opera will ignore the #less attribute and treat the image as a passive element. Image maps are discussed here.
• There is normally no rational reason for not specifying the src attribute. It should be noted that if the image is to be fetched from another location on the Internet it is necessary to specify the protocol to be used. For example

  • <img src="www.brandspatch.com/images/logo.png">

    would fail
  • but

    <img src= "http://www.brandspatch.com/images/logo.png">

    would succeed.

Images in IE, particularly page backgrounds, have a tendency to flicker as the user navigates from one page to another on the same website. This happens since by default IE insists on always checking the server for updated versions of the image instead of simply using the cached copy. Client-side solutions to the problem using JavaScript have been suggested but do not always work reliably. Two server-side alternatives that always work are described here.

Finally, it should be noted that image elements can, in the hands of the unscrupulous, pose a security risk. As a general rule, browsers go to great lengths to protect their users. Typically, scripts run on the browser cannot communicate with any domain other than their parent - i.e. the domain from which they were served up. This policy is implemented very strictly, almost ridiculously so. For instance, even an attempt to communicate with an HTTP server residing at the same IP address but serving on a different port will be blocked! When there are legitimate reasons for wanting to do so this limitation can prove to be a real nuisance. Enter the <img> tag

• Create a hidden image in your HTML document.
• Use JavaScript to assign the src attribute for this image. This could, for instance, be an invocation to run a server-side script on any server. You can quite safely build a source string with URL encoded parameters.
• The browser will in all innocence attempt to fetch the new image.
• Assign a JavaScript method to the onload event for the image. This way you even get confirmation that the transaction has succeeded!

We have used this technique - with our users complete consent - to silently send SMS text alerts using a third party web-to-sms service. However, it could just as easily be used for the unauthorized harvesting of personal information.