Intrinsic image sizes

Just looking to optimize my images (actually using Astro, but I'm leaning towards the raw picture tag because it seems like it has more flexibility) The width and height attributes are intrinsic values right? ie not how big I'd like to render the image, but how big the image is on my HDD. I swear I see the former definition used everywhere? I'd then use the sizes attribute (in a picture tag) or css to set the render sizes with relevant breakpoints? Thanks, Nick
87 Replies
ἔρως
ἔρως2mo ago
the intrinsic size is the size that the image has in js, it's the naturalWidth and naturalHeight whatever you put in the width and height will only matter in 2 situations: - when there's no css - when the proportion is different from the proportion of the original image
Nick
Nick5w ago
thanks @ἔρως - that's what I though. not sure sure how I didn't get a notification for this, but appreciate the answer!
ἔρως
ἔρως5w ago
you're welcome this doesn't send notifications because i dont ping people
RAiDeRTuRbO
RAiDeRTuRbO5w ago
Intrinsic size has nothing to do with JS.
ἔρως
ἔρως5w ago
the only line about js is this one ^ everything else has nothing to do about js, so, i don't know what you're talking about and yes, that line is factually correct and you can verify it yourself
RAiDeRTuRbO
RAiDeRTuRbO5w ago
Intrinsic size is the actual physical dimensions/resolution of the image. Adding a width or height attribute limits the displayed size on screen only. Nothing you mentioned has any relation to how much space it takes up on your HDD.
ἔρως
ἔρως5w ago
that's sometimes not true
RAiDeRTuRbO
RAiDeRTuRbO5w ago
The OP mentioned width and height attributes, no mention of naturalWidth or naturalHeight - this is unrelated and has nothing to do with the question. So, I don't know what you're talking about 🙂
ἔρως
ἔρως5w ago
im talking about on how to check the intrinsic size in js
RAiDeRTuRbO
RAiDeRTuRbO5w ago
a higher resolution image does generally take up more HDD space, but, again, this is unrelated to the question
ἔρως
ἔρως5w ago
not always
RAiDeRTuRbO
RAiDeRTuRbO5w ago
No need to. Check it in the web browser developer tools
ἔρως
ἔρως5w ago
i can have a 3000x3000 image of a single color
RAiDeRTuRbO
RAiDeRTuRbO5w ago
Yes, always. and...?
ἔρως
ἔρως5w ago
that takes less space than a 150x150 image with multiple colors
RAiDeRTuRbO
RAiDeRTuRbO5w ago
and...?
ἔρως
ἔρως5w ago
and resolution isn't always co-related to high hdd space usage
RAiDeRTuRbO
RAiDeRTuRbO5w ago
Yes, that's what I said initially and, sometimes it IS related to the HDD space 😂 you seem very confused... 🧐
ἔρως
ἔρως5w ago
im saying that sometimes is and sometimes isn't
RAiDeRTuRbO
RAiDeRTuRbO5w ago
yes, and that's what I said... smh 😂 but you argued it and said the same! 😂 I give up 😂 have a good day 😂
ἔρως
ἔρως5w ago
Nothing you mentioned has any relation to how much space it takes up on your HDD.
o.p. spoke about the resolution of the image, and you said this
RAiDeRTuRbO
RAiDeRTuRbO5w ago
again, you seem confused... perhaps your english isn't great and that's where your confusion has come from
Jochem
Jochem5w ago
let's end this here, the question has been answered
RAiDeRTuRbO
RAiDeRTuRbO5w ago
either way... no need to discuss JS regarding image sizes... 😂 had it though? O_o
ἔρως
ἔρως5w ago
@Nick are you satisfied with my answer? do you need any clarification?
Nick
Nick5w ago
Now you ping me! 😛 tbf I haven't read all of that, but I was referring to how "big" the image was on the HDD, as in dimensions, rather than space taken up. Should've been more clear 😄
ἔρως
ἔρως5w ago
that is confusing, because when people talk about the size in an hdd, it refers to how many bytes or kb or mb it takes
Jochem
Jochem5w ago
if you want to be pinged for messages in forum posts, you can change the notification settings for each post individually. There's a bell at the top of the page on desktop
ἔρως
ἔρως5w ago
the resolution (or dimentions, as you say) it's just a property of the image that says "i have x and y pixels"
Nick
Nick5w ago
sure, but i was trying, badly obviously :D, to just describe the width and height of the image outside of any browser styling
ἔρως
ἔρως5w ago
yeah, that's the intrinsic resolution
RAiDeRTuRbO
RAiDeRTuRbO5w ago
I though that was pretty clear, hence my answer/reply 🙂 again, nothing to do with JS...
Nick
Nick5w ago
yeah, that's what I thought. I only asked at the time because i think the nextjs docs actually get that wrong
RAiDeRTuRbO
RAiDeRTuRbO5w ago
like I said... 😂
Nick
Nick5w ago
or at least they aren't clear
RAiDeRTuRbO
RAiDeRTuRbO5w ago
wow... just wow...
ἔρως
ἔρως5w ago
probably, describing this is very difficult
Nick
Nick5w ago
i mentioned it in the nextjs discord, but it's the nextjs discord... 😄
ἔρως
ἔρως5w ago
the term "resolution" can be (correctly or incorrectly) used to describe the dimensions in pixels, but also how many pixels per inch the image is supposed to be displayed at in the paper and "intrinsic" is a word that's extremely weird for plenty of people, specially non-native english speakers
Nick
Nick5w ago
No description
ἔρως
ἔρως5w ago
that's the size after all styles are applied, from what i understand
Jochem
Jochem5w ago
this is accurate afaik, width represents the actual width in pixels on the user's screen
RAiDeRTuRbO
RAiDeRTuRbO5w ago
No description
Nick
Nick5w ago
but it doesn't in an img component does it? that's the intrinsic width/height?
ἔρως
ἔρως5w ago
it can be, yes
Jochem
Jochem5w ago
width and height should reference the value of the top red arrow in Raider's image, where naturalWidth and naturalHeight reference the bottom red arrow
Nick
Nick5w ago
weird, because i've seen tutorials treating it as the intrinsic dimensions
ἔρως
ἔρως5w ago
it depends on the intention
Nick
Nick5w ago
that seems like an odd decision if you're trying to reflect an img component but good to know
ἔρως
ἔρως5w ago
setting the intrinsic size makes it so the resets don't force it to be 100vw
Jochem
Jochem5w ago
not really, the size you most likely care about in javascript is the size on the screen, not the size of the image "on the HDD" to use your description
Nick
Nick5w ago
sure, but that's not how an img's width and height works is it? 🤷‍♂️ genuine question
ἔρως
ἔρως5w ago
many resets put display: block on images, and that makes the container be 100% in width by default it is you're basically setting the width and height for """""""""""inline"""""""""" css
Jochem
Jochem5w ago
I mean, it has two widths, one that's in the image file (the number of pixels the file has data for) and one for how it's displayed on screen the decision to use the shorter words for the most common use case seems pretty sensible to me
Nick
Nick5w ago
yes, but an img tag's width and height are its intrinsic width and height and that's not true of nextjs' width and height
Jochem
Jochem5w ago
I very rarely care about the actual size of an image if I'm manipulating it in JS, and I've built document previewers with magnifying glass on hover type stuff
Nick
Nick5w ago
sure, but isn't the point that you'll telling the browser what the width and height is ahead of time? ie the aspect
Jochem
Jochem5w ago
no, they're not. If you querySelector an img tag and check the width, it will give you the width of the image on screen, not the intrinsic width:
No description
Jochem
Jochem5w ago
aspect is the ratio between width and height oh, wait, you mean the width and height HTML attributes?
Nick
Nick5w ago
yeah 🙂
Nick
Nick5w ago
so this:
No description
Jochem
Jochem5w ago
pfff, I almost never bother with those
Nick
Nick5w ago
just feels weird that nextjs wouldn't mirror that ah ok
Jochem
Jochem5w ago
it's rare you leave an image unrestrained by CSS
Nick
Nick5w ago
that's true, like i said, it just confused the hell out of me 😄
Jochem
Jochem5w ago
nextjs mirrors javascript because it's well.. nextJS
Nick
Nick5w ago
especially as I've seen teachers use it in that way (and it seemingly working)
Jochem
Jochem5w ago
the thing you linked is the HTML attribute, which is something you fill in manually, where the value in nextjs is made available for you as the page loads
Nick
Nick5w ago
are you sure? it says they're required props
Jochem
Jochem5w ago
it's very important to make the distinction between the html attribute and the javascript one, they're not necessarily related not in the HTML <img> tag they're not they might be on a nextjs component, I wouldn't know. But that's yet another thing, separate from the HTML img tag
Nick
Nick5w ago
I think this shows my confusion the most: Both image 1 and 2 are nextjs Image components with width and height properties. Image 1's description of width and height:
The width and height do not determine the rendered size of the image file.
Image 2's description of width:
The width property represents the rendered width in pixels, so it will affect how large the image appears.
No description
No description
Jochem
Jochem5w ago
that's definitely confusing, might be a versioning issue or one is just wrong
Nick
Nick5w ago
Understand what you're getting at RE Js width and height - those are definitely rendered. But the Nextjs Image component is surely equivalent to the html img tag? yeah you're probably right!
Jochem
Jochem5w ago
no idea, I have no experience with NextJS I can see them choosing either, or switching between versions
Nick
Nick5w ago
i've actually quite enjoyed it so far tbf
Jochem
Jochem5w ago
best way to find out is to just test it
Nick
Nick5w ago
yeah i think it's intrinsic. i'll have to play with the natural width/height property that was mentioned too
Jochem
Jochem5w ago
keep in mind though, I don't think anyone really realized you were talking about nextjs for a long time, so that naturalWidth thing isn't necessarily a prop you can set on a nextjs Image component. It's a property of HTMLImgElement, which is what you get when you use querySelector to get a reference to an img tag Best bet is to test, and/or read the most recent version of the docs (or rather the version that matches the version of nextjs you're using)
Nick
Nick5w ago
ah ok, that makes sense yeah I hadn't thought about distinguishing between the html element and the JS that represented it i usually just use css too!
ἔρως
ἔρως5w ago
this wasn't specified in the initial message, so, always assumed it was pure html
Jochem
Jochem5w ago
same
Nick
Nick5w ago
yeah, thought your answer was on the money tbf 👍
ἔρως
ἔρως5w ago
i just gave you the answer for normal html luckly it is the right one
Nick
Nick5w ago
skill mate, not luck 😉