Images are an essential part of web design. They make a web page attractive for a visitor. It can be easily included in an HTML document using the <img> tag.

• src - required attribute. Its value is the path to the image location. The path can be absolute and relative.
• alt - required attribute. Provides alternative text that can be displayed when the image cannot be rendered.
• width and height - specifies image size in pixel. Without these attributes an image will be rendered in its original size.

alt attribute

We make the image description informative and meaningful. It helps to describe the image for people who are visually impaired or unable to see it. This way, the browser will read the alt attribute, and a user could understand why we have this image.

Let's imagine the following example. We have a source about horse racing. We want to show how competitors get ready for the racing.

Bad value for the alt attribute will be:

Good value for the alt attribute will be:

src attribute

The src attribute can use both absolute and relative paths to specify the location of the image file.

Absolute path

It specifies the full URL of the image file on the web server. For example:

It means that the image file located at https://example.com/images/image.jpg.

Relative path

It specifies the location of the image file relative to the current web page. For example:

It means that the image file located in the images directory that is one level up in the directory tree from the current web page.

Relative paths can be either relative to the current web page or relative to the website's root directory, depending on how they are specified. For example:

It means that the image file located in the images directory at the root of the website.