How to Optimize Images in Astro
HTML-код
- Опубликовано: 4 фев 2025
- 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...
Thank you so much. This still work in the latest version.
This is awesome. Optimizing images is such a hassle, until now! Thank you.
Glad it helped!
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 😊
Thanks, my friend. Do it!! :)
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?
Ok, got it! If you don't add any validation to the refine method, it fails. Not ideal.
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.
great video, would love to see more of Astro.
In the works to do more Astro content!
How does is work in combination with for example a strapi as a cms delivering the assets to Astro?
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!
@@CodinginPublic would love to see a tutorial on that.
Could you teach us how to show or render multiple images in mdx file as an array by using react or just javascript?
good tutorial and explanation
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...
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.
nice🔥🔥 i waitng❤🔥❤🔥❤🔥❤🔥
Thanks 🔥
Subscribed instantly ❤
🙌
Interesting, I might need to try this with a Udemy course I am still trying to finish about SASS/SCSS lol
😊
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?
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
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!
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...
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.
great can u do a state managment tutorial with astro thank you for the amazing content
At some point; I haven't played around with state managers in Astro yet.
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
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!
@@CodinginPublic high hopes, really suffering with next13, max performance i get is 92 and it's image comp is so awkward to use :c
@@8koi245 Astro is 🔥
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?
@@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.
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🫶
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!
@@CodinginPublic it did! Thank you so much🫶
My questions got answered on the discord. Maybe your question was not specific enough?
@@TheLeChiffre I genuinely hope so, cause already chose Astro as a go with framework