digital kraken
I am updating an image on my client's site and moving to @astro/image. Before I did not set a width/height on the img and I knew that was not a best practice. However, it gave me an image that would keep it's aspect ratio no matter the width of the viewport.
When I move to the <Image> component, I cannot figure out how to keep the aspect ratio. The image is smooshed at all viewports. What am I doing wrong here?
fit="contain" doesn't do it.
style="height: auto;" does do it — but is that the right way?
The live site without @astro/image can be seen at https://loumarcsigns.com, and the branch I am working on with @astro/image is currently at https://feature-amazon-astro-image--loumarc-signs.netlify.app/
scenic echo
What values are you using for width and height?
Also, I recommend using Astro's new built in image optimization instead of the older @astrojs/image integration https://docs.astro.build/en/guides/assets/
digital kraken
Oye, didn't realize there was something new. I didn't set a width or height because it was setting them automatically
They are local images
scenic echo
Ah ya I forgot the old integration does not require width and height , the new <Image> component does
local images are fine
digital kraken
I changed everything to <Picture> because I could set widths
Doesn't appear the new assets has Picture yet. Or at least, theres no docs for it
scenic echo
Do you want to use <Image> or <Picture>? The new asset feature does not currently support a <Picture> component so if you would have to use @astrojs/image
Oops you beat me to it
digital kraken
Yeah I am going to stick with this and wait until <Picture> is in the new Assets
scenic echo
Ah ok, let me check out the repo
When using widths you also need to include a aspectRatio
digital kraken
Somehow it would appear I no longer need the style: height: auto;. Maybe it had something to do with moving it from <Image> to <Picture>. Running a build now without it to see if it screws up the aspect ratio.
Oh, interesting
How does one calculate the aspect ratio of an image?!
scenic echo
You can use a number like this aspectRatio={width/height}
digital kraken
Pixel Height: 631
Pixel Width: 2,000
That's the images native height/width. I can try that.
scenic echo
Yes that should work
digital kraken
Damn I need to figure out the height and width of all these images now
Haha
Very manual process. Haven't figure out an easy way to get that without opening each in Preview.
scenic echo
I think the width/height is on the imported image object
If you console.log() your image import do you see a width/height property?
digital kraken
That might work. Manually did it this time
Will check that next time.
Alright added aspectRatio to all the images not imported with Sanity https://github.com/frankstallone/loumarc-astro/blob/main/astro/src/pages/index.astro#L38
I would ask if I could use this with Sanity but since it's being deprecated for Assets I think I better wait.
Getting great results for performance but that big main image is being dinged by Lighthouse for not having a width and height. Odd
That particular image has a height/width that is relevant to the viewport width though.
scenic echo
I would ask if I could use this with Sanity but since it's being deprecated for ...
I don't see why you couldn't use it
digital kraken
I would be nice to have the same API for everything
scenic echo
That particular image has a height/width that is relevant to the viewport width ...
O thats weird, I am not sure there is anyway to fix that since the tag is generated by the component
digital kraken
Right now I am using astro-sanity https://www.sanity.io/plugins/astro-sanity
Specifically it's Image Builder Helper in this case.
scenic echo
O I just realized its a different image throwing the error here: https://github.com/frankstallone/loumarc-astro/blob/main/astro/src/pages/index.astro#L199, is there a way to get the image width/height from sanity so you can pass it as an attribute?
digital kraken
In my latest screenshot above I am referring to the "1st Party" image. It's the big Amazon image you see. That is a local image, not a Sanity image.
scenic echo
I don't think there is any way of fixing that since the tag is generated by the <Picture> component, looking around rn
digital kraken
FWIW I am not getting that error on any other <Picture> image on that page that is using the same properties.
scenic echo
True 🤔
The only difference I see is the loading="eager" prop on the header component
scenic echo
Not too sure why lighthouse is flagging it. It looks like none of the <img> tags on the page have an explicit width/height (except top-right logo), shouldn't they also get flagged? Weird...
digital kraken
Agreed!
It is a weird one. It's not the end of the world but curious as to what is going on there.
With reguards to Sanity, it doesn't give you a width or a height.
{
_type: 'image',
asset: {
_type: 'reference',
_ref: 'image-f9c0f01e222765ea9ead406858d7ac433bced0a9-815x624-jpg'
}
}
---
l {
options: {
baseUrl: 'https://cdn.sanity.io',
projectId: 'yiwm54j7',
dataset: 'production',
source: { _type: 'image', asset: [Object] }
}
}
This is what you get from Sanity. Above --- is the straight .mainImage object. Then below is what you get returned from urlForImage().
Technically, it looks like you get the original images height/width in that assets._ref string...
digital kraken
Created a new thread for the height and width situation — https://discord.com/channels/830184174198718474/1126235996338520144