Web image markup

img src, srcset, and currentSrc.

These names describe different parts of a browser’s image-selection process. They are often the reason the rendered image is not the source you expected.

img src: the image element’s source attribute

The src attribute is the URL written on an img element. It is commonly a fallback source, but it is not always the URL the browser displays.

<img src="photo.jpg" alt="Example">

srcset: alternate candidates

srcset gives the browser a set of candidates, often at different sizes. The browser chooses one based on conditions such as the image’s rendered size and the device’s pixel density.

<img
  src="photo.jpg"
  srcset="photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="Example">

picture: format or art-direction choices

A picture element can offer different sources for media conditions or formats. The nested img still provides the fallback src.

currentSrc: the URL Chrome selected

In browser JavaScript, an image’s currentSrc reports the candidate currently selected by the browser. It can differ from the literal src because of srcset or picture.

What Save Source Image uses

When you invoke its image context-menu command, Save Source Image compares the URL Chrome supplied with matching image elements in the clicked frame. When a usable, non-placeholder literal img src agrees across matching elements, it prefers that URL. Otherwise it uses the browser-selected source or the exact image URL Chrome supplied.

This is a selection step, not a conversion step: the extension never canvas-decodes, re-encodes, or invents a format the webpage did not expose.