What’s wrong with having the user just use the scroll
bar to see the image?
In general, Web pages with large images are hard to use.
Not only can your visitors not see the entire image at once, but using
scroll bars is cumbersome. Large images also require more data to
be transferred between the server and your browser, which takes
a lot of time and may result in your page being very slow to display,
particularly for users on dialup or other slow connections.
Why can’t I just use the width and height attribute to
resize the images on the page?
Because the browser still has to retrieve the entire large
image before it scales it down to ﬁt your page.
You said the browser window is 800 pixels wide; what
exactly does that mean?
Your computer’s display is made up of millions of dots called
pixels. If you look very closely at your display you’ll see them:
And, while screen sizes and resolutions tend to vary (some people
have small monitors, some large), 800 pixels is the typical width that
most people set their browsers to. So, 800 pixels is a good rule of
thumb for the
width of your images (and your Web pages
too, but we’ll get to that in a later chapter).
How do the number of pixels relate to the size of the
image on the screen?
A good rule of thumb is 72 pixels to every inch, although
depending on your monitor, you can have up to 120 pixels in an inch.
Assuming your monitor has 72 pixels per inch, if you want an image
to be approximately 3” wide and high, you’d make it 72 (pixels) times
3 (inches) = 246 pixels, or, rounding up, 250 by 250 pixels.
Well, how large should I make my images then?
In general, you want to keep the width of your image to
less than 800 pixels. Of course, you may want your images to be
signiﬁcantly smaller depending on what you’re using the image for.
What if the image is a logo for your page? You probably want that
small, but still readable. After all, you don’t need a logo the width
of the entire Web page. Logos tend to run between 100 and 200
pixels wide. So, ultimately, the answer to your question depends on
the design of your page. For photos – which you usually do want to
view as large as possible – you may want to have a page of small
thumbnail images that load quickly, and then allow the user to click
on each thumbnail to see a larger version of the image. We’ll get to
all that shortly.
I think my browser automatically resized the image of
Seattle, because it ﬁts perfectly in the window. Why did my
browser do this?
Some browsers have a feature that resizes any image that
doesn’t ﬁt within the width of your browser. But many browsers don’t
do this, so you don’t want to rely on it. Even if every browser
have this feature, you’d still be transferring a lot more data than
necessary between the server and browser, which would make your
page slow to load and less usable.
there are no
Here’s a lot
of pixels that
together make up
the upper part of
the right wing of
This image is made up
of thousands of pixels
when it’s displayed on a
Here’s one pixel.
all about image sizes