HTML - Image (Img tag)

About

img 1) 2) is an fetch element that represents an image.

Example

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

Attributes

src

src stands for source.

The value nay be:

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.
<base href="http://example.com">

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.

alt attribute

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

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>

3)

Layout shift

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

srcset permits to define responsive image

Style

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

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

referrerpolicy

The referrerpolicy attribute 4) permits to set the referrer-policy for the fetch

Security

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.

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

DOM Accessor

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

Responsive

See How to create responsive images in HTML ? (from A to Z)

Placeholder Image

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

Loaded

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

Lazy Loading

See Lazy loading

Preloading

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

Image loaded Event

loaded event with image

Example:

  • An image
<img src="/_media/lenna.png" alt="Lenna" width="150" onload="lennaHasLoaded(event)">
  • The script that we want to run after the image has loaded
let lennaHasLoaded = function (){
 console.log("Lenna has loaded");
}
Rendered by WebCode

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

Image in a none displayed container will not load

  • 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;" >
Rendered by WebCode

Styling

See CSS - Image

Mask

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>
Rendered by WebCode
<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>
Rendered by WebCode

HTTP Header

When serving image, the following HTTP header may be taken into account:

Support

Broken image symbol

  • You may see the broken image when the image is just broken. Below the data scheme uses a , in place of a ; before base64 broking the image.
<img src="data:image/svg+xml,base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjAgMjI5IiB3aWR0aD0iNTIwIiBoZWlnaHQ9IjIyOSI+PC9zdmc+"
width="150px"
height="100px"
style="max-width:100%;height:auto;background: rgb(203, 241, 234);"
/>
Rendered by WebCode
  • You may also see a broken image symbol when an alt attribute or sizes attributes is used without a src or srcset attribute. This situation can happen when you are lazy loading image.
img.lazyload:not([src]) {
	visibility: hidden;
}

Documentation / Reference

1)
img specification
2)
img element
3)
Ref - attr-dim-height
4)
https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-referrerpolicy




Discover More
Browser
Browser - Document variable (DOM) - Javascript

In a browser, the document is: a DOM document (in-memory tree) of a XML document (generally a HTML dom document) The document is provided by the browser via its DOM webapi (Not by the Javascript...
Browser
Browser - Render blocking resources

All resources that are before the DomContentLoaded event are blocking the construction of the DOM. They are therefore known as render blocking resources They all have a render...
Blob Url In Browser Address
Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

An ObjectUrl is the representation of blob object as a data URL strings that can be used with any fetch HTML element that accepts an URL as an attribute. HTML Example: This HTML was generated with...
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
CSS - Element

Most CSS style sheet rules use the names of elements to specify how the elements (HTML, XML, ...) should be rendered. A replace element has its content outside the scope of the CSS formatting model,...
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
CSS - Inline Box

CSS This page is inline box in the block formatting layout context. Inline box can be generated: by default from an inline element or by setting the display property. Inline-level elements...
Boxdim
CSS - Length Value (Size)

Lengths refer to horizontal or vertical measurements. The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier where: number is positive...
Boxdim
CSS - Width property (of a box)

The width property specifies the width of boxes and it's calculation is defined by the box sizing property. HTMLCSS HTML width attributeHTMLimgiframe... If you want to set a width on a p element for...



Share this page:
Follow us:
Task Runner