| |
Resizing
graphics: Enter the Second Dimension
So,
you have a graphic that's, say, a million pixels wide by half a
million pixels high. How can you resize this graphic quickly and
easily for your Web page? One way discovered by creative Web Weavers
is by taking advantage of the HTML IMG tag's HEIGHT and WIDTH attributes.
Instead of accurately representing the correct size of the graphic
(<img src="graphic.gif" width="100000000"
height="500000">), you can force the Web browser to
display the graphic at a reduced size of, say, 200 by 100 pixels
(<img src="graphic.gif" width="200" height="100">).
Don't Do
It.
Don't
do the crime if you can't do the time. In this case, doing the crime
is providing a graphic that is larger than the page displays. The
time, literally, is the duration required to download this excessive
graphic. There are also aesthetic sins associated with this technique.
I have illustrated this problem with the below graphics:
The
above is the WSU logo, 360 pixels wide by 104 pixels high. These
dimensions are also used in the HTML, so the graphic displays properly.
The
above is the same graphic (check the source code for proof!). The
HTML code lists the height properly (104 pixels), but I have forced
the browser to narrow the image by assigning a width of 260. Compared
to the previous graphic, the distortion is obvious.
The
above two images are set at the same dimensions (180x52). You will
notice a slight distortion in the first image, while the second
image has smoother lines. The first image is the same graphic as
was used in the previous examples (actual size: 360x104). The height
and width were reduced proportionally, so the width-to-height ratio
is correct even though it is not displayed at the original size.
The second image was created by resizing the first image with Photoshop.
It is displayed here at its full size. A clean display is not the
only benefit. The larger image is 14K, while the reduced image is
only 7K, half the size. A better graphic at half the size? That's
a win-win situation.
The
lesson? Browsers and HTML are not substitutes for the use of
an image processing program for resizing your graphics.
What
is the best size of graphic to use in your WSU Web template?
See
the Grid! |
|
Have
a Web
question?
Ask
Bob
Hoffmann
What
is the best size of graphic to use in your WSU Web template?
See
the Grid! |
|
