Working with Images in Astro

Рет қаралды 5,341

4 ай бұрын

Join the early access for my course! learnastro.dev
🔗 Key Links 🔗
- Github: github.com/coding-in-public/a...
- Astro docs: docs.astro.build/en/guides/im...
---------------------------------------
🔗 Additional Links 🔗
- Responsive Images MDN support article: developer.mozilla.org/en-US/d...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

Пікірлер: 33

@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!

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

@chrizzzly_hh 4 ай бұрын

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?

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

@pmothais 4 ай бұрын

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 4 ай бұрын

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!

@wasituzayer9728 4 ай бұрын

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 4 ай бұрын

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

@bobh4686 4 ай бұрын

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 4 ай бұрын

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

@odra873 4 ай бұрын

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 4 ай бұрын

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.

@michaelfrieze 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

@@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 ;-)

@ManuelChagoyan 3 ай бұрын

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 3 ай бұрын

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

@CodinginPublic 3 ай бұрын

You got it!

@waleedkh9769 3 ай бұрын

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

@CodinginPublic 3 ай бұрын

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

@Lautaro100ful 2 ай бұрын

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?

@knolljo 4 ай бұрын

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

@CodinginPublic 4 ай бұрын

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.

@iamfrankstallone 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

@@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 4 ай бұрын

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