HTML and CSS Reference
Q: So the <img> element is quite
simple — it just provides a way to specify
the location of the image that needs to be
displayed in the page?
A: Yes, that about sums it up. We'll talk
about a couple of attributes you can add to
the element. Later, you'll see a number of
ways to use CSS to change the visual style
of an image.
Q: Back to the example of a web page
loading with images…when I load a web
page, I don't see the images loading one
after the other. Why?
A: Browsers often retrieve the images
concurrently . That is, the browser makes
requests for multiple images at the same
time. Given the speed of computers and
networks, this all happens fast enough that
you usually see a page display along with its
Q: If I see an image on a web page,
how do I determine its URL so that I can
link to it?
A: Most browsers allow you to right-click
on an image, which brings up a contextual
menu with some choices. In these choices,
you should see “Copy Image Address” or
“Copy Image Link,” which will place the
URL in your clipboard. Another way to find
the URL is to right-click and choose “Open
Image in New Window,” which will open
the image in a browser window. Then you
can get the URL of the image from the
browser's address bar. A last option is to use
your browser's View Source menu option
and look through the HTML. Keep in mind,
though, you might find a relative link to the
image, so you'll have to “reconstruct” the
URL using the website domain name and the
path of the image.
Q: What makes a JPEG photo better
than a GIF or PNG photo, or a GIF or PNG
logo better than a JPEG logo?
A: “Better” is usually defined as some
combination of image quality and file size.
A JPEG photo will usually be much smaller
than an equivalent-quality PNG or GIF, while
a PNG or GIF logo will usually look better,
and may have a smaller file size than in
Q: How do I choose between GIF and
PNG? It seems like they are very similar.
A: PNG is the latest newcomer in graphic
formats, and an interesting one because it
can support both photos as well as logos.
It also has more advanced transparency
features than GIF. PNG is supported by all
major browsers now, which wasn't true just a
few years ago.
But there's a lot to know about the images
themselves. What are the different image
formats for? When should I use one over the
other? How big should they be? How do I
prepare images for use in a web page?
Q: We've learned that void elements
are elements without content or a closing
tag. We've also learned that the <img>
element is void. But doesn't it have
content (the image)?
A: Well, to be more precise, a void
element is an element that doesn't have any
content in the HTML page to put the opening
and closing tags around. True, an image
is content, but the <img> element refers to
the image. The image isn't part of the HTML
page itself. Instead, the image replaces the
<img> element when the browser displays
the page. And remember, HTML pages
are purely text, so the image could never
be directly part of the page. It's always a
To choose between GIF and PNG, there
are a few things to consider. First, PNG
has slightly better compression than GIF,
so for an image with the same number of
colors (i.e., up to 256), your PNG file may
be smaller. If you need more colors than
GIF can offer, and JPEG isn't an option (for
instance, you need transparency), PNG is
definitely the way to go. However, if you
need animation, then you should go with GIF
because GIF is the only widely supported
format that supports animation.