Terry's Pictures     click 1969

---

Return to: Terry Page   or to: Fox Den
About this Page : TerPics.html - Terry's Pictures Page
Last updated on Feb 24, 2005  
E-mail comments to
URL:   www.foxdenpenn.com/terpics.html

---

Images are easy to display, once they are in dot GIF or dot JPG form.
Typically, GIF are used for drawings and JPG for photos.
Even old scrapbook pictures can be scanned.  Then cropped to
a better size and edited to restore contrast after all
the years.  An important point is to compress the pictures for
speed of loading on a web page.  These JPG are compressed 32:1 with
no loss in detail.  The trick is to find the proper degree of
compression.  Carolyn's niece twice in one week sent uncompressed
Baby Pictures that took one-hour-each to download.  You'll notice
that these pictures are smaller and compressed and display quickly.

The image tag can be as simple with only one option to tell the
source.  More options are suggested.  Here is the simple form.
	<IMG SRC=path/picname.jpg>
	<img src=img/p04mo.jpg>
Where img is a folder under the folder you are in / picture name.
I put that folder there on the internet service provider.
	http://www.foxdenpenn.com/img/p04mo.jpg
Other options that should be included in an image tag.
Display some alternate words to describe the picture:
	a)  while it is loading so user has an idea what to expect
	b)  tell smart users who browse with "images off" to read
	only text and who display images only when interested,
        by clicking on them.
		<IMG SRC=img/p04mo.jpg ALT="Peg 4 mo">
Specify size of image.  This is NOT to resize the image.  Although
your browser can do that, it is a waste of YOUR READERS downloading
TIME.  Resize the picture in your photo software and record the
size in the IMG-tag to tell the browser how much space to reserve
as it is downloading text.  You have, no doubt, seen web pages where
the whole page repositions itself as the images are loaded.  This
waste of browser time is because there was no sizes given.  The
pictures here are not resized, I simply recorded the height and
width from the cropping software to put into the image tag as:
	<IMG SRC=img/p04mo width="445" height="220" alt="4 mo">
The default unit of measure is pixels.  You could specify inches,
mm, etc.
These pictures should be resized to allow better fit side by side,
but you never know how the reader's browser is set up, so you just
do your best.

Quotes in options are required if there are embedded spaces "4 mo"
and a good habit otherwise, "445".

More advanced topics, you haven't learned how to link yet, but:
1. Miniatures are often displayed to save download time and the reader
can click on the image to get a full size picture.  By default,
the miniature image is surrounded with a colored box.  To delete
that box, specify the option BORDER=0 within the IMG tag.  The
default border is 1.  You might have to specify that the miniatures
are clickable.
2. You normally click to get the full sized picture that replaces
the page you were on.  However, you can open the picture in a
separate window in two ways.  One allows dozens of windows to be open,
the other allows only ONE additional window, that must be closed
before the second will be displayed - hence a maximum of two open
windows in the browser session, the text page with the miniature and
one full sized picture.  The option is: TARGET="x" or TARGET="_blank"
The smarter option is TARGET="x" (where x is a dummy) so that the
user does not overload his PC with dozens of open pictures.
That can happen - my WW2PACIFIC pages of ship photos, for example.
Examples of all there options are on this page.  See the HTML
underneath any web page by VIEW; then SOURCE (in IExplorer, it may
be different icon/words in AOL Netscape).

Images can be transparent, which means that the background of the picture
allows the page color to come through, the image does not appear to
have a border.

Another, used for detailed pictures displays the image with increasing
detail. The whole picture is displayed in several passes,
rather than slowly from top to bottom.  The first pass is large dots
to give an idea of the picture, then the bigger dots get divided into
smaller dots with more detail on the second and subsequent passes.

All best,
Jim