HTML and CSS Reference
Listing 5-1. The simplest incarnation of the img element
<img src="superhero.jpg" alt="A superhero">
src : Specifies the URL where the graphic file resides on a web server.
alt : Provides an alternative text equivalent of the image. This attribute may be empty to indicate
nonessential images. It may be omitted under unusual circumstances, and only if a title
attribute is supplied or if the img is a child of a figure element that also includes a figcaption .
width : Specifies the width of the image in pixels.
height : Specifies the height of the image in pixels.
ismap : Declares that the image is used for a server-side image map.
usemap : Identifies a client-side image map to be used (see Chapter 6 to learn more about image
crossorigin : Cross-Origin Resource Sharing (CORS) settings, specifying that the image file
may or may not be served from other domains. This attribute can only have the values
anonymous (the default) or use-credentials . The attribute with an empty value is equivalent to
anonymous . The crossorigin attribute is new in HTML5 and mostly useful on secure websites.
For more on CORS, see w3.org/TR/cors .
The alt Attribute
The alt attribute provides a text alternative when the picture can't be seen or isn't available. It could be
that your reader is visually impaired, or using a browser or device that doesn't display the image, or the
image file couldn't be found at the source URL, or the file was corrupt or in an unsupported format.
Including a brief alternative text description preserves some of your image's communicative intent when
the image itself isn't visible. There's no explicit character limit for the value of an alt attribute, but
convention is to limit them to 1,024 characters (including spaces), and ideally less than 256 characters.
Shorter is better.
Some browsers, when they encounter a missing image, will display an icon and may show a border
indicating the image dimensions (if the dimensions are known), sometimes with the alternative text inside,
as Internet Explorer does in Figure 5-5. Other browsers show only the alt text as regular inline text, with
no border or extra space.