HTML and CSS Reference
In-Depth Information
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
Figure 9.2
)
.
1.
<img src="dog.jpg" alt="A black, brown, and white dog wearing a ker-
chief">
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.
Sizing Images
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
Search WWH ::
Custom Search