HTML IMAGES

Images

<IMG SRC="images/rainbow1.gif" HEIGHT=200 WIDTH=200> it's as simple as this.
You don't even need to put in the HEIGHT/WIDTH part but that may mean the page is changing as images load up as by declaring a HEIGHT/WIDTH you are effectively booking the space so even if the image can't be found the page will look the same.
if you'd like a border around it just add BORDER=1 or whatever as with
<IMG SRC="images/rainbow1.gif" BORDER=1 HEIGHT=200 WIDTH=200>

On the left is a gif 3148 bytes
On the right is a jpg 10933 bytes

Both are the same picture but jpg or jpegs use 16 million colours and the gif a mere 256. So if your showing diagrams a gif should be fine where as with photos a jpg will give better colour quality.

On the left is a gif 1087 bytes
On the right is a jpg 10481 bytes

Both are the same picture as the ones above except they've been rotated but because image info is read as changes across the page in the case of the gif it's a third of the size of the original.

On the left is a gif 1087 bytes
On the right is a gif 1116 bytes

Both look the same but the one on the right is an interlaced gif which on loading appears blurred and regenerates until a sharp image appears, this can be an advantage with large images where people might not think anything was there and move on.

Thumbnails
On the left is a gif 1087 bytes
On the right is a gif 279 bytes

Both look the same but the one on the left is a 200 x 200 image squeezed down using the width=50 height=50 commands and the one on the right is a 50 x 50 copy of the one on the left. so what's the point the 279 bytes image will load far quicker and if you have a lot of thumbnails/buttons or whatever it could mean a long time.

Images can also be used as background in the BODY TEXT section (see below)

<BODY TEXT="#000000" BGCOLOR="#FFFFCC" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000" BACKGROUND="images/thumb.gif">

but be careful a bright or complex images may mean no-one can read your page!

This is an animated gif file 4007 bytes and is made up of 11 gif files in this case, which have been put togeather by a gif animation package of which there are loads. It's called in as any other image, nothing special.

Finally remember when using images if they are too large people won't wait around if you have an image you think people will want to see in it's high definition form give them the option of downloading it. Also some people still only use 256 colours so if they see images with more colours they'll see awful picture of weird colours.

<IMG SRC="images/rainbow1.gif" title="your title message here" alt="your ALT message here" HEIGHT=200 WIDTH=200>
now when you pass your cursor over the image a message should pop up
title ="your title message here" alt="your ALT message here" get the browser to display text when your cusor moves over it. ALT was incase you don't have pictures switched on you get the alt message "this is a picture of a button" whatever but generally it's used to say "click this to do something" which has been fine until lately when it doesn't work with newer browsers so you have to use title="whatever" you can put in both only one seems to work depending on your browser. But I guess you'd have to take the line that the title command is the newest so just use that.

Source Code
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META NAME="Author" CONTENT="nik">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.05 [en] (Win16; I) [Netscape]">
   <TITLE>Images</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFCC" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
<H6>
<SCRIPT language=javascript>document.writeln(" last updated " + document.lastModified);</SCRIPT>
</H6>
<CENTER><FONT SIZE=+4>Images</FONT></CENTER>
 
<BLOCKQUOTE><IMG SRC="images/rainbow1.gif" HEIGHT=200 WIDTH=200> <FONT SIZE=+1>it's
as simple as this.</FONT>
<BR><FONT SIZE=+1> </FONT>
<BR><FONT SIZE=+1>    You don't even need to put in the
</FONT>HEIGHT/WIDTH<FONT SIZE=+1> part but that may mean the page is changing
as images load up as by declaring a </FONT>HEIGHT/WIDTH<FONT SIZE=+1> you
are effectively booking the space so even if the image can't be found the
page will look the same.</FONT>
<BR> 
<BR> <FONT SIZE=+1>if you'd like a border around it just add </FONT>BORDER=1
or whatever <FONT SIZE=+1>as with</FONT>
<BR><FONT SIZE=+1> </FONT>
<BR><IMG SRC="images/rainbow1.gif" BORDER=1 HEIGHT=200 WIDTH=200>
<BR><FONT SIZE=+1> </FONT>
<CENTER><TABLE BORDER=0 CELLSPACING=10 WIDTH="96%" >
<TR>
<TD><IMG SRC="images/rainbow1.gif" HEIGHT=200 WIDTH=200></TD>
<TD><FONT SIZE=+1>On the left is a gif 3148 bytes </FONT> 
<DIV ALIGN=right><FONT SIZE=+1>On the right is a jpg 10933 bytes</FONT></DIV>
<DIV ALIGN=right><FONT SIZE=+1> </FONT></DIV>
<CENTER><FONT SIZE=+1>Both are the same picture but jpg or jpegs use 16
million colours and the gif a mere 256. So if your showing diagrams a gif
should be fine where as with photos a jpg will give better colour quality. </FONT></CENTER>
</TD>
<TD><IMG SRC="images/rainbow1.jpg" HEIGHT=200 WIDTH=200></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><IMG SRC="images/rainbow2.gif" HEIGHT=200 WIDTH=200></TD>
<TD><FONT SIZE=+1>On the left is a gif 1087 bytes </FONT> 
<DIV ALIGN=right><FONT SIZE=+1>On the right is a jpg 10481 bytes</FONT></DIV>
<DIV ALIGN=right><FONT SIZE=+1> </FONT></DIV>
<CENTER><FONT SIZE=+1>Both are the same picture as the ones above except
they've been rotated but because image info is read as changes across the
page in the case of the gif it's a third of the size of the original. </FONT></CENTER>
</TD>
<TD><IMG SRC="images/rainbow2.jpg" HEIGHT=200 WIDTH=200></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><IMG SRC="images/rainbow2.gif" HEIGHT=200 WIDTH=200></TD>
<TD><FONT SIZE=+1>On the left is a gif 1087 bytes </FONT> 
<DIV ALIGN=right><FONT SIZE=+1>On the right is a gif 1116 bytes</FONT></DIV>
<DIV ALIGN=right><FONT SIZE=+1> </FONT></DIV>
<CENTER><FONT SIZE=+1>Both look the same but the one on the right is an
interlaced gif which on loading appears blurred and regenerates until a
sharp image appears, this can be an advantage with large images where people
might not think anything was there and move on.</FONT></CENTER>
</TD>
<TD><IMG SRC="images/intrain2.gif" HEIGHT=200 WIDTH=200></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD>
<CENTER><IMG SRC="images/rainbow2.gif" BORDER=0 HEIGHT=50 WIDTH=50></CENTER>
</TD>
<TD>
<CENTER><FONT SIZE=+2>Thumbnails</FONT></CENTER>
<CENTER><FONT SIZE=+1> </FONT></CENTER>
<FONT SIZE=+1>On the left is a gif 1087 bytes </FONT> 
<DIV ALIGN=right><FONT SIZE=+1>On the right is a gif 279 bytes</FONT></DIV>
<DIV ALIGN=right><FONT SIZE=+1> </FONT></DIV>
<CENTER><FONT SIZE=+1>Both look the same but the one on the left is a 200
x 200 image squeezed down using the width=50 height=50 commands and the
one on the right is a 50 x 50 copy of the one on the left. so what's the
point the 279 bytes image will load far quicker and if you have a lot of
thumbnails/buttons or whatever it could mean a long time. </FONT></CENTER>
</TD>
<TD>
<CENTER><IMG SRC="images/thumb.gif" BORDER=0 HEIGHT=50 WIDTH=50></CENTER>
</TD>
</TR>
</TABLE></CENTER>
<CENTER> </CENTER>
<CENTER><FONT SIZE=+1>Images can also be used as background in the BODY
TEXT section (see below)</FONT></CENTER>
<CENTER> </CENTER>
<BODY TEXT="#000000" BGCOLOR="#FFFFCC" LINK="#0000EE" VLINK="#551A8B"
ALINK="#FF0000" <FONT COLOR="#FF0000">BACKGROUND="images/thumb.gif"</FONT>>
<BR><FONT SIZE=+1> </FONT>
<CENTER><FONT SIZE=+1>but be careful a bright or complex images may mean
no-one can read your page!</FONT></CENTER>
</BLOCKQUOTE>
<BLOCKQUOTE>
<CENTER> </CENTER>
<TABLE BORDER=0 CELLSPACING=10 COLS=2 WIDTH="96%" >
<TR>
<TD>
<CENTER><IMG SRC="images/animate.gif" BORDER=0 HEIGHT=200 WIDTH=200></CENTER>
</TD>
<TD>
<BLOCKQUOTE><FONT SIZE=+1>This is an animated gif file 4007 bytes and is
made up of 11 gif files in this case, which have been put togeather by
a gif animation package of which there are loads. It's called in as any
ofter image, nothing special. </FONT></BLOCKQUOTE>
</TD>
</TR>
</TABLE>
<CENTER><FONT SIZE=+1> </FONT></CENTER>
<CENTER><FONT SIZE=+1>Finally remember when using images if they are too
large people won't wait around if you have an image you think people will
want to see in it's high definition form give them the option of downloading
it. Also some people still only use 256 colours so if they see images with
more colours they'll see awful picture of weird colours.</FONT></CENTER>
<CENTER></CENTER>
<CENTER><A HREF="../index.htm"><IMG SRC="../but_home.gif" ALT="Back to Omni-Web Page" BORDER=0 HEIGHT=32 WIDTH=128></A><A HREF="index.htm"><IMG SRC="../but_htm.gif" ALT="Back to Omni-Web Page" BORDER=0 HEIGHT=32 WIDTH=128></A><A HREF="mailto:htmlcode@enquires.f9.co.uk"><IMG SRC="../but_eml.gif" ALT="Email Us" BORDER=0 HEIGHT=32 WIDTH=128></A></CENTER>
<CENTER><FONT SIZE=+2> </FONT></CENTER>
<CENTER><FONT SIZE=+2>Source Code</FONT></CENTER>
 </BLOCKQUOTE>
</BODY>
</HTML>

	On the left is a gif 3148 bytes On the right is a jpg 10933 bytes Both are the same picture but jpg or jpegs use 16 million colours and the gif a mere 256. So if your showing diagrams a gif should be fine where as with photos a jpg will give better colour quality.

	On the left is a gif 1087 bytes On the right is a jpg 10481 bytes Both are the same picture as the ones above except they've been rotated but because image info is read as changes across the page in the case of the gif it's a third of the size of the original.

	On the left is a gif 1087 bytes On the right is a gif 1116 bytes Both look the same but the one on the right is an interlaced gif which on loading appears blurred and regenerates until a sharp image appears, this can be an advantage with large images where people might not think anything was there and move on.

	Thumbnails On the left is a gif 1087 bytes On the right is a gif 279 bytes Both look the same but the one on the left is a 200 x 200 image squeezed down using the width=50 height=50 commands and the one on the right is a 50 x 50 copy of the one on the left. so what's the point the 279 bytes image will load far quicker and if you have a lot of thumbnails/buttons or whatever it could mean a long time.