adding images to your web pages
you are here
there are no
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?
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.
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?
We’ve learned that empty
elements are elements without content.
We’ve also learned that the <img>
element is empty. But, doesn’t it have
content (the image)?
Well, to be more precise, an empty
element is an element that doesn’t have any
in the HTML page
to put the open
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
<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
Back in 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?
Browsers often retrieve the images
. 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
If I see an image on a Web page,
how do I determine its URL so that I can
link to it?
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 ﬁnd 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 ﬁnd a relative link to
the image, so you’ll have to “reconstruct” the
URL using the Web site domain name and
the path of the image.
What makes a JPEG photo better
than a GIF photo, or a GIF logo better
than a JPEG logo?
“Better” is usually deﬁned as some
combination of image quality and ﬁle size.
A JPEG photo will usually be much smaller
than an equivalent quality GIF, while a GIF
logo will usually look better, and have a
smaller ﬁle size than in JPEG format.
I’ve heard about the PNG image
format too. Why didn’t you mention that?
PNG is the latest newcomer in
graphic formats, and an interesting one as
it can support both JPEG and GIF styles
of images. It also has more advanced
transparency features than GIF. Right now,
PNG is a little on the cutting edge because
not all browsers support it. But its popularity
is growing quickly. You should feel free to
use PNG, but just be aware that it won’t
work on every browser.