Images
There are all sorts of things you can do when including images in your
document, from clever alignments, to tips and tricks to maximizing the
speed of your page.
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
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
Of course there's just no way that you're going to have this script on
hand in the near future (I'm sure there will be a list of programs
that make these soon). When I know more, I'll let you know.
And more...
Copyright © 1995
Hagan Heller.
The information on these pages may be freely copied, so
long as they are not sold and this copyright information is included.