You can call them what you like - pictures, photos, images or graphics. Whatever you call them you can add interest to your page with well chosen images. Just don't overdo it as too many or too large images will slow down the loading of your page. The image file extensions browsers recognize are gif and jpg. Let's take a look at the image tag:

   <IMG SRC="image.gif">

Confused? The translation is simple - the IMG stands for image, the SRC stands for source, so it follows that the source of the image is the location of that image, usually a folder in your hard drive.

Inside the quotation marks, type in the actual name of the file and extension, which in this case, will be in the same folder as the HTML file. Ideally, you should also include the dimensions (width and height) and an ALT tag for those with graphics turned off. Hover your mouse over the image and the file name will appear - this is the ALT tag. (This doesn't work in all browsers.)

Example:<IMG SRC=" sun.gif ">

If you want to put a comment or describe an image, you can put text around your image like this:

This is a picture of the sun

Notice that the image is centred and the text is CENTERED on the image.To do this you use the ALIGN tag. So the code for all this would be:

<CENTER>
This is a picture
<IMG ALIGN="center" SRC="sun.gif" WIDTH=124 HEIGHT=125 ALT="sun. gif">
of the sun
</CENTER>

I have spread this out to make it easier to see, but it can all go on one line.

USING A SUB-FOLDER

If you have only a few image files you can keep them all in the same folder as your HTML files, but if you have a lot you may prefer to keep them in a sub-folder. In that case, the reference must point to that folder. Because all the image files in this programme are in a folder called "images", the actual reference to the sun image is this:

<IMG SRC="images/sun.gif" ALT="sun. gif" WIDTH=124 HEIGHT=125 BORDER=0>

In the last bit of code you will see <WIDTH=124 HEIGHT=125>. These are the dimensions of the image. It doesn't look like a rectangle but because its background is white (or transparent) and the page is white, you can't see it.

Here are two identical images, one with a coloured, non-transparent background, and the other with a transparent background:

             

You can see clearly from this that the irregular shape is really set inside a rectangle or square. (You can only have transparency in gif images.)

If you include the dimensions for all your graphics the browser will create "holders" for your images before loading them. This can speed up loading the rest of your page considerably. Each browser handles image files in its own way, though the differences are minor.

An animated gif (graphic file) like the one below is treated exactly the same way using dimensions and alt tags. Keep them small as they can be much slower to load than static images. Some may have dozens of images to produce the animation effect.

ALT TAG

The other bit of code is the ALT TAG, for example, <ALT="sun.gif">. This is helpful for people with their images turned off for faster loading pages. If you put in the actual file name of the image, it is also useful as a reminder to yourself.

THUMBNAILS

I'm sure you've all experienced the World Wide Wait! Staring at a blank screen and waiting and waiting for large images to load. If you are about to put your family album or holiday shots on a web page, your visitors will probably give up after the first minute or so of waiting for something to appear. (If you are fortunate enough to have a super fast connection this will not apply.)

This is where thumbnails are handy. What is a thumbnail, you ask? Simply a smaller version of that 2345 x 1234 pixel photo of the panoramic view from your holiday cottage. So instead of several huge pictures we can put several little ones, each linked to its own web page where it can be displayed in all its full glory.

OK, how do we get thumbnails? If you already have Photoshop® or a similar programme it's easy to resize and save for the web.

Or you can use one of two completely free and simple methods. The first of these is to change the dimensions of the photo, ie the WIDTH and HEIGHT parts. So for a JPG file, 1000 x 2000, you could make the width and height respectively 100 x 200, or smaller. You must keep the same ratio of width to height so you might have to dig out your calculator to get the sums right. With this method the file size is the same as the original but you only need one file.

Another method is to use IrfanView. This clever little programme is much more than a simple image viewer; its wonders are too many to enumerate here. And best of all, it is FREE and the link is on the Downloads page. It will create Thumbnails for you and can also create a web page containing them. See thumbnail examples here. I will leave you to investigate all its wonders, but you can resize your photos in the blink of an eye.

There are also various programmes around to compress your jpg files. Try a web search for free or shareware versions. Try JPEG Optimiser, which is shareware. The web address is is on the Tips page.

IMAGE PLACEMENT

The images below are a North Queensland cassowary and African elephants. To see a larger version of the cassowary and some info about this amazing bird, click the image. Although this is not exactly a thumbnail it serves a similar purpose.

                   

To place images side by side, you can use a table (but we haven't got to that lesson yet) or just load them one after the other with non-breaking spaces between them. Or run them without the spaces if you prefer. Here is the code for two images side by side using non-breaking spaces:

<IMG SRC="image1.jpg" WIDTH=80 HEIGHT=100 ALT="image1.jpg"></A>
&nbsp;&nbsp;&nbsp;&nbsp;
<IMG SRC="image2.jpg" WIDTH=80 HEIGHT=100 ALT="image2.jpg"></A>

You will need to create a new web page to link to each of the larger versions of your photos or graphics. It only needs to be a simple web page containing the larger image. Make sure you include a link to get back to the original page. The first thumbnail image above was linked to a new page for viewing at a larger size.

Help
Copyright ©1998-2008 OzWebWeaver.