add images to web pages

How to add images in HTML pages?

The HTML <img> tag is used to add images to web pages. This tag has two compulsory attributes that allow you to add images.

<img> tag compulsory attributes –

  • src="..." – It takes the path to the image. The image path could be relative or absolute.
  • alt="..." – It takes the alternate text for the image. Alternate text – Short information about the image.


<h1>HTML Image</h1>
<img src="./images/image.jpg" alt="Designer's two-screen setup">
HTML image result on browser

Alt attribute example:

Alternate text will appear when the image is not loaded for some reason (maybe the image path is wrong or the image does not exist in the folder, etc.).

Note: Always add alt text with images, it is good for users’ experience as well as SEO.

<h1>HTML Image</h1>
<img src="./images/random.png" alt="Designer's two-screen setup">
HTML image alt text on browser

Set width and height of HTML image

1. The HTML <img> tag has width and height attributes to set the width and height of an image.

<h1>HTML Image</h1>
<img src="./images/image.jpg" width="260" height="200" alt="Designer's two-screen setup">

2. You can also use the CSS to set width and height to an HTML image.

<h1>HTML Image</h1>
<img src="./images/image.jpg" style="width:260px; height:200px;" alt="Designer's two-screen setup">

Result of both examples

HTML width & height Result on browser
HTML width & height Result

Image Formats

Some common Image Formats that are supported in all browsers –

common Image Formats that are supported in all browsers