HTML - Image (Img tag)

The img element represents an image.

<img
    src="/_media/web/rss_icon.jpg" 
    alt="RSS" 
    height=50px
    width=50px 
    />

src stands for “source” that have as value an url or a data scheme.

If the src value begins:

• with a slash ( / ), it will be relative to the domain name.
• without a slash, it will be relative to the page or to base href if defined. See HTML - Base ( URL ) element (to resolve relative one)

<base href="http://example.com">

Read more: https://html.com/attributes/img-src/#ixzz5J3gk4Sk1

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)

Height and width are logical values that reserve the space of the image on the screen and will reduce layout shift.

They are not the intrinsic dimension. 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>

Ref

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 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.

See HTML - Responsive Img

• http://holderjs.com/ (via javascript)
• https://robohash.org/
• https://placeholder.com/ (http://placehold.it)

https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now

• http://placepuppy.it
• http://placekitten.com

You can check if an image was loaded by checking simply the width after the loaded event

See Lazy loading

HTML - Resource Preloading

<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)">

loaded event with image

Example:

• An image

<img src="https://datacadamia.com/_media/lenna.png" alt="Lenna" width="150" onload="lennaHasLoaded(event)">

• The script that we want to run after the image has loaded

lennaHasLoaded = function (){
 console.log("Lenna has loaded");
}

• An image inside a display=none element will not be loaded.

• The script that shows the width of the image. An image that has loaded, will have a width.

$(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());
});

• The html

<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

• Circle

<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>

• Ellipse

<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:

• content-type to return the image format
• Save-Data to return the image quality

• Security Considerations
• https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element