HTML and CSS Reference
In-Depth Information
The
<img>
element must have both a
src
attribute and an
alt
attribute. The
src
attribute should contain a path to
the image file that you want to embed in your page. The
alt
attribute is used to provide some fallback text in case
the image cannot be loaded. This text should describe the contents of the image. Here's an example.
<img src="pepperoni-pizza.jpeg"
alt="A pepperoni pizza presented on a wooden chopping board">
Here we have defined an
<img>
element with a path to an image file and a text description of the image. Figure 4-5
shows how this image would be displayed in a web browser.
Pizza image reproduced by permission of iStockphoto.com/Lauri Patterson
Figure 4-5
A simple image displayed in Google Chrome.
Notice that there is no end tag for
<img>
elements. This is because
<img>
is a
void
element.
You can also define the width and height that an image should be displayed at using the
width
and
height
at-
tributes. These attributes should contain an integer that represents the dimension in pixels. The browser will automat-
ically resize images to the specified dimensions if needed; however, it is better to supply an image that has already
been sized to the proper dimensions. This will help to reduce the amount of time it takes the page to load.
The following example uses an
<img>
element that explicitly defines the
width
and
height
attributes. The im-
age file here is already 240 pixels wide and 280 pixels high so the browser will not resize it. You should still expli-
citly define the image dimensions as this can help to speed up the page load time slightly.
<img src="pepperoni-pizza.jpeg"
alt=" A pepperoni pizza presented on a wooden chopping board "
