HTML - Image (Img tag)

1 - About

The img element represents an image.

For enhance capability, you an also defines a group of file that represents the same image with the picture element

3 - Example


<img
    src="https://datacadamia.com/wiki/_media/resume/nico.jpg" 
    alt="nico" 
    height=50px
    width=50px 
    />

4 - Attributes

4.1 - src

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

4.2 - img role

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.

4.3 - alt attribute

The alt attribute is an Alternate text that is shown when the image cannot be displayed (page read by a screen reader)

4.4 - Height and Width

4.5 - srcset

srcset permits to define responsive image

4.6 - Style

To overcome that the images overflow their container, you can use this rule


img, embed, object, video {
  max-width: 100%;
}

5 - Security

5.1 - Port scan

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.

5.2 - 0x0 Fake

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

6 - DOM Accessor

The document property document.images returns an HTMLCollection of the img elements in the Document.

7 - Responsive

8 - Placeholder Image


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

9 - Bank

10 - Loaded

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

10.1 - Lazy Loading

10.2 - Preloading

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

10.3 - Image loaded Event

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

There is library that helps to manage if an image was loaded For instance: https://imagesloaded.desandro.com/

10.4 - Image in a none displayed container will not load

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

11 - Mask

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>

12 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap