HTML image is displayed using a <img> tag which stands for an image.
The <img> tag is an empty tag which means it contains attributes only.
Synatx of Image:
<img src=”URL” alt=”image description”>
The src Attribute:
The src attribute stands for the source, it is the location of the image which is to be added. It is a standard URL of an image and similar to links.
The alt Attribute:
The alt attribute stands for Alternate Text and it specifies alternate text for an image. Normally text written in tag will not be displayed on the webpage it is displayed in place of an image if an image fails to load.
By default, images will display at their actual size. HTML images have width and height attributes, which are used to adjust the width and height of an image. By default, the height and width are specified in pixels.
You can give some height and width to display an image according to your requirements.
To insert images into your webpage, that image must be present in the same folder where your .html file is located. If the image is present in some other directory then you must include the folder name in the src attribute.
By default, the background image repeats horizontally and vertically across the height and width of the background area if the size of the image is smaller than the element.
HTML 5 introduced the <picture> tag which allows us to display different pictures on different screen sizes.
The HTML <picture> element contains one or more <source> elements and one <img> element to provide different images for different screen sizes.
The <source> element contains different images for different screen sizes. The browser will consider each of the <source> elements and loads the most appropriate image. If matches are not found, the browser displays the image defined in the <img> tag.
Syntax:
<picture>
<source media=”…”>
<source media=”…”>
<img src=”…”>
</picture>
The browser will use the first image format it recognizes.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok