Working with Images in Astro

[@nickwoodward819]

Hey Chris, nice tutorial! Am I right in thinking the Picture component doesn't support multiple src images for composition Like the 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!

[@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?

[@gominakehinde9687]

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.

[@joshuamitchell6204]

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?

[@wasituzayer9728]

Does the output of 'getImage' have to be passed to another '' 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!

[@CodinginPublic]

Glad you found it helpful! You can just pass it to a normal image tag. It’s already optimized at that point!

[@arjitmishra100]

How to use Image / Picture tag to optimize jpeg image given that the link of the image is in .md file and you cannot import it. (like in your blog course)

[@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.

[@CodinginPublic]

Sure thing! The biggest difference is that picture element allows for both multiple image sizes AND several image formats. So it provides more flexibility for the clients browser to choose the best image for the device and screen size. The linked article from MDN provides a lot of helpful info here. Hope that points you in the right direction!

[@MyOwnPufferFish]

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

[@CodinginPublic]

Use the getImage function in the frontmatter. There’s a great example in the docs!

[@MyOwnPufferFish]

@@CodinginPublic great thanks. I thought this was only for ssr sites, but i guess it works for static sites too?

[@andreb.1352]

i want to use the remote images solution right here, but my remote images are in markdown.. so adding the Image Components works, but the same image with same remote url in markdown is not generating and is just using the external image, how can i hook into it to have the same effect on the markdown image

[@odra873]

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?

[@CodinginPublic]

You’ll always need to be careful to ensure your hosting platform is set up to handle traffic jumps. That would also include images with other services. Image services will also charge you for huge bandwidth, so you’d still need to be careful there. In the end, it all comes down to traffic.

[@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?

[@ManuelChagoyan]

Got it. CSS overrides the width and height attributes for responsive images. Thanks!

[@CodinginPublic]

You got it!

[@bobh4686]

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.

[@CodinginPublic]

Sometimes you’ll need to press control + spacebar. Sometimes I have to reload the VSCode window 🤷‍♂️ hope that helps!

[@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.

[@CodinginPublic]

It looks like it’s .png according to the docs. But I’m having it choose either jpg or png as the fallback (whichever the image is), so I’m wondering if the docs need to be updated?

[@iamfrankstallone]

@@CodinginPublic Interesting. I see the same thing you do in the docs about .png fallback for static images. I have formats={['avif', 'webp']} set on my Picture component in a project with Astro 4.2.1 and the live site has a picture component with a avif, webp and jpg. 🤷🏻‍♂😄

[@iamfrankstallone]

Erika on the Discord said it's jpg for jpg images. She said she thought she documented that but may have missed it. 😄

[@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.

[@CodinginPublic]

Hmm. I’m using it on several sites (one with probably 600? Images) without issue? Hoping you can start using again and enjoy it!

[@szym6r]

@@CodinginPublicon one of my sites I generate about 70K images using Astro (thank God for using cache) and I haven't had any problems with it in the last year ;-)

[@thewaliiiii]

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

[@CodinginPublic]

It creates it on build! So it’s just a single image that’s served to users.

[@knolljo]

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

[@CodinginPublic]

That was available in an earlier version. Now it’ll lock it to the aspect ratio of your defined width and height or you can use CSS.

[@Lautaro100ful]

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

[@CodinginPublic]

If I'm understanding you, you'd need to use the getImage function. The hard thing here is you can only pass an imported image to that function. The easiest solution will probably be to move your images to the public directory (or use a cloud image provider like cloudinary). You can then reference your images as strings in the getImage function. If you use a service, you'd want to add your service domain to the domains array in the astro config. I know that's a lot in a few sentences here, but hopefully that helps and makes sense?

[@marcosilvera2264]

I applied what was explained and the performance worsened xd From 66 points it went to 51 points and the weight of the images increased :( Do you have any tips to optimize KZbin s? That tells me that it is poorly optimized

[@nigelpallatt]

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

[@CodinginPublic]

Just part of installing Astro! ‘npm create astro@latest’