Basics of the <img> Tag for CSS3 - dummies

Basics of the <img> Tag for CSS3

By John Paul Mueller

The <img> tag has been around in CSS for a long time — so long, in fact, that it has picked up a bit of baggage along the way. Developers who think that the <img> tag supports certain attributes may be surprised to find that it doesn’t — at least not anymore — because those attributes have been deprecated (removed) as new HTML versions have appeared on the scene.

For example, the align attribute isn’t available in HTML5 — it was deprecated in HTML4 because CSS already provided good transformation alternatives to the align attribute. Unfortunately, one casualty of deprecation, longdesc, affects people with special needs, but few sites actually implemented this useful feature anyway. The following list provides you with an updated list of attributes that you can use for reference.

  • alt: Provides a textual description of the image for those who can’t see it. A screen reader will describe the image to the person. It’s important to keep the description short and focused. Even though a picture is worth a thousand words, the viewer likely won’t have time to hear them all.

  • crossorigin: Allows usage of images located on another server as specified within an <img> tag enclosed in a <canvas> tag. The browser will act as if the image is served by the local server, rather than the foreign server. Because the image is on another server, the src attribute is normally modified to include additional server details.

    To use this feature, you must also provide an origin HTTP header that describes the location of the server. You can also use JavaScript to access this information (see the Mozilla Developer Network for an example of performing this task). This attribute can have the following values:

    • anonymous: The foreign server doesn’t require any special login to use the image.

    • use-credentials: The foreign server requires a username and password to gain access to the image. The credentials are supplied using a variety of means, including a cookie, x.509 certificate, or HTTP basic authentication.

  • height: Specifies the height of an image using any supported unit of measure.

  • ismap: Specifies that the image is a server-side map when included (there’s no value associated with this attribute). Mapped images can be used to perform all sorts of tasks, such as acting as a site map (redirecting viewers to other places on the site).

  • src: Defines the source of the image. Normally, this attribute contains a simple URL. When you’re working with the crossorigin attribute, however, src takes on new meaning (see the crossorigin attribute entry for details).

  • usemap: Specifies that the image is a client-side map. You provide the name of the <map> tag to use with the image.

  • width: Specifies the width of an image using any supported unit of measure.