Page 85 - HTML5

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages.
The <img> tag creates a holding space for the referenced image.

It is also possible to embed images directly inside the page using base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.

Image width and height

Note: The width and height attributes are not deprecated on images and never
have been. Their use has been made much stricter though.

The dimensions of an image can be specified using the width and height attributes of the image
tag:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

By specifying the width and height of an image, your structure gives the browser a hint as to how
the page should be laid out even if you are just specifying the actual image size. If the image
dimensions are not specified, the browser will need to recalculate the layout of the page after the
image is loaded, which may cause the page to "jump around" while it's loading.

4.1

You can give the image a width and height in either the number of CSS pixels or a percentage of
the image's actual dimensions.

These examples are all valid:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

5

The width and height of the image must be specified in CSS pixels; a percentage value is no
longer a valid value. As well, if both attributes are specified, they must fit into one of three formulas
that maintain aspect ratio. Although valid, you should not use the width and height attributes to
stretch an image to a larger size.

These examples are valid:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

https://riptutorial.com/ 69