There should be a way in JS to (synchronously) get real width and height of an already loaded image not affected by
height attributes or by anything else.
naturalHeight properties cannot be used for that anymore since those are now affected by irreversible inconsistent implicit calculations for unknown practical purpose.
naturalHeight properties were already providing exactly this ability until it has been decided by WHATWG that a sort of correction should be applied to those values by dividing in corresponding pixel ratio.
The correction is applied to images specified via the
srcset attribute. Even worse, resulting values are inaccurate and therefore original values cannot even be restored as is.
For example, for the same 100×100 image:
<img src="example.png" alt="" />
<img srcset="example.png 3x" alt="" />
100 in the first case and
33 in the second one.
We could check if the image has the
srcset attribute and multiply (or not)
naturalHeight by corresponding pixel ratio conditionally. But:
to determine the pixel ratio, we are forced to parse
srcset (oh my…) (please correct me if I’m wrong);
srcset value may be invalid;
there is a precision issue (
99, not the original
100, so information is irreversibly lost).
So the story would get too complicated given that we are trying just to obtain the exact value that browser already knows directly and precisely.
So now we are again (as before introducing
naturalHeight) forced to use a redundant asynchronous
new Image request and then read the dummy-image’s
height once it’s loaded, instead of just reading the real dimensions of the already loaded image synchronously and directly.
As a result, some new properties should probably be introduced like
realHeight for the purpose of getting the real original size of image not corrupted by any redundant implicit calculations. In other words, the new properties should return exactly the same values that are returned respectively by
height properties of an image created via