How to Optimize Images in Astro

Join the early access list for my course! learnastro.dev
The new Astro Image component is both incredibly simple and includes built-in complexity.
🔗 Key Links 🔗
- Github Link: github.com/cod...
- Docs: docs.astro.bui...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/mic...
- Theme: marketplace.vi...
- Icons: marketplace.vi...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoff...

[@anthonywahl4955]

This is awesome. Optimizing images is such a hassle, until now! Thank you.

[@CodinginPublic]

Glad it helped!

[@treyjapan]

Chris, thanks so much for yet another insightful video. Love your teaching style btw! Now I'm definitely going to rebuild my rather image-heavy blog with Astro 😊

[@CodinginPublic]

Thanks, my friend. Do it!! :)

[@HaBhBo]

great video, would love to see more of Astro.

[@CodinginPublic]

In the works to do more Astro content!

[@gonzamartinezvisintini4428]

good tutorial and explanation

[@tiscover]

Great video Chris and good job from the Astro Team. But to be honest, most of the time I am using the Picture element on my production sites. Don't want to load the same image on a small smartphone Display and a giant 8k monitor. So hopefully they will come up with a picture element soon...

[@CodinginPublic]

Yes, hopeful for that. I’ve seen some of the RFC conversation and it looks like that’s in the works, but they wanted to start with a solid starting point. One current workaround is to use something like cloudinary and reference it in the image Astro component. If you put width auto on that cloudinary image asset, you will still get the same result, but also get the benefits of the width and height, lazy loading, etc.

[@8koi245]

a month ago was 2.6?! 2.8 now 3.0 be coming soon! However same roadblock I faced, it does a pretty good optimization, but can't make it responsive, ex 400px in mobile & 800px in desktop

[@CodinginPublic]

Yeah, I think it’ll get there. They went intentionally light on the first version of the image capabilities. Hoping for the Picture component with true sized images soon!

[@8koi245]

@@CodinginPublic high hopes, really suffering with next13, max performance i get is 92 and it's image comp is so awkward to use :c

[@CodinginPublic]

@@8koi245 Astro is 🔥

[@mh-rs6zk]

I am also looking very much forward to responsive image optimisation like in Next... In the meanwhile, would you happen to have a code example using , with the different sized images generated by getImage? Or is there another approach you would suggest?

[@CodinginPublic]

@@mh-rs6zk Right now, they don’t have a way to generate different sized images. I think that's next in their plans. For now, if you want that, I'd suggest using Cloudinary or some image service.

[@phucnguyen0110]

Interesting, I might need to try this with a Udemy course I am still trying to finish about SASS/SCSS lol

[@CodinginPublic]

😊

[@unity_12]

nice🔥🔥 i waitng❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@CodinginPublic]

Thanks 🔥

[@spacecoder0526]

Could you teach us how to show or render multiple images in mdx file as an array by using react or just javascript?

[@jesustyronechrist2330]

I do wish they will add more support for remote images and files overall. I do feel the overall methology of having to redeploy the entire dang website if I need to fix 1 single typo bit of an overkill... But I guess that's why everyone uses CMS, right...

[@CodinginPublic]

You can actually use remote images with the new assets. For the build step, it may be that SSR fixes your needs. Just update the source files and Astro will SSR routes on request.

[@alisherzaitov]

Subscribed instantly ❤

[@CodinginPublic]

🙌

[@luctiemessen9897]

Thanks for all this info. I have one small question. If I add a link around an image (linking to the same image), the generation of the link always remains incorrect. I use the following syntax: [](../../assets/typeface-pairings.png) or if I just wrap the image "" in an tag, the link is referring to the initial source image (the one in the assets folder). Rendering a 404. Anybody any ideas on how to fix this?

[@TheLeChiffre]

How does is work in combination with for example a strapi as a cms delivering the assets to Astro?

[@CodinginPublic]

You can reference “external” images with the astro assets; you don't get quite as much power, but it does allow some of the features. Their docs are good on explaining that; didn't go into much detail here just to keep things simple. Let me know if you'd like a tutorial on that!

[@TheLeChiffre]

@@CodinginPublic would love to see a tutorial on that.

[@nested9301]

great can u do a state managment tutorial with astro thank you for the amazing content

[@CodinginPublic]

At some point; I haven't played around with state managers in Astro yet.

[@diegognoatto8706]

Bro nice video , nice resource. i tried to follow and everything worked UNTIL i tried to implement responsive images based on the docs is not straight forward as . import { Picture } from 'astro:assets'; dont find, the docs dont explain. im in a mess. please help

[@CodinginPublic]

Picture doesn't yet exist. They decided to leave that out of the 1.0 scope because there are a bunch of edge cases. So for now, it's just a single Image component. Hopefully soon!

[@luisnomad]

Hi there! I am using Astro v2.6.2, and the image() type in the schema config fails: frontmatter does not match collection schema. **heroImage**: Invalid input - However, it works in this example. Any idea of why is this happening?

[@luisnomad]

Ok, got it! If you don't add any validation to the refine method, it fails. Not ideal.

[@CodinginPublic]

I think the reason is it’s actually checking that it’s an image file in that validation. I believe there are other options besides checking for the image width.

[@MrBiggydicks]

Love the video but hit a few snags. The smaller issue is just the fact that despite doing the same thing you did on the index.astro page, it works but I get a red squiggly underline under the Image component. and it says: "Type '{ src: string; alt: string; class: string; }' is not assignable to type 'IntrinsicAttributes & Props'. Type '{ src: string; alt: string; class: string; }' is not assignable to type 'IntrinsicAttributes & Simplify'.ts(2322)". So not sure whats up with that. The bigger issue is the fact that the third exercise, the one where we get a featured image from a path in the front matter, just straight up breaks. So far as I can tell, despite updating the zod stuff in the config to be exactly what you have with image().refine() and all that, it is not importing my image from the assets folder. and in [slug].astro its just giving me the path string again. Any ideas?

[@CodinginPublic]

Hmm…I'd start with doing a diff check between your code and mine. I'm wondering if something small is off. It sounds like on the homepage, your image is a remote image rather than a relative path to the assets folder?

[@MrBiggydicks]

@@CodinginPublic oh it was small. I had followed someone else’s tutorial first and as a result had an arrow function in defineCollection. Like defineCollection(() => {…}) instead of defineCollection({…}). As for the issues with the typescript errors, I simply needed to gut all remnants of the other Astro Image component. In fairness to them they say you need to do this in the docs. I should probably learn to read better

[@MrBiggydicks]

All I can say is this is now my go-to Astro channel. Keep it up!

[@MrBiggydicks]

@@CodinginPublic oh while I have you, any ideas for a simple email form at the bottom of the home page? The old site I'm moving to astro was PHP. One of the perks of PHP is it was very easy to write a little function that allowed me to take whatever was put in the form and send it to a personal email. It was free, sloppy, but effective. Whats the closest thing the Astro/jamstack world

[@m4t1box]

Try setting height and width props on Image component

[@alisherzaitov]

Hi Chris, do you think Astro is a good framework to go with for a blog? I have concerns due to their “dead” discord, where nobody answering question people ask. Does it perform well seo wise? Does it support the latest html5 tags? And what cms would you suggest if you are familiar with either ghost or storyblok? Thank you🫶

[@CodinginPublic]

Yep, I think it's great for a blog! SEO capabilities are there (since you can only choose between SSG and SSR right now and both are crawlable by search engines), but you have to know what you’re doing like with any SEO stuff. Not sure what HTML tags you’re thinking of, but it should. I haven't used either Ghost or Storyblok, so I couldn't say. Astro has a bunch of great integrations with CMSs. Hope that helps!

[@alisherzaitov]

@@CodinginPublic it did! Thank you so much🫶

[@TheLeChiffre]

My questions got answered on the discord. Maybe your question was not specific enough?

[@alisherzaitov]

@@TheLeChiffre I genuinely hope so, cause already chose Astro as a go with framework