How to Use Images in HTML?

HTML Image Tag <IMG>

“A picture is worth of thousand words” – which is a self-explanatory quote. An image embedded inside text is called as inline image and most of the current day browsers can display inline images. To do this, you just need to use the HTML image code <IMG SRC=”name-of-image”> and the value of the SRC attribute is the picture file (could be a png, bmp, jpg, gif, etc).

If the image file is located in the same directory then you can use the absolute path and if the image file is not in the same directory as the HTML, the relative path can be specified as shown below.

<IMG SRC="myimage.bmp"></IMG> <!-- image located in the same directory --!>
<IMG SRC="../images/myimage.gif"> <!-- image located in the different directory --!>

For example the snippet of code:

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png">

is rendered like below:

Note: The above example works without closing tag and it is not mandatory to use closing image tag </IMG> in HTML.

Stretching It Too Far?

To let the browser know how much area on screen to give to the image, one can use the HEIGHT and WIDTH attributes. For example we could change the previous example to have code which looks like this:

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png" HEIGHT=40 WIDTH=60>

Or look this…

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png" HEIGHT=100 WIDTH=300>

And the respective result images will be smaller or bigger as like below:

Click On This Image To..

Don’t you wish you could click on that image and turn it into something more beautiful? There are more than one ways of doing it.. here’s a simple technique. Let’s make this image a link. How to do that?

Here we go.. just click on the image below!

And this is how you do it!!!

<A HREF="https://www.webnots.com/do-it-yourself-seo-tutorials/">
<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png">
</A>

Want to add border? Fine! Just add “BORDER=1” to the IMG tag.

Aligning Images

Guess what attribute you are going to be using?? Yes, of course the ALIGN property. For example, consider the HTML snippet:

<IMG SRC="https://img.webnots.com/2012/08/Do-It-Yourself-SEO.png" ALIGN=TOP HEIGHT=200 WIDTH=300> Learn how to submit your site to search engines for free!!

This is displayed as:

And now see the difference:

Can you figure out what has been changed? Yes, the text is aligned at middle of the image with the “ALIGN=CENTER” attribute.

Note: The align attribute with tag can accept the values of top, bottom, middle, left and right. Remember align attribute is not supported in HTML5, you should control the alignments using CSS.

The ALT Attribute

What does this attribute do? In case the image is missing or the browser is not a graphical browser (e.g. Lynx), the ALT text is displayed in place of the image. It’s a good idea to always have the ALT attribute specified as a part of good user interface.

Here is the code for using ALT text inside an image <IMG> tag:

<IMG SRC="Null.jpg" ALIGN=CENTER ALT="SEO For Images">

Browser will display a non-compatible image as below by displaying an ALT tag defined for that image:

Figure and Figure Caption

Since images have caption, HTML5 allows covering the <IMG> element within <FIGURE> element and offers an additional feature for adding caption to the images – <FIGCAPTION>. The below code will show an image along with the caption:

<FIGURE>
<IMG src="books.png" alt="Tied Books" height=300 width=300>
<FIGCAPTION>Tied Books</FIGCAPTION>
</FIGURE>

It will look like below on the browser with the caption below the image:

It Can’t Be All Good!

Images are good things to have on pages; they add value to the description, sometimes are self-explanatory, liven up the page and do so many other things. However, they need to be used prudently.

Well, an image can tend to get very large – and this can kill the page load time since it takes a long time to download it especially on low speed internet connections! Besides, for every image on your page, a new HTTP request is sent out from the client to the server. So if you have two images on your page, there will be totally three requests – the first one for the actual HTML page and the next two for images. This causes three round trips (request + response = round trip) to happen – this could also jam the network with the additional data.

So what’s the bottom line? Well, use discretion when designing your pages. Remember, there’s always going to be a trade-off somewhere! In general, keep the followings in mind:

• Always optimize images on your site for search engines.
• Use appropriate size for images. Ensure the images are responsive and auto adjusted based on the width of the browser. All modern day themes will support responsiveness.
• Use correct image format. Generally jpeg or png image formats are suitable for web pages.
• Use Scalable Vector Images (SVG) for icons instead of bmp, png or jpeg formats.
• Use to tools like SnagIt and Photoshop to create your images. You can also get royalty free stock images from many websites.

---