img 1) 2) is an fetch element that represents an image.
<img
src="/_media/web/rss_icon.jpg"
alt="RSS"
height=50px
width=50px
/>
src stands for source.
The value may be:
If the src value begins:
<base href="http://example.com">
See also the related ARIA img role. A container for a collection of elements that form an image. An img can contain captions and descriptive text, as well as multiple image files that when viewed together give the impression of a single image.
The alt attribute is an Alternate text that is shown when the image cannot be displayed (page read by a screen reader)
The alt attribute is mandatory
Height and width are logical values that specifies the intrinsic aspect ratio of the image (ie physical) and reserve its space on the screen and will reduce layout shift in case of lazy loaded images. (even if CSS sets also the image's width and height properties)
They are generally the natural size of the image. Note that you should not specify bigger value than the intrinsic width and height because they are not intended to be used to stretch the image.
Height and width are set with a valid non-negative integer without any unit. The unit expected is the css pixel (ie logical pixel and not the device pixel)
If both attributes are specified, then one of the following statements must be true:
<MATH> \begin{array}{c} \text{specified Width} - 0.5 & \le & \text{specified Height} \times \text{target Ratio} & \le & \text{specified Width} + 0.5 \\ \text{ }\\ \text{specified Height} - 0.5 & \le & \frac{\displaystyle \text{specified Width}}{\displaystyle \text{target Ratio}} & \le & \text{specified Height} + 0.5 \end{array} </MATH> where: <MATH> \text{target Ratio} = \frac{\displaystyle \text{intrinsic Width}}{\displaystyle \text{intrinsic Height}} </MATH>
Without the knowledge of the target ratio via the height and width attribute, the browser can't reserve space for the image and it creates what's called a layout shift
Once the width and height has been set, it's recommended to set the following styling property to reduce the chance of layout shit and make them responsive image
svg, img {
max-width: 100%;
height: auto;
}
srcset permits to define responsive image
To overcome that the images overflow their container, you can use this rule
img, embed, object, video {
max-width: 100%;
}
The referrerpolicy attribute 4) permits to set the referrer-policy for the fetch
The img element can be used in conjunction with some other features as a way to effect a port scan from the user's location on the Internet. This can expose local network topologies that the attacker would otherwise not be able to determine.
In CSRF attack, a 0x0 fake image can be used:
<img src="http://mybank.com/transfer?destinataire=nico&amount=100000" width="0" height="0" border="0">
The document property document.images returns an HTMLCollection of the img elements in the Document.
Art direction 5) is when you want to show different image content depending on the image's rendered size.
https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now
You can check if an image was loaded by checking simply the width after the loaded event
See Lazy loading
How to preload HTML resource (Javascript, StyleSheet)
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
Example:
<img src="/_media/lenna.png" alt="Lenna" width="150" onload="lennaHasLoaded(event)">
let lennaHasLoaded = function (){
console.log("Lenna has loaded");
}
There is library that helps to manage if an image was loaded For instance: https://imagesloaded.desandro.com/
$(window).on("load", function() {
console.log("image none via div container was not loaded the width is 0. Width: " + $('#none_div').width());
console.log("image none via inline style width was loaded. Width is not null. Width: : " + $('#none_inline').width());
});
<div style="display: none;">
<img id="none_div" src="https://datacadamia.com/_media/favicon-32x32.png" >
</div>
<img id="none_inline" src="https://datacadamia.com/_media/favicon-32x32.png" style="display: none;" >
See CSS - Image
With the mask property directly inside SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="circle">
<circle cx="50%" cy="50%" r="19%" fill="white" filter="url(#filter)"></circle>
</mask>
</defs>
<image xlink:href="/_media/anne_frank_1934.jpg" width="170" height="200" mask="url(#circle)"></image>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="ellipse">
<ellipse cx="50%" cy="60%" rx="20%" ry="25%" fill="white" filter="url(#filter)"></ellipse>
</mask>
</defs>
<image xlink:href="/_media/anne_frank_1934.jpg" width="170" height="200" mask="url(#ellipse)"></image>
</svg>
When serving image, the following HTTP header may be taken into account:
<img src="data:image/svg+xml,base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjAgMjI5IiB3aWR0aD0iNTIwIiBoZWlnaHQ9IjIyOSI+PC9zdmc+"
width="150px"
height="100px"
style="max-width:100%;height:auto;background: rgb(203, 241, 234);"
/>
img.lazyload:not([src]) {
visibility: hidden;
}