Inline Images

Sr.No.
Topics
1

Image Size Attributes

2
 Aligning Images
3
 Alternate Text for Images
4
 Images as Hyperlinks
5
 Background Graphics
6
 Background Color
7
 External Images, Sounds, and Animations

 

Most Web browsers can display inline images (that is, images next to text) that are in Bitmap (BMP), GIF, or JPEG format. Other image formats are also being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes additional time to download and slows down the initial display of a document. Carefully select your images and the number of images in a document.

To include an inline image, enter: 

    <IMG SRC=ImageName>

where ImageName is the URL of the image file.

The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Filenames of Bitmap images must end with .bmp; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png.

Image Size Attributes

You should include two other attributes on <IMG> tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. (You can get the pixel size from your image-processing software, such as Adobe Photoshop. Some browsers will also display the dimensions of an image file in the title bar if the image is viewed by itself without an enclosing HTML document.)

For example, to include a self portrait image in a file along with the portrait's dimensions, enter: 

    <IMG SRC=first_img.gif HEIGHT=100 WIDTH=65>

NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browser developers think stretching/shrinking is a good idea, so don't plan on your readers having access to this feature. Check your dimensions and use the correct ones.