Pictures are worth a thousand words
At the beginning of the web, there was only text. Entirely text-based web pages were boring to look at. Then images were introduced. Images make the web pages more pleasing to the eye. They make pages seem more interesting. The tag is used to add images to a web page. It requires an attribute src. This attribute has the address of the image.
<img src="example.jpg" alt="Example image">
In this example, the example.jpg image file needs to be in the same folder as the web page. We can also include an image that is already online on the internet.
<img src="https://www.example.com/example.jpg" alt="Example image">
Alt attribute
The alt attribute is a recommended attribute for an image. When the browser fails to load the image, it shows the alternate text as specified in the alt attribute. This text is also helpful for screen readers that read the alternate text instead of the image. Search engines like Google use it to understand what the image is about. Hence we recommend you to include relevant alt text for every image.
Width and Height
We can specify the height and width of the image using the height and width attributes. By default, pixels are the units of measurement.
<img src="example.jpg" alt="example image" height="400" width="400">
The style attribute has the height and width CSS properties that work in a similar fashion.
<img src="example.jpg" alt="example image" style="height:400px;width:400px">
Both the above methods are supported in HTML5. But there is a chance that stylesheets can override the height and width attributes. So use the style attribute to prevent this problem. We recommend you to always specify the height and width. Otherwise, browsers will not allocate space and will flicker during loading.
Using images as links
We can wrap the image around with an anchor element to make it a link. It works like any other link except the image is the link instead of text.
<a><img src="example.jpg" alt="example image"></a>