Head First HTML with CSS

eview using images with html
214 Chapter 5
BULLET POINTS
n Use the element to place images in
your Web page.
n
n
n
n
n
n
n
Browsers treat elements a little
differently than other HTML elements; after
reading the HTML page, the browser retrieves
each image from the Web server and displays
it.
If you have more than a couple of large
images on a Web page, you can make
your Web page more usable and faster to
download by creating thumbnails – small
images that the user can click on to see the
large version of the image.
The element is an inline element,
which means that the browser doesn’t put a
linebreak before or after an image.
The src attribute is how you specify the
location of the image file. You can include
images from your own site using a relative
path in the src attribute, or images from other
sites using a URL.
The alt attribute of an element is a
meaningful description of the image. It is
displayed in some browsers if the image can’t
be located, and is used by screen readers to
describe the image for the visually impaired.
A width of less than 800 pixels is a good
rule of thumb for the size of photo images
in a Web page. Most photo images that are
created by digital cameras are too large for
Web pages, so you’ll need to resize them.
Photoshop Elements is one of many photo
editing applications you can use to resize your
images.
n
n
n
n
n
n
n
n
n
Images that are too large for the browser
make Web pages difficult to use and slow to
download and display.
A pixel is the smallest dot that can be
represented on the screen. Each image is
composed of thousands of pixels. Depending
on your monitor, there can be anywhere from
72 pixels in an inch to 120 pixels in an inch.
JPEG and GIF are the two formats for images
that are widely supported by Web browsers.
The JPEG format is best for photographs and
other complex images.
The GIF format is best for logos and other
simple graphics with solid colors, lines, or text.
JPEG images can be compressed at a variety
of different qualities, so you can choose the
best balance of quality and file size for your
needs.
The GIF image format allows you to make an
image with a transparent background. If you
put an image with a transparent background
in a Web page, what’s behind the image, such
as the background color of the page, will show
through the transparent parts of the image.
In Photoshop Elements, use the Matte color
menu in the “Save for Web” dialog to choose
the right color for softening the edges of your
transparent GIF image.
Images can be used as links to other Web
pages. To create a link from an image, use
the element as the content of an
element, and put the link in the href attribute
of the element.