HTML and CSS Reference
In conjunction with the src attribute, the alt (alternative text) attribute, which describes
the contents of an image, should be applied. The alt attribute value is picked up by search
engines and assistive technologies to help convey the purpose of an image. The alt text
will be displayed in place of the image if for some reason the image is not available (see
1. <img src="dog.jpg" alt="A black, brown, and white dog wearing a ker-
Figure 9.2 The alternate text, “A black, brown, and white dog wearing a kerchief,”
shown in place of a missing image
Supported Image Formats
Images come in a variety of different file formats, and each browser may support
(or not support) different formats. By and large, the most commonly supported
formats online are gif , jpg , and png images. Of these, the most widely used
formats today are jpg and png . The jpg format provides quality images with
high color counts while maintaining a decent file size, ideal for faster load times.
The png format is great for images with transparencies or low color counts. We
most commonly see jpg images used for photographs and png images used for
icons or background patterns.
It is important to identify the size of an image in order to tell the browser how large the im-
age should be before the page even loads; thus the browser can reserve space for the image
and render the page faster. There are a few different ways to size images so that they work
well on a page. One option is to use the width and height attributes directly within the
<img> tag in HTML.
Additionally, images may be sized using the width and height properties in CSS. When
both the HTML attributes and CSS properties are used, the CSS attributes will take preced-
ence over the HTML attributes.
Specifying either a width or height will cause the other dimension to adjust automatically
to maintain the aspect ratio of the image. As an example, if we want an image to be 200