Displaying Images On A Web Page

HTML



 WHAT'S NEW 
 HTML FORUM 
 SITE MAP 
 REQUEST HELP 
 TRADE LINKS 
 FREE LINKS PAGE 






WEBMASTERS
Earn Money
Per Click!




SmallDot.com


BraveNet


TrafficSwarm


Submit9000


CodeBrain


Color Schemer


FlashBanger


123TurnKey.com


Web Page Templates


Dynamic Drive


Javascript Source


Javascript City


Javascript Kit


JavaPowered


FreewareJava
Home
General
HTML
Java Applets
Javascript
Wizards
Contact


The Html Help Guide


Images



Image Types

Of the several image types that are used in web pages, there are only two that you should consider using. The jpg and gif image formats are the most common and are read by virtually all browsers.

A gif image can contain a maximum of 256 colors and is better suited for line art and animations. A jpg image can contain millions of colors and is better for high quality images and photographs. A jpg can also be compressed for faster load times.

IMPORTANT: Keep in mind that any and every image that you display on your page must be downloaded by a browser before it can appear. A 300 kb image can take over 20 seconds to load (depending on the viewers connection) and this doesn't include the load time of anything else on the page. Most visitors to your page will not wait around for more then 15 seconds. They will move on to another site and your image will seldom be seen. So keep your images small in size and in numbers.


Acquiring Images

Downloading
Most images used on web pages are downloaded from the web. You can find about any type of image you want at the many free graphics sites. Also, many images are "borrowed" from other web pages. Before you decide to go download a bunch of images you should create a folder on your hard drive and name it "Images" or perhaps "Graphics". This will give you a location to download to and make finding them much easier later on.

To download an image of of a web page you will "Right Click" on the image and select "Save Image As" from the menu. When the download window appears you will browse to the folder that you made, double click on it, and then click the Save button.

Creating Your Own
If you have graphic editing software such as PhotoShop or Paint Shop Pro (my favorite), you can create you own graphics to use on your pages. Just be sure to save them to your "Images" folder in gif or jpg format.

Scanning Images
Images that are scanned for use on web pages do not need to scanned in as high a resolution as images that are to be printed. You should set you scanner to scan at 72 dpi and True Color for Photos or 72 dpi and 256 Colors for line art objects. Save your images in either gif or jpg format to your "Images" folder.

Image Tags
The basic image tag required to have the image appear on your page is:
<img src="image.name">

You should always use a full image tag that will give you some control over the image attributes.
<img src="image.name" width="xx" height="xx" border="0" alt="">

Find the images's width and height by looking at the "Image Information" while viewing the image in your graphics editor or viewer. Adjusting these attributes in the image tag will change the size that the image will appear in a browser. Maintain an image width to height ratio to keep the image looking normal. (Altering the image size in this way can cause the image to look distorted. You are much better off resizing the image with a graphics editor)

The border="0" will stop the blue border that sometimes appears around images. If you want the border, it's size can be adjusted with this.

Between the quotation marks of the alt="" is where you should put either the name of the image or the name of the link (if it is being used as an image link). This will show up in the image area in browsers that don't support images or are set to not show them.

Aligning Images
There are quite a few ways to align your images in relation to text and other images. Probably the best, and most widely used among web page designers, is tables. (But that will be another help page altogether.)

An image tag alone will align to the left of the page by default. And any text that follows the tag will begin at the bottom of the image.

Adding align="left" to an image tag will align the image to the left and any text immediately following it will start at the upper right of the image and then wrap at the bottom.

Adding align="right" to an image tag will align the image to the right and any text immediately following it will start at the left of the page, stop at the image, and then wrap at the bottom.

To simply center an image on the page:
<center><img src="image.name" width="xx" height="xx" border="0" alt=""></center>

To line up several small images across a page just place the tags together and enclose them with the CENTER tags.
<center><img src="image.name" width="xx" height="xx" border="0" alt=""><img src="image.name" width="xx" height="xx" border="0" alt=""><img src="image.name" width="xx" height="xx" border="0" alt=""></center>

To separate the images some you can use the &nbsp; character. Each one of these will insert one character space.
<center><img src="image.name" width="xx" height="xx" border="0" alt="">&nbsp;&nbsp;<img src="image.name" width="xx" height="xx" border="0" alt="">&nbsp;&nbsp;<img src="image.name" width="xx" height="xx" border="0" alt=""></center>




Join the Html Help Guide mailing list
Enter your email address.
Subscribe    Unsubscribe