Missing overview of image size/resolution - intrinsic size

[hamishwillee]

MDN does not (IMO) properly/well define the meaning of the various terms used around image properties: like intrinsic size, natural size, density adjusted size, pixels, device pixels, CSS pixels, device pixel density, resolution.

It would be good to have an explainer that shows the difference/relationships between all of these, where it is set, what assumptions are made by browsers. This then needs to be tied into the CSS and HTML docs, and also the Client-Hints HTTP header docs to make it clear where the information is set and how it can be used.

We would also check that there were good cross linked glossary entries: https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size, and I suspect we should also update some information in srcset and img tag on where the sizing comes from.

This follows on from #6798 (comment)

Resources:

• https://github.com/eeeps/exif-intrinsic-sizing-explainer
• https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size

A few notes:

• Pixel - a small area of illumination on a display screen, one of many from which an image is composed. A picture element.
• Pixel is also referred to as a device pixel or physical pixel.
• Pixels do not have a fixed size. Their size is relative to the screen's resolution.
• Logical pixel is simply the value of point in a grid, with no inherent physical size. So you might map that grid to a device for display on a device pixel.
• • I think the "resolution" is a measure of how many pixels that the screen can display. ie. a 640 by 480 resolution screen has that many
• A screen also has a density, measured in ppi (pixels per inch). A screen with high density should display the same image smaller, because the pixels are closer together.
• CSS pixel - The CSS spec defines a pixel as a unit of physical measurement. 1 pixel = 1/96th of an inch.
• Device pixel ratio (DPR) - relationship between device pixels and CSS pixels for a particular device. A 192 ppi device has a devicePixelRatio of 2 (192 ppi/96 ppi = 2) because "2 of its display pixels are the size of 1 CSS pixel".
• So the CSS pixel effectively defines the standard pixel and the standard resolution, and often screens are declared as a multiplier of this.
• If an image measures 600 pixels by 300 pixels, then it will display at approximately 6" by 3" on a screen with 96 ppi resolution with no sizing applied.
• Intrinsic size is the display size of an image if no CSS were applied to it (or so it says in the spec). But it isn't clear how this relates to CSS pixels. Kind of need to start with an image, double size image (same resolution), same size image (double density) and make clear what is actually meant in each case.
• I THINK that basically a raster image is just a grid of logical pixels, that also may store some information about orientation, size of the pixels in each dimension, expected density (for printing?). A browser gets this image and just decides the intrinsic size from the pixels in each direction. If there is exif that might tell you the size is different, in which case it can infer the expected density of the pixels. All very confusing though.
• When you set the size of an image in HTML (say) you're specifying the amount of space to reserve for layout. The actual image sent from server is the same so don't assume you're resizing the image on the server. i.e. hint to people not to get lazy and just use the width etc for shrinking (as I often do :-0 ).