w and px of the srcset attribute in html

Question

In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x.

1. Does 500w mean that the width of the image is 500 pixels? If so, why is it w and not px, as used when in the size attribute?

2. Does 1x means a pixel density of 72pixels/inch

3. Why does an image have pixel density? I thought pixel density means the number of pixels within a physical length/space. For example, the number of pixels per inch. But a digital image doesn't occupy a physical length/space, it only occupies a number of pixels. So what does the pixel density of a digital image mean?...This is my guess, please tell me if I'm right: An image only occupies a number of pixels, but it could have been intended for a physical length. For example, an image of a button of 144 pixels width was intended to occupy a physical space of 1 inch. Therefore, it was intended for a device of 2x. We tell the browser this by specifying 2x in the srcset attribute. To sum up, the pixel density means the pixel density of the system the image is intended for.

Answer 1

#1. The 'w' value that appears to the right of each file listed in the srcset attribute of the <img> tag is known as the "w descriptor." The value of each 'w' descriptor is the intrinsic width, in pixels, of the file the 'w' descriptor is associated with. "Intrinsic width" means the native width of the image when it is was originally created or the last time its width changed. You can view a file's intrinsic width in Photoshop or the Windows 10 Photo Viewer (click the three-dot menu "..." and select File Info). "px" is not used to describe intrinsic width because it is used to describe various other types of image widths. The 'w' descriptor describes a specific type of image width that is measured in pixels - intrinsic width - and is used only with the srcset attribute of the <img> tag.

#2. "1x" does NOT mean a pixel density of 72 pixels per inch. That's because pixel density is NOT device resolution. Pixel density is the ratio of browser image width in pixels (known as "CSS pixels") to the native pixel width of the device's display screen. Pixel density has nothing to do with device resolution.

#3. An image does NOT have pixel density. It has only two types of width measurements - both in pixels. One width measure is the width the browser is displaying the image at. The other width measure is the intrinsic width of the image (see #1). For example, suppose I have an image whose intrinsic width is 800px wide. Also suppose that the browser is displaying the image at 650px wide. These two measures are not related in any way (this is NOT pixel density!) - they're just two different ways an image can be viewed which results in two different width measurements.

I've answered your questions directly, without any other context or explanation, and I'm certain that you are scratching your head saying, "That didn't help!" That's the exact same reaction I had when I first started to educate myself about how inline images (images that are specified with the <img> tag in HTML) are selected and displayed by browsers. I suggest you read this post to begin to gain a thorough understanding about how inline images are specified in HTML markup and how browsers select the appropriate image from the srcset attribute of the <img> tag. You can expect several weeks of study before this topic comes into sharp focus. And when you've finished mastering inline images, background images are waiting for you to master with a completely different set of rules. :>)