Images, whether artwork or photographs, certainly can add to the visual appeal of a website.  Of course, their presence should not be overdone and should complement, not take away from the content.

 It is important to ensure that you indeed have either legal ownership or the permission of the author for any image that you place on your site.

It is also important to consider the size and the format of any image that you wish to place on your website. Excessively large images (in byte count) will load slowly and potentially cause your site to lose impatient visitors or those with a slow modem Internet connection.  

Generally,  there are four file formats currently in general use for presenting still images on the Internet.  

• One is the .gif format which should be used for artwork using 16 or less colors or photographs with few colors. The gif  format is generally the smallest in byte size of the available image formats.  

• Another popular format is the .jpg/jpeg format.  Jpeg files are normally used for photographs, though some artwork may be better suited for a jpeg file.  The jpeg file that you post to your site should be compressed by your photo editing software to ensure the minimum size.

• Less appropriate for the Internet are bitmap images (.bmp).  While the images may possess a better quality using this format, the size of the image is generally prohibitive for most web uses.

• A newer format being touted as the future image file format for the Internet is the .png (Portable Network Graphic) format.  However, I really haven't seen this in use much yet.

In addition to embedding images into your pages, you may want to specify a background image for your entire page if it is tasteful and not hard on the eyes.  We have all seen examples of web page background colors and or images which detract from the other content on the page, often making the text unreadable.  If you are using a background image for your site, normally it will be a .gif file though  a small bitmap (.bmp) file may also be used.

These pages use a very subtle .gif as the background, which consists of thin blue lines intersecting to create white squares.

Images are specified in HTML using the <img> tag which has various attributes, some of which it is desirable to always include.  The <img> tag uses no closing tag.  All the attributes of <img> are enclosed within the single tag as shown below.

Enjoy the images below which will demonstrate some points to consider when using graphics on your pages.

This HTML placed the image to the left on this page:

<img border="2"
src="images/life22.jpg"
width="423"
height="282"
hspace="20"
border="2"
alt="penguin tank"
align="left"/>

We used the <img> tag to first specify a border of 2 pixels.  The src attribute is mandatory and lists the path to the image file on the server.   Note that this photograph is a .jpg file which resides in a folder called images under the current directory.

 Also, determine the size of your image by right clicking the file itself in Windows Explorer and note its width and height from the properties tab.  The hspace attribute says to put a horizontal border of 20 pixels to the left and right of the image.  That way, the text to the right, did not hug the image, nor did the image abut the right margin.

The alt attribute is included for any browser which cannot display the image, instead the text inside the alt attribute will appear to advise the viewer what the image would have shown.  The alt attribute will also be revealed when the viewer hovers over the image with the mouse.

The align="left" attribute of course, left-aligned the picture leaving any space to the right available for text or other images.  The trailing /> closes the <img tag properly, so its attributes are clear to the browser.

Next, we will use a .gif file for our image.  All the rules are the same as for the .jpg image that we just saw.

    science.gif       

 science.jpg           

<img border="0" src="images/science.gif" width="187" height="198"
hspace="20" alt="science.gif" align="right"/>

I wish to reinforce the importance of properly sizing your images for your page area.  Below are two copies of the same image (I believe that is the "tubes" in London).  If you right click on the image itself on the left, you will see first that it is 57k in size.  If you right click on the image on the right, it is only 13k in size.  Yet they look almost the same.

  In the case of travel1.jpg, I placed that big image on the page and found that it was far too large for my limited area below.  So what did I do?  I changed the height and width attributes of the img tag to 50% each.  Wrong thing to do.  First it still takes up as much bandwidth to download.  Next, it "surprises" the browser when it downloads the image and is prepared to place it as is but then finds your width and height specifications and tailors it accordingly.  Problem is that it will render unprofessionally and is the inefficient thing to do when taking superior page loading time into consideration  Keep these statistics in mind:

"As of July 2003, most users in the US connect to the Internet using dial-up modems of 56Kbps or less. 51% use 56Kbps modems, 8.2% use 28/33.3Kbps, and 3% use 14.4Kbps modems. In total, 62.2% of home users in the US connect to the Internet at 56Kbps or less."  Thanks to websiteoptimization.com

Now with travel2.jpg, we did the right thing.  Realizing that the picture would be too big for our needs here, I took it into Microsoft^® Paint, went to Image|Stretch/Skew and reduced its height and width to 50% there.  Now it is the right size for the browser when downloaded from the site and is less than 1/4 of the size of travel1.jpg. 

travel1.jpg

travel2.jpg

Backgrounds 

Finally, we will consider the HTML syntax when using an image file as a background for our page (or in a table as we will learn later).  It's actually very simple.  At the start of the <body> tag, insert your background image location as so:  
<body background="images/WB02074_.GIF" >

This was the name of the clip art file that I chose for the background of these pages.

Previous Page

Next Page