Reuse Graphics within Graphics
Often different graphics share certain components. Reusing these components creates a faster page.
The idea of using graphics on more than one page can be extended beyond the background or menu graphics discussed in the Using Cache section. In addition to reusing whole graphics, you can also reuse pieces of graphics on more than one page and in more than one graphic.
For example, if you have a company logo or title graphic that serves as the header for sections of the company's Web site, it is common to change only part of the graphic to reflect the particular section that it is labeling, as shown in this illustration:
Title graphic for page about history:
Title graphic for page about materials:
|NOTE: The two graphics are identical except for the words "history" and "materials."|
You could make many different versions of the complete logo or title graphic, using your graphics tool to build and save each full illustrationbut there's another approach. Put the idea of reusing pieces into practice and you'll notice that there is only part of the image that changes, the section name. If we break the logo into two distinct pieces, one for the part that does not change and one for the part that is different on each page, we can reuse the unchanging part. The reused part will be in the memory cache on the user's browser, and it will appear to load very quickly on the page.
|This part does not change
||This part can be changed for each page.|
Use the layers palette in Fireworks or Photoshop to create the pieces, so that they are correctly sized and aligned to match with each other. Turn off all but the layers you need for one set of pieces and use the guides to determine where each piece begins and ends. In Fireworks use the slicing tool to highlight the areas of the graphic you want to export. In Photoshop crop, save a copy, and revert to create the different pieces.
Layer for "materials" is not visible. "History" is part of the background layer:
Layer for "materials" is visible:
When you break a graphic into two or more pieces it is important that you have them correctly reassembled on the page. Carefully check the HTML to make sure there are no extra spaces between the graphic pieces.
|Extra space prevents the two images |
|Remove the space and the result is identical|
to the original uncut graphic:
Pre-loading graphics is a way of getting the graphic files into the reader's cache before they go to the page in which the graphic apprears.
Preloading graphics is another technique that can increase the perceived speed of your Web site. It is similar to the magician who redirects your focus to his right hand while his left hand is pulling a quarter out of your ear. With pre-loading, your readers don't notice a graphic loading because it happens while their attentions is elsewhere.
To make use of the preloading technique, you put the image files for graphics you want to pre-load into an earlier page in the Web sitetypically one that the reader will be spending time looking at and won't notice something downloading in the background. Tuck in the image tags at the end of the file.
The trick here is you resize the width and height attributes of the preloading to one pixel by one pixel:
<img src="largegraphic.gif" height=1 width=1 alt="">
The files for the graphics will download but be too small to appear on the screen, effectively making the process invisible. However, since they are downloaded, they will be saved in the cache and when the reader requests a page on which the graphics are displayed they will fly into place.
While you were reading this page, you were also pre-loading a 21K graphic! Visit the page that contains the graphic and see how it just pops into place
Save common elements in their own files, and reuse these files to save download time.