Image Optimization in Astro with Cloudinary

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@mariansam_was_taken]

Cool video, looks like an ad, but a really good one!

[@colbyfayock]

thanks, but oh :( is there something particular that came off that way? i intentionally try not to appear that way and primarily deliver value (even though i work for Cloudinary, this is not a Cloudinary channel for instance)

[@JamesQQuick]

Does loading="lazy" just work as is? I tried it in a vanilla js project and it didn't seem to work?

[@colbyfayock]

Weird it's supposed to. Do you have the code somewhere?

[@djmtype]

Video idea: Astro with Wordpress structured content and Cloudinary

[@colbyfayock]

nice idea! I'll add it to my list

[@mishell8492]

Fucking master. Just what i was looking for. Thanks a lot, man, nice explanation and straight to the points. Thanks a lot

[@colbyfayock]

🙌 no problem!

[@strangequark723]

In this context, how could we include a named transformation (into the fetched URL, for specific images)?

[@colbyfayock]

so in this example, you'd likely want to create a prop on CldImage that controls that named transformation for instance: const { src, namedTransformation, ...props } = Astro.props; and then conditionally apply it to the image instance if ( namedTransformation ) { cldSrc.addTransformation(namedTransformation) }

[@strangequark723]

@@colbyfayock Worked like a charm; thank you very much Colby!

[@paulydee5650]

Hey Colby, great job on the video, it was very informative and I was able to get up and running quite fast. I was wondering if there is a types module for Cloudinary? I noticed in your video you are getting type errors (specifically for .delivery() and .resize() methods) and I am as well.

[@colbyfayock]

hey, thanks! so i think the reason it was giving that error is because technically i was using the SDK in an unintended way, as i prefer the shorter syntax than the more verbose. but since then i learned about some shortcuts, specifically `.quality('auto')` instead of using the delivery method cloudinary.com/documentation/javascript_image_transformations#shortcuts_and_aliases as far as resize goes, unfortunately there's not a shortcut, so you'd either have to let the TS error go or adhere to the SDK, which you can find how to use it "properly" here: cloudinary.com/documentation/javascript_image_transformations#resizing_and_cropping

[@paulydee5650]

@@colbyfayock thank you!

[@AlbertoChamorro]

Really great video Colby! Thank you so much! One question: have you tried @astrojs/image integration? It could be a great second part about using images in Astro

[@colbyfayock]

no i haven't yet! when i made this i dont think it was quite ready yet. i was talking to the Astro team though about how we can give a good experience for Cloudinary

[@echuderewicz]

Thanks

[@colbyfayock]

Np!

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news