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.
Example:
<h1>HTML Image</h1>
<img src="./images/image.jpg" alt="Designer's two-screen setup">
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">
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
Image Formats
Some common Image Formats that are supported in all browsers –
