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:
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.
Height and Width Attribute:
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.
Height and Width using Style Attribute:
You can also set the height and width of image using style attribute.
How to get image from another directory/folder?
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.
How to add Animated Images?
Generally, animated images are in .gif format and <img> tag of HTML allows us to add animated images.
Image floating:
To float the image in HTML, use the CSS float property which allows you to float an image to left or right.
Background Images:
An image can be used as a background image for a webpage.
The style attribute is used to add a background image to an HTML element.
You can also add background image using style attribute.
Background Image on Entire Page:
You can also add a background image to the entire page by adding a background image to the <body> element.
Background Repeat:
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.
You can add the background image without repetition using the background-repeat property.
Background Cover:
The background image can be set to cover the element without repetition using the background-size property.
If you set the background-size to cover then it will fill the entire element, without stretching while preserving its aspect ratio.
Background Stretch:
The background-size property enables you to change the size of the background image using the background-size property.
It allows you to stretch the background image horizontally vertically or both.
The Picture 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.