HTML - Image (Img tag)

The img element represents an image.

<img
    src="https://datacadamia.com/wiki/_media/resume/nico.jpg" 
    alt="nico" 
    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)

Effect on layout

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

• https://usesmash.com/
• https://www.imgix.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.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

• 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;" >

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>

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