What is "intrinsic size"?

MDN Learn
#1

I saw a few pages, but I’m still not sure what is called intrinsic size.

  • Let’s say I created a file by Microsoft Paint and changed both the width and the height to 500px. In this case, can I say “both intrinsic width and height of this image is 500px”?
  • In what kind of situation do you use the word “intrinsic” about a image? Where do I display an image which I can use the word?

I read Responsive images at first:

An image’s intrinsic size is its real size, which can be found by inspecting the image file on your computer

Then I saw Intrinsic size:

For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default images are assumed to have a “1x” pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width.

I felt this explanation may have something useful, but I couldn’t solve my question by it. For now I don’t have a clear image about many words: rendering, device pixel, CSS pixel, and pixel density.
I also saw the topic " What is intrinsic size in images HTML", but I’m still not sure.about the word.

#2

Yes, that’s exactly the meaning of the term. Another way to say “intrinsic size of an image” is “own size of an image”. Your 500px by 500px image could be displayed on a website with width: 800px and height: 200px and it looks distorted. When you right click the image and save to your computer and inspect its dimensions its still 500px by 500px. Its “own size” or its “real size” is still 500px by 500px. No matter what you did with CSS to make it look differently on the website.

The second quote points to the fact the on high resolution displays (think of a smartphone with 4K resolution) a physical pixel of the device is not the same as the CSS pixel value. This is a whole new story, but the first quote in your post is still correct.

Cheers,
Michael

1 Like
#3

I appreciate your explanation. Your reply definitely helped solve my question.

I can’t make for now the best use of your explanation about the second quote, but I feel the problem will also be soon solved.

1 Like