HTML and CSS Reference
In-Depth Information
is discarded to make the file smaller. Lossy compression works extremely well for photo-
graphic data but makes JPEG unsuitable for images that contain elements with sharp
edges, such as logos, line art, and type. JPEG files are supported by all major web
browsers.
If you're working with photos to display on the web, you should save them in the JPEG
format.
PNG
PNG, pronounced “ping,” was originally designed as a replacement for GIFs. It stands
for
Portable Network Graphics
. Only the oldest browsers don't support PNG natively.
Current browsers all support PNG, and it has some important advantages over GIF (and
to a lesser extent over JPEG). Like GIF, it is a nonlossy image format. No information
about the image is lost when it is compressed.
It has better support for transparency than GIF and supports palette-based images (like
GIF) and true-color and grayscale images (like JPEG). In other words, you don't have to
worry about color usage with PNG, although limiting color usage can result in smaller
files.
More and more sites use the PNG format for images, but due mainly to inertia, GIF and
JPEG are still the most common formats. The good news is that nearly all graphics tools
these days support PNG. If you're creating new images that aren't photographs, PNG is
the format to use.
After you have an image ready to go, you can include it on your web page. Inline images
are placed in HTML documents using the
<img>
tag. This tag, like the
<hr>
and
<br>
tags, has no closing tag in HTML. For XHTML and HTML5, you must add an extra
space and forward slash to the end of the tag to indicate that it has no closing tag.
The
<img>
tag has many attributes that enable you to control how the image is presented on
the page. Some attributes have been deprecated in favor of
Cascading Style Sheets (CSS)
.
NOTE
To use the
<img>
tag in an XHTML-compliant fashion, you need to
close it, like this:
<img />
