HTML Basics: Images

In the previous article we have discussed about the image optimization to make efficient use of images in HTML web pages. This article is about the other areas associated with the uses of images in HTML web pages. So let’s start with the addition of images in our web pages.

Img tag

The “img” tag is used to insert images in the HTML web pages. This element has several attributes. We would be discussing specifically about the src attribute, the height attribute, the width attribute and the alt attribute. The deprecated align attribute would be discussed in brief.

The topic of image optimization really isn’t as crucial as it used to be. Use PNG format images for artworks and JPEG format images for photographs. But if you want to upload your photos from your digital camera and add them to your web page, then this task is important. Digital cameras save large, high-resolution JPEG or TIFF files. You should optimize these images before adding them to your web pages.

Consider the following code:

“<img src=”/path/aa.jpg” width=”100” height=”100” alt=”an image”/>”

The image element uses the <img/> tag to insert images into the web pages. Note, what you are really doing is providing your browser with a URL that points to the image file. The browser then retrieves the image from the location specified in the src attribute and renders the image in the specified location on the web page.

As stated previously, the image element has several attributes. Let’s discuss about the alt, src and height and width attributes. The alt attribute provides a short image description. The alt actually stands for the alternate. In case the image is not rendered properly, the text written as the value of alt attribute is displayed. The src attribute specifies the image location. Browsers use this attribute to retrieve the image file stored at the specific location. The height and width attribute specifies the image’s height and width to be displayed on the web page. If the height and the width do not match the image’s actual height and width, then the image is enlarged or reduced to match the given space. But note that the actual image file size in bytes remains the same; your browser simply scales the image to fit in the allotted size specified by the attributes.

Another attribute to be used with the img element is the title attribute. A title attribute holds the description of an image in the text format. When a user moves their mouse over the image a tooltip with the title’s text value is displayed. Tooltips are also called as screen tips or the hover boxes depending on the system that is being used.

So, this was the basics of how to insert images in the HTML web pages. In the next article, we would be discussing about the image hyperlinks i.e., use of the images in hyperlinks. Further we would be discussing about the image maps in the HTML.