Working with images - HTML5 - page 75

10

Working with images

Images, along with text and links, are one of the three key components of web pages today.
Like typography, graphics on the Web are limited when compared to print, but the ability
to use images as both foreground and background elements goes a long way toward reduc-
ing those limitations. In this lesson, you learn which graphic formats are appropriate for the
Web as well as the proper code for adding the different types of images to your web designs.
Common image techniques — including alignment, text wrapping, and links — are also cov-
ered in this lesson.

undersTandin G web iMaGes T Tandin

Images on a web page are separate files that are linked to the HTML source code. Unlike text
and CSS styles, you cannot embed an image into a web page; every image is an independent
file. This concept is an important one to keep in mind for two reasons. First, you must remem-
ber to upload all files — including all images — when posting a web page with graphics online.
Second, your images should be optimized for the best possible picture quality at the lowest
possible file size. The first step in optimizing your graphics is to choose the proper format for
the image.

Graphics on the Web can come in three formats: GIF, JPEG, and PNG. Each format has its
own special properties and uses.

A GIF (Graphics Interchange Format) image consists of 256 colors or less and is best used
for graphics that have large areas of flat or limited colors, like logos and illustrations. GIF
images can also have transparent areas — this property is often used to give the appearance of
non-rectangular graphics, as shown in Figure 10-1. GIF images have a file extension of .gif .
Reducing the file size of a GIF image typically involves removing colors in what is known as a
lossless compression technique.