Images

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:

The alt text "A man on a horse" is too generic and lacks context. It provides a basic description, but it doesn't convey useful details about the scene or the purpose of the image.

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 the https://example.com/images/image.jpg link in the internet. Anyone can access the image using this link.

Please, inspect the following real example in the code sandbox below:

Note

To examine the file folder structure, drag the slider on the code sandbox interface's left side. In the top left corner, you will find a burger button represented by three stripes. Clicking on this button will navigate you to the file folder organization.

Relative path

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

It means that the image.jpg file located in the images directory.

Please inspect the real example provided in the code sandbox below. You will find the images folder, which contains the sun.png file.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.