| |
Graphics
Files and Locations
Any
graphic file should only appear in one location on the site. If
your site has a hundred pages in a hundred different folders (which
it shouldn't--ten folders might be appropriate, based on category),
and each page has a graphic link for "About Us," that
graphic should exist as a single version in a single location. If
it exists in one location, the browser downloads it once, no matter
how many pages a person views. If it exists in a hundred different
locations, every time a person goes to a new page, the browser will
have to download the file again. The difference in speed when going
from page to page is huge, not to mention the added load that redundant
graphic files put on our servers and bandwidth.
Example:
This Web Tips site has several sections, as you can see in the left-hand
navigation bar: HTML etc., Email, Dreamweaver Tips, Graphics, Miscellaneous,
and Search Engine Tips. Most sections have their own folders: /email/,
/dreamweaver/, /graphics/, /misc/, and /search/.
Go to any page in any section, and if you view the GRAPHICS navigation
button on the left-hand side (Netscape: right-click, View graphics-a.gif;
Explorer: right-click, Properties), you will see that each page
uses the image http://caheinfo.wsu.edu/webtips/images/nav/graphics-a.gif
Whenever
a page is downloaded from my site, the browser knows it needs to
display the http://caheinfo.wsu.edu/webtips/images/nav/graphics-a.gif
file. If it has downloaded this file once, it will not download
the file again for any other page. It will simply use the version
of this file that is stored in its memory, or cache. The browser
can much more quickly display an image in the cache vs. downloading
the file.
If
I had an images subfolder in each category folder (email,
dreamweaver, etc.), and there was a copy of graphics-a.gif
in each of these folders, the browser would have no way of knowing
that they were identical files. For each section of the site, the
browser would have to download a new file.
Let's
do some math here: Seven navigation buttons, plus a roll-over image
for each. That's 14 graphics. One graphic for the site identifier
zone , plus a background graphic. Not to mention three spacer graphics
that you don't really notice. That's 19 graphics that need to be
downloaded for the first page (plus any additional graphics unique
to any particular page). If I'm using the same graphics in the same
location for my other pages, I've just saved my visitors the trouble
of downloading another (and another and another) nineteen graphics
for each page. If I'm using graphics in a unique location for each
page, I am, to put it gently, needlessly degrading the Web browsing
experience through temporal elongation, while overloading server
storage space and responsiveness.
Should
you have a number of sub-folders for your images? Well, the astute
among you have already noticed that I do. My image http://caheinfo.wsu.edu/webtips/images/nav/graphics-a.gif
is in the "nav" sub-folder of the "images" folder.
For the sake of organization, I have placed all of my navigation
buttons in the nav subfolder, while using the parent folder,
images, for all other graphics (such as my site identifier
zone: http://caheinfo.wsu.edu/webtips/images/webHead.gif).
There are times you may wish to thematically organize your images
in separate sub-folders, particularly as site size increases. But
you should still follow the rule: One image in one location only.
|
|
Have
a Web
question?
Ask
Bob
Hoffmann
|
|
