How to add an image in an HTML page

In order to insert images in HTML, you need to make use of the <img> tag.
Tags in HTML are the statements enclosed in <> and </> For instance <strong> peter</strong> makes the word peter appear bold on the web page. You can even have audio and video embedded to your web page using tags.

Well, let us dive right into the code and see how we can insert the image into our web page.

relative reference: <img src="images/pic.jpg"/> 
absolute reference: <img src="http://www.website.com/images/pic.jpg"/>

Referring to the image from your HTML file

There are different ways in which you can reference an image in a HTML file. The simplest one is placing the image in the same folder as the rest of your HTML files and referencing is by name in the src parameter of the img tag. When you do this, you need to remember to place the image in the same folder while uploading to the server as well.
Example:

 <img src="pic.jpg"/>

If you put the image in a sub-folder, you can refer to the image this way:

image-in-html-1

 <img src="images/pic.jpg"/>

If the subfolder is in a parent folder, use the .. (two dotes) to indicate parent folder:

relative path sample: parent folder

<img src="../assets/pic.jpg"/>

Another option is to opt for the absolute path. You will have to enter the full link to the image. This may come in handy when you are linking an image on another site from your page.

Both relative and absolute referencing for the images will show the image regardless of where it is located so your choice will depend on the location of the image. However, when you have your images in one location, relative referencing is the best since you can move your site to a new server without having to change a single line of code.

Width & Height

In addition to the path to the image file, it is better to give the width and height of the image if possible. Any image viewing tool (like irfan view )  can show you the image size in pixels. Giving the size of the image in HTML allows the browser to give enough space for the image as the image is loading (rather than jumping the content once the image is loaded)

Sample:

 <img src="images/pic.jpg" width="302" height="231" />

Leave a Reply

Your email address will not be published. Required fields are marked *