|
Creating Composite Images
Premise: Not all Web browsers
are created equally. Not only do older browsers not support features found
in newer incarnations, but often support and/or interpretation of a given
feature will vary across Operating System platforms for a specific browser
and version. An example of the first, is the support of Image Maps. At the
same time, rendering large images can take unacceptably long, regardless of
its implementation on a Web Page.
Skill Development: There are a
number of methods by which both cases can be addressed. The simplest of
these is the use of a composite image —that is, creating a single,
large image out of smaller pieces. This lesson teaches this technique, and
also shows how it can be used to replace most kinds of Image Maps.
Rationale:Composite images offer
a number of benefits from the standpoint of page presentation. The smaller
elements which make up the entire image will download and render much
faster than a single, large image. This translates to a shorter wait for a
visitor before the page becomes useable. By further incorporating links
around individual components, it is also possible to build a navigational
structure that is fairly easy to maintain, and the components of which can
be maintained more readily than from inside an image map.
Requisites: A knowledge of the
application and use of HTML tables, the <a>,
<img> and <table>
tags is necessary for this lesson. Only a minimal amount of HTML Source
Code is provided.
STEP 1: Creating and preparing the Image
As odd as it may sound, the very first step in creating a composite image
is to create two images. The first is the actual image which will be used,
as it will appear in its final form, while the second will serve as a
template. The size of this template must coincide with the dimensions of
the first, or master image, as it will be used to as a guide for creating
the composite itself. The image used to illustrate this lesson (Fig.
1) was created for an actual Site proposal. It was designed to be a
masthead with embedded navigational elements.
To prepare the cutting pattern, the outline of a table is drawn on the
cutting template. Within that table, the individual cells are also laid out.
In both cases, the dividing lines should be one pixel wide. This is done for
two reasons: First, since the composite will be loaded into an HTML table,
this approach permits a visualization of how the end result will appear.
Second, the resulting structure will be used to size the HTML table.
The structure of the cutting pattern is determined by the master image. In
this instance, the logical structure is a five column split where the green
bar, the logo, and the navigation buttons all become individual elements.
Fig. 2 illustrates this cutting template. The structure of the
navigation area calls for the table to also contain three rows, but given
the shape of the image as a whole, this is not practical. Further, such a
structure would be extremely difficult to maintain in the long run.
An easier solution is to create another cutting template, this time for a
table composed of a single column, and three rows (Fig. 3). This
template is prepared in the same manner as the first, with the
"button" portion of the master image acting as the master image
for this template.
The two cutting templates are then turned into wireframe objects which will
be overlaid on the master image (without combining the three). The
lines of the wireframe are used as a guide for cutting the master image
into its individual components. Each of these components are saved as new
images and will ultimately make up the composite image. The wireframes are
no longer required, and can be discarded once the element images have been
created.
STEP 2: Preparing the HTML Code
Once the image elements that will make up the composite have been prepared,
it is time to generate the code that will render the composite. A composite
image must be placed inside a table. This simple device is the only
reliable way to give the appearance of a single, large, image.
The best method for building composites in this manner is to start on the
inside, and work outward. For example, if the table will contain nested
tables (such as in this lesson), then these should be created first.
Also, it is a wise practice to work on the entire composite with the
border= attribute set to 1. This is the best way to
spot-check and insure the desired effect is being produced. To avoid gaps
within and between cells, it is a requisite that the cellpadding=
and cellpadding= attributes be set to 0. Finally,
the table width should not be declared in the <table>
tag, but in the <td> tag. Declaring a
height value is optional, but not required when all cells in the same row
will only contain images.
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
</tr>
</table>
|
The result is a code skeleton which remains constant throughout the
composite, and looks similar to the one in Listing 1. Each cell
will contain a single element of the composite image. The cell's width (and
optional height) should correspond to those of the image that resides
within it, This particular sizing also helps to insure that there are no
unwanted gaps in the rendered result, stemming from the layout.
There is one external source for unwanted gaps in composite images, which
is a direct result of how certain browsers render HTML code. Namely, these
browsers insert a barely noticeable gap when a line break is encountered
immediately after a tag unit. To prevent this, it is necessary to place the
closing </td> tag immediately following the
image tag (<td></td> is a tag unit).
But that is not the only rendering quirk that must be accounted for. Some
browsers do strange things to spacing next to and below images unless they
are immediately followed by a line break (<br>)
tag!
It should be pointed out that most WYSIWYG editors are unable to account
for these situations because they only produce code that it is humanly
legible (and some even do that much poorly). Not that legibility is
unimportant or irrelevant, but when it comes to legibility vs. correct
rendering, the latter must always win. The easiest way to be sure it all
works as intended, is to code by hand and place the entire code block
(<td><img></td> on the same
code line.
For cases where an image doubles as a navigational device, the required
code should be added at this point, keeping it all on the same line if
possible. Depending on the complexity of the code, it may be possible to
split it into multiple lines, however the following rules should always be
observed if this is done:
- Never split anchor tags if they include an image link.
- Always follow images with a <BR>
tag if the image is not followed by text on the same rendered line
With these observations in mind, the demonstration code should now look like
this:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="100"><img src="lnk.gif" width="100"<br></td>
<td width="100"><a href="lnk.html"><img src="lnk.gif" width="100"></a><br></td>
</tr>
</table>
|
STEP 3: Putting it all together
Now that the basics have been established, the actual coding can begin. As
stated previously, the best coding method is to work from the inside out.
Based on the template created earlier (Fig. 1 and Fig. 2), the
sample composite is going to consist of one row of cells and five columns.
One of the cells will also contain a table, and it is this inner table that
will be created first.
The inner table consists of a single column split into three rows. After
creating this basic structure, the images are inserted into the cells. The
value of the width attribute of the image gets copied into the width
attribute of the cell, and if desired, the same may be done with the height
value. It is critical at this point to insure that the border=
attribute of the image is set to 0 so that it can blend seamlessly into the
final composite. Since this table will be used for navigational purposes, the
links tags may be added after verifying that the table itself renders in
the desired manner. The final result should look like Fig. 3. If it
does, then this object is complete. Note: The table border
remains enabled as a frame of reference.
Once the inner object is complete, the same techniques are used to create
the outer table. It consists of a single row split into five columns, and
is the master table. With two exceptions, this table gets populated in the
same manner as the inner table. Those exceptions pertain to the third and
fourth columns (cells), which are handled in a slightly different
manner.
Since the total height of the inner and outer tables may vary, the valign=
attribute has to be added to every <td>
tag of the master table. This will permit the elements to automatically
center themselves vertically in relation to the rest of the composite, as
needed.
The fourth cell will contain the object created earlier. The cell's
width= attribute will equal the width of the
object for a seamless fit. The result looks similar to Fig.
5:
The accepted rule of thumb is to always place images on a Web Page in their
natural size, and not to resize them by way of height=
and width= attributes of the image tag. However,
as with every rule, there are times they don't apply. In this case, it is
when an image is of a solid colour, or if it has a fixed pattern that does
not distort if the image is resized in one direction (eg. a stripe). For
these cases, it is acceptable to create a very small image, and resize
it as needed. The benefit of this technique is that it reduces the final
weight of the HTML document as well as the load-and-render time for the
entire Web Page.
This brings us to the second exception referenced earlier. The image which
fits in the third cell of the composite qualifies for this type of
treatment. To do so, the image element must be cropped with image editing
software and saved (remembering to back up your original!). The end result
in this instance, is an image that is one pixel wide and leaves its
original height unchanged.
When applying the image, the original width of the image element is applied
to the width= attribute of both the
<img> and <td>
tags. The first stretches the image to fit, while the second sets a
constraint on the cell.
It should be noted that most WYSIWYG editors will not allow this technique
without a fight, as they have a propensity for forcing images to their
natural size. As a result, this edit must be done manually. But, when done
properly, the end result will look like Fig. 6. You will note the
natural consistency of the image despite its being resized.
The last step in the process of creating the composite, is to turn off all
the table borders. This gives the finished product a seamless appearance,
as Fig. 7 illustrates.
STEP 4: Finishing touches
At this stage, all that remains is to optimize the images for the Web.
Optimization essentially consists of stripping out excess data from the
image. For example, a GIF image containing a total of 7 colours does not
require a 32, 64, 128 or even 256 colour palette. Removing the excess makes
perfect sense in such cases because the result will be a file that is
smaller in size. The smaller the file, the faster it downloads from the
server and renders in the Web Browser.
Even in today's world of broadband, optimization is important. A fast
loading Web Page is always the hallmark of high quality design with a
professional attention to detail.
Tips and Pitfalls
Always follow an <img> tag with a
<br> or other tag to avoid gaps.
Use line breaks carefully when working with a mix of images and text within
anchor tags.
If an image is a solid colour, or has a pattern that is fixed in a single
direction, it is acceptable to crop and stretch it,
Save bandwidth! Optimize images whenever possible.
|