HTML and CSS Reference
In-Depth Information
Use the <img> element to place images in your
web page.
JPEG, PNG, and GIF are the three formats
for images that are widely supported by web
browsers.
Browsers treat <img> 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.
The JPEG format is best for photographs and
other complex images.
The GIF or PNG format is best for logos and
other simple graphics with solid colors, lines, or
text.
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.
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 <img> element is an inline element, which
means that the browser doesn't put a linebreak
before or after an image.
The GIF and PNG image formats allow 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.
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.
GIF and PNG are lossless formats, which means
the file sizes are likely to be larger than JPEG.
The alt attribute of an <img> 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.
PNG has better transparency control than GIF,
and allows many more colors than GIF, which is
limited to 256.
PNG has three different size options: PNG-24
(supports millions of colors), PNG-16 (supports
thousands of colors), and PNG-8 (supports 256
colors), depending on your needs.
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.
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 PNG or GIF image.
Photoshop Elements is one of many photo
editing applications you can use to resize your
images. You can also use one of many free
online tools to resize images. Just search for
“free online image editor.”
Images can be used as links to other web pages.
To create a link from an image, use the <img>
element as the content of an <a> element,
and put the link in the href attribute of the <a>
element.
Images that are too large for the browser make
web pages difficult to use and slow to download
and display.
