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


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

Read more:

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

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


  • An image

<img src="" 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:

10.4 - Image in a none displayed container will not load

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

<script src="[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="" >
<img id="none_inline" src="" style="display: none;" >

11 - Mask

With the mask property directly inside SVG

  • Circle

<svg xmlns="" xmlns:xlink="" width="170" height="200">
    <filter id="filter">
      <feGaussianBlur stdDeviation="5" />
    <mask id="circle">
      <circle cx="50%" cy="50%" r="19%" fill="white" filter="url(#filter)"></circle>

  <image xlink:href="/_media/anne_frank_1934.jpg" width="170" height="200" mask="url(#circle)"></image>

  • Ellipse

<svg xmlns="" xmlns:xlink="" width="170" height="200">
    <filter id="filter">
      <feGaussianBlur stdDeviation="5" />
    <mask id="ellipse">
      <ellipse cx="50%" cy="60%" rx="20%" ry="25%" fill="white" filter="url(#filter)"></ellipse>

  <image xlink:href="/_media/anne_frank_1934.jpg" width="170" height="200" mask="url(#ellipse)"></image>

12 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap