Images

WIDTH & HEIGHT

By supplying a WIDTH and HEIGHT tag to all the images on a page, you allow Netscape to immediately layout the page without having to wait for all of the images to arrive. This means that the document will be readable right away, while the images load.

If you give a WIDTH and HEIGHT that are innacurrate, the image will be scaled to those sizes. This can give some very interesting effects... Here's an example of the HTML for this:

	<IMG SRC="foo.gif" WIDTH=175 HEIGHT=214>

Here is a demonstration.

ALT Text

Many users on modems or other slow links turn off image loading so that they can see pages more quickly. By supply an ALT tag for your images, you allow users to see a text description of your image without seeing the image. This helps them decide whether or not they want to load the image. Sometimes you can also give ALT text that effectively substitutes for the image ("-----" might work when the image is a line, or "*" when the image is a bullet). Here is an example of the HTML for this:

	<IMG SRC="foo.gif" ALT="Woman sleeping in pudding">

Here is a demonstration. Before you view the demonstration, go to your Options menu and turn off Auto Load Images.

Interlaced GIFs

You have probably seen interlaced GIFs and may not have known what they were. An interlaced GIF is a regular GIF file, but the information is stored in a different order. Instead of presenting the image in order of line 1,2,3,4,5,6,7...100, the image is presented as: 1,5,10,...100,2,6,11,96...,3,7,12,97... The effect is kind of like a venetian blind: you see every fifth line of the image first, then more lines are added as the image arrives.

How do you make an interlaced GIF? The only way I know how to do it is on a unix box. Jamie wrote a shell script that uses giftrans (1.11.1), giftoppm (any version), and ppmtogif (netpbm 1). If you want the script, you can have it. I wish I could be more helpful.

Here is a demonstration. Before you view this, leave Auto Load Images OFF, so that you can load images as you want rather than all at once.

Once you've viewed this demonstration, these images will be in your cache, so you won't be able to view it again unless you clear out your cache. This is really a feature...

2-Pass images

Netscape gives you the option of supply a LOW and HIGH source for a file. This allows you to use HTML to specify two files to download. The first, a low quality image (say, a very small and poor JPEG image) is downloaded first. The second, a higher quality (high quality JPEG or GIF), is downloaded when the first is done. Here is the HTML example:

	<IMG LOWSRC="foolow.jpg" SRC="foo.jpg">

To make a low quality JPEG, use your JPEG editor (Photoshop, whatever) and save it out with the lowest quality setting possible. This will be a really small file that will download fast.

With a little imagination, you could have two slightly different images and make some interesting effects...

Here is a demonstration. Leave Auto Load Images off.

One of my favorite examples of this is used throughout the Realist Wonder Society pages. Look all around: you're seeing 2-pass images.

Transparent GIFs

Transparency allows your GIF to be "cut out" over the background, rather than being rectangular. This can give the picture the appearance of floating on the background. And no, you cannot make transparent JPEGs.

There are tools to make a transparent GIF on the Macintosh. I'll have more info on them here, at another time.

Here is a demonstration. I use backgrounds, so you'll believe it's working!

ALIGN and BR

Soon to be covered.

Progressive JPEG

Progressive JPEG files are a new image format: it uses the same compact image format as a old (sequential) JPEG file, but the information in the file is stored in stages, with very low quality information first, moving up to high quality information. Thus, as the file is loaded, it comes more and more into "focus".

Progressive JPEG is subjectively faster. Why? JPEG is already faster than GIF because its file size is so much smaller when the image is compressed. Progressive JPEG is about the same size as sequential JPEG, but the user can recognize the image well before the file is completely displayed.

The cool thing to look at is: how many passes does it take before I can recognize this thing? Pictures and photographs work more quickly than do images with text (like a typical image map).

• foo
• Example 1: Hagan in a Jeep
• Example 2: Hagan in her Cabrio (are you noticing a trend here?)
• Example 3: Netscape's Banner (I love bucking tradition)

To make a JPEG image into a progressive JPEG you can use scripts available on Unix:

      jpegtran -progressive original.jpg > new.jpg

And more...

Soon to be covered.