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,
Nick87 Replies
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 imagethanks @ἔρως - that's what I though.
not sure sure how I didn't get a notification for this, but appreciate the answer!
you're welcome
this doesn't send notifications because i dont ping people
Intrinsic size has nothing to do with JS.
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
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.
that's sometimes not true
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 🙂im talking about on how to check the intrinsic size in js
a higher resolution image does generally take up more HDD space, but, again, this is unrelated to the question
not always
No need to. Check it in the web browser developer tools
i can have a 3000x3000 image of a single color
Yes, always.
and...?
that takes less space than a 150x150 image with multiple colors
and...?
and resolution isn't always co-related to high hdd space usage
Yes, that's what I said initially and, sometimes it IS related to the HDD space 😂 you seem very confused... 🧐
im saying that sometimes is and sometimes isn't
yes, and that's what I said... smh 😂
but you argued it and said the same! 😂
I give up 😂
have a good day 😂
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
again, you seem confused... perhaps your english isn't great and that's where your confusion has come from
let's end this here, the question has been answered
either way... no need to discuss JS regarding image sizes... 😂
had it though? O_o
@Nick are you satisfied with my answer? do you need any clarification?
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 😄
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
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
the resolution (or dimentions, as you say) it's just a property of the image that says "i have x and y pixels"
sure, but i was trying, badly obviously :D, to just describe the width and height of the image outside of any browser styling
yeah, that's the intrinsic resolution
I though that was pretty clear, hence my answer/reply 🙂
again, nothing to do with JS...
yeah, that's what I thought. I only asked at the time because i think the nextjs docs actually get that wrong
like I said... 😂
or at least they aren't clear
wow... just wow...
probably, describing this is very difficult
i mentioned it in the nextjs discord, but it's the nextjs discord... 😄
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
that's the size after all styles are applied, from what i understand
this is accurate afaik,
width represents the actual width in pixels on the user's screen
but it doesn't in an img component does it? that's the intrinsic width/height?
it can be, yes
width and height should reference the value of the top red arrow in Raider's image, where naturalWidth and naturalHeight reference the bottom red arrowweird, because i've seen tutorials treating it as the intrinsic dimensions
it depends on the intention
that seems like an odd decision if you're trying to reflect an img component
but good to know
setting the intrinsic size makes it so the resets don't force it to be 100vw
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
sure, but that's not how an img's width and height works is it? 🤷♂️
genuine question
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"""""""""" cssI 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
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
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
sure, but isn't the point that you'll telling the browser what the width and height is ahead of time?
ie the aspect
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:
aspect is the ratio between width and height
oh, wait, you mean the width and height HTML attributes?
yeah 🙂
so this:
pfff, I almost never bother with those
just feels weird that nextjs wouldn't mirror that
ah ok
it's rare you leave an image unrestrained by CSS
that's true, like i said, it just confused the hell out of me 😄
nextjs mirrors javascript because it's well.. nextJS
especially as I've seen teachers use it in that way (and it seemingly working)
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
are you sure? it says they're required props
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
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.
that's definitely confusing, might be a versioning issue
or one is just wrong
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!
no idea, I have no experience with NextJS
I can see them choosing either, or switching between versions
i've actually quite enjoyed it so far tbf
best way to find out is to just test it
yeah i think it's intrinsic. i'll have to play with the natural width/height property that was mentioned too
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)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!
this wasn't specified in the initial message, so, always assumed it was pure html
same
yeah, thought your answer was on the money tbf 👍
i just gave you the answer for normal html
luckly it is the right one
skill mate, not luck 😉