Working with Images in Astro

🔗 Key Links 🔗

---------------------------------------

🔗 Additional Links 🔗

---------------------------------------
🎨 VSCode Theming

---------------------------------------

🌐 Connect With Me 🌐

[chrizzzly_hh]

Great tutorial as always Chris!

Out of curiosity; why are you sometimes using curly braces for static strings as your values inside the properties and sometimes just the string?

[joshuamitchell]

Great video! Just wondering which one of these you recommend for "go-to" general use or which one you generally tend to use that has best practices?

[gominakehinde]

Great video Chris! I have a question. When using the image component, the images renders during development. However, when i deploy on vercel i get n error saying th fil type of the image is unsupported (it's jpg).

Also, when i try using a simple img tag, the images show in development but do not show in production. My imaes are in the src folder.

Its been really tough finding a solution.

[nickwoodward]

Hey Chris, nice tutorial! Am I right in thinking the Picture component doesn't support multiple src images for composition Like the <picture> tag does?

Also, something I've always been confused by - shouldn't the width and height be the intrinsic values of the image on your disk rather than the values you want to render at? If that is true (and I'm not entirely sure it is), won't setting the width to 420px prevent the browser from picking a larger image from the `widths` array?

Potentially relevant part of the astro docs: "Widths that are larger than the original image will be ignored to avoid upscaling the image"

Either way, very clear and concise explanation as usual!

[pmothais]

Nice video. Thanks for the explanation. However, could you give more details regarding their use cases? I'm a bit confused to understand which one is better to use in which case.

[wasituzayer]

Does the output of 'getImage' have to be passed to another '<Image />' tag in the client-side, or can I just pass it to a html img tag? Would there be a difference? Also, very helpful tutorial!

[bobh]

Bit off topic but how does that autocomplete function work? Astro language support is enabled but I'm not getting any of the suggestions I see in your videos.

[MyOwnPufferFish]

Hey Chris (or anyone having the answer to this). How do you use this Image tool to handle background images ?

[odra]

there was yesterday the 100k bill video from theo all because of a 3mb file on the static site, if we now put all our images in astro itself cant the bandwidth price explode? so its better to host the images somewhere else and just embedded them?

[waleedkh]

Does it create a new optimized image for each user, or does it make a cached version of the image?

[knolljo]

Is it possible to have images with a fixed aspect ratio?

[michaelfrieze]

I've had issues with Astro's image component. Sometimes the images just don't load on the deployed site. So I stopped using the image component. Maybe that issue has been fixed since I last used Astro.

[ManuelChagoyan]

Going to play with this, but if you are defining width and heights on the Image component in pixels, how does it impact responsive CSS percentages?

[Lautaroful]

Hello, i' dont know if you going to read this. But i have a problem with Astro, react and json. I'ts simple to resume, i have a json's with images (the path is assets, not in public, i try in two but i'ts the same), then i use react to make a component with usestate for extract the info and change the json's data. The finish result is something like this src={data.src}, when i put in production the images dont show, and when put pnpm run build, the dist folder have a problem, and a problem with the dependecie sharp, i install and clean the cache. In your video i learn the {Image.src} thing, but i' cant do src={data.src.src} with my json

[iamfrankstallone]

Is jpeg/jpg an automatic fallback for Picture’s format? I seem to remember you can do [avif, webp] and it’ll give you those two and a jpg.

[nigelpallatt]

How do you install it? is it an import or is it a download?