Meeting the Media - Head First HTML and CSS - page 179

Q: What's wrong with having the user just use the scroll bar
to see the image?
A: In general, web pages with large images are hard to use. Not
only can your visitors not see the entire image at once, but also 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 dial-up or other slow connections.
Q: Why can't I just use the width and height attributes to
resize the images on the page?
A: Because the browser still has to retrieve the entire large image
before it scales it down to fit your page.
Q: You said the browser window is 800 pixels wide; what
exactly does that mean?
A: 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), most people typically set their
browsers to somewhere between 800 and 1,280 pixels wide. So,
around 800 pixels is a good rule of thumb for the maximum width of
your images (and your web pages too, but we'll get to that in a later
chapter).
Q: How do the number of pixels relate to the size of the
image on the screen?
A: A good rule of thumb is 96 pixels to every inch, although with
today's high resolution monitors and retinal displays, it can go higher.
We used to use a standard of 72 pixels per inch (ppi), but to handle
modern displays, the concept of a CSS pixel has been created. The
CSS pixel is 1/96 of an inch (96 ppi). So for a 3” wide × 3” high image,
you'd use 96 (pixels) × 3 (inches) = 288 × 288 pixels.
Q: Well, how large should I make my images then?
A: In general, you want to keep the width of your image to less
than 800 pixels wide. Of course, you may want your images to be
significantly smaller (or somewhat larger) 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.
Q: I think my browser automatically resized the image of
Seattle, because it fits perfectly in the window. Why did my
browser do this?
A: Some browsers have a feature that resizes any image that
doesn't fit 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 did 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. And keep in mind that an increasing number
of people are viewing web pages on mobile devices, and large
images will impact data usage on these devices.

Here's a lot
of pixels that
together make up
the uppe r part of
the right wing of
the butt erfly.

This image is made up
of thousands of pixels
when it's displayed on a
computer screen.