Web images
The Louvre in Paris contains some of the world's most beautiful paintings. So does the
National Art Gallery in Canberra; the difference between the two is that the Louvre displays a collection
on the World Wide Web.
These pictures include low resolution versions of famous artworks that can be downloaded to your computer,
handed down through the generations, and called your own. How did they get there?
A group of tireless people photographed, scanned, converted and placed references to the images in HTML.
And you can do the same, although perhaps not with the Louvre collection - nor should you trot down to Canberra
and take snapshots of your favourite works.
But collecting art is not the hard part. There are thousands of images on the Web, and even more on CD-ROM
collections, both commercial and shareware. Converting these latter images into a useable format and learning
how to write an HTML script that includes the images is where the fun starts.
Image formats
The objective of any aspiring home page designer must always be to increase the desire of her visitors
to stay and read the contents. On the one hand, people expect lovely images, on the other they don't expect
to have to wait until the images load.
The images used on the Web serve a different purpose to those used for printing: they are for disp Images
used by print-based publishers are available as PICTs, EPSF and TIFFs. Unfortunately, none of these formats
can be used as is on a Web page.
So images need to be compressed and converted to a format that HTML understands and that other computers
can display: JPEG or GIF. They are also frequently interlaced for the web. An interlaced image is loaded
in stages: a low resolution version appears first with greater detail added with each pass. One of the advantages
of downloading an interlaced image is that if the visitor doesn't like the image, the download can be aborted.
Any image can be converted to one of these file formats: it's simply a matter of process.
For example, Adobe's ScreenReady converts EPSF images to PICTs. Other applications, like GraphicConverter,
convert a variety of image formats to GIFs or JPEGs. Or try a simpler application like PICTtoGIF to convert
PICT files or the clipboard contents to GIF files. Adobe Photoshop can handle a range of such image conversions,
and when the source material was first prepared for print, Photoshop has the added advantage that it can
convert between RGB, CMYK, Indexed and other colour and image models, and it has flexible controls for scaling
the image. Curiously though, Photoshop does not seem capable of creating GIFs as tiny as for example the
freeware Transparency does.
GIF (Graphics Interchange Format) is useful for small images such as thumbnail previews and for line
artwork. GIF images can also be interlaced. That means a low resolution version of the image is displayed
quickly, with the details added in stages as data is downloaded.
JPEG (Joint Photographic Experts Group) files are comparatively smaller than GIF images for the amount
of colour and resolution data contained in the files. As the name suggests JPEG is used to compress photographic
or continuous tone images, which it does with much greater fidelity than GIF.
JPEG suffers from a curious affliction known as "lossy compression". In simple terms, this
means that each time a file is compressed using the JPEG format, image data discarded. The higher the compression
factor, the greater the data that is removed.
So the choices seem fairly obvious: GIF for low resolution images, JPEG for high resolution, full colour
images. Sorry, nothing in the computer world is that simple.
My other name is an alias
One other important aspect of images used on the Web is called "antialiasing". You may recall
the bad old days before PostScript when printing bitmapped images meant jagged edges. The Web, to all intents
and purposes, is still caught in the pre-PostScript whirlpool. (Don't worry, though, Adobe and Netscape,
Apple and Microsoft are working on a solution.) That means images are displayed at the resolution of a monitor.
On a Macintosh monitor, that's fine; on other computers, it may not be.
To avoid the "jaggies" images are modified: their edges blurred so they appear smooth. There
are at least four options for antialiasing, depending on the application used: from rough to fine. Check
the options for your image application and compare results.
<IMG SRC = ?>
Publishing applications have given us WYSIWYG. HTML has taken it away. Inserting an image into an XPress
or PageMaker document means locating an image file, placing it on a page; perhaps adjusting its size, colour
and rotation.
Forget all that. The best you can achieve with HTML is image placement and resizing. You cannot view
the image while you work on it, unless you run your Web browser at the same time and update the page whenever
you make a change. If you want colour changes or rotation, you'll have to use a graphics application on
the image itself, outside of the HTML document.
Images are referred to with the base tag <img src = "image name">. That's fine for images
in the same folder as the HTML text. Images located in a different folder to the base text document have
to be referred to explicitly. An image in a lower folder than inside the current is tagged with <img
src = "FOLDER/Image name">.
An image in a higher folder is tagged with <img src = "../FOLDER/Image name">, where
the "../" tells the browser to go up one level and then into the named folder it finds there.
Altering the size and position of an image also needs specific coding. To horizontally centre an image
on a page use: <center><img src = "Image name"></center>.
Aligning an image to text uses a different construct: instead of placing the tag outside the <img
src => text, it is contained within. There are four main ways to align an image to text baseline,
top, middle and bottom and the tag is: <img src = "filename" align = middle>.
To resize an image use: <img src = "Image name" HEIGHT = value WIDTH = value>. The value
can be either a percentage or a fixed measurement. There is no need to calculate both the correct horizontal
and vertical scaling to maintain proportions: by specifying only the height or the width, the other dimension
will follow proportionately.
Using Netscape, you can view the current height and width of an image in pixels by clicking and holding
down "view image" - the dimensions are shown in the window header.
All aboard and away we go
OK. You've compressed, modified, antialiased and collected the images, so you might think you're all
set to start weaving them into the fabric of your page.
Not so fast!
How many images have you collected? How big is the full collection? Is it larger than 100K? If it is,
you may create other problems for your visitors.
In a web browser, if the "Autoload images" (or equivalent) selection is turned off, images
can be downloaded individually by clicking on each image. In most WWW layouts, loading pages without the
images will seriously mess up the intended look of the page.
On the other hand, if the user sets images to be downloaded at the same time as the rest of the page
information, there may be a sharp increase in the time to load - it might mean the difference between
loading 16K of text versus more than 100K of text and images, which may take minutes not seconds.
Yes, and even if you have interlaced them all.
What's the solution? Well, there are two: keep your image file sizes to the barest minimum, reserving
the large sizes for the most important images. And re-use as many images as possible on multiple pages.
Some images, like fancy buttons, background tiles, logos and horizontal rules can be repeated in a design.
When one is transferred, it is cached and re-displayed on subsequent pages. "Caching" means that
once an image is transferred the browser accesses it from the user's hard disk.
Written by Geoffrey Fletcher
Previous > Contents > Next
|
