The img tag

The img tag creates an image. The path to the image is specified in the src attribute. Does not require a closing tag.

Attributes

Attribute	Description
src	Specifies the path to the image. Required attribute.
alt	Alternative text that will be shown instead of the image if it is not found (for example, the path to it is incorrectly written). Mandatory attribute. If it is missing, the validator (a program that checks the correctness of HTML or CSS) will complain.
width	The width of the image, in pixels (in this case, units of measurement are not specified) or as a percentage of the image's parent.
height	The height of the image, in pixels (in this case, units of measurement are not specified) or as a percentage of the image's parent.

Nuances

If neither width nor height is specified for the image, the image will have its real size. If the height is specified, the image will become the specified height, and its width will be adjusted so that its proportions are not distorted.

If only the width is specified, the image will similarly be adjusted in height to maintain the proportions.

If both width and height are specified, the image proportions may be distorted (or maybe not, as you might guess). If the width or height (or both together) is larger than the real one, the image will increase in size, but will lose quality.

It is recommended to set the width and height of images in attributes (and not via CSS) - in this case, the browser will load images faster - it does not need to calculate the size of each image after receiving it.

It is not recommended to reduce the actual dimensions of the image without necessity. For example, the actual size of the image is 1000 by 1000 pixels, and you set its width to 100px. In this case, the image on the screen will look like 100 pixels, but will be the size of a whole thousand and, accordingly, will load much longer.

Example

Let's add a picture to the site and not set the height and width attributes. The picture will have its real size:

:

Example

Let's try to add width to the image using the width attribute, while the height should be adjusted to maintain the image's proportions:

:

Example

Now let's add height to the image using the height attribute, the width will be adjusted to maintain the image's proportions:

:

Example

Let's add both height and width to the picture at the same time. The proportions of the picture should become distorted (not necessarily, but in this case the height and width are chosen so that the proportions are distorted):

:

Example

Let's put an incorrect path to the image (for simplicity, let's leave it empty). Instead of the image, we will see the content of the alt attribute (it seems like normal text - but try to copy it - you won't succeed, it will stretch like an image):

:

See also