Image Optimization in Astro with Cloudinary

Optimize images with modern formats and dynamically crop and resize with Cloudinary.
Learn how to use Cloudinary in an Astro app to automatically optimize and dynamically resize your images. We'll walk through adding Cloudinary to a new Astro app by building a image component that can optimize and resize our images.
🧐 What's Inside
00:00 - Intro
00:13 - Tools we'll use including Astro and Cloudinary
01:10 - Creating a new Astro app
03:33 - Wrapping an img tag with a new Astro component
05:46 - Installing and configuring the Cloudinary URL Gen SDK to deliver component images using the fetch API
08:37 - Setting up the component to dynamically deliver fetched or uploaded images from Cloudinary
09:56 - Automatically optimizing images with modern formats and quality
11:03 - Dynamically resizing and cropping images using face detection
14:57 - Outro
💾 Code
github.com/colbyfayock/my-ast...
🗒️ Read More
spacejelly.dev/posts/how-to-o...
🔔 Subscribe for more tech and developer videos
czcams.com/users/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: github.com/sponsors/colbyfayock
Other: [e-mail]
👨‍🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/uses
🧰 More Resources
Astro
astro.build/
Cloudinary URL Gen SDK
github.com/cloudinary/js-url-gen
Cloudinary JavaScript SDK
cloudinary.com/documentation/...
Cloudinary Optimizing Images
cloudinary.com/documentation/...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/danijel-zambo/st...
License code: ZSEJ0EAJYL1HEILU
#colbyfayock #astro #cloudinary #webdevelopment #optimization #performance

[@colbyfayock]

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

[@echuderewicz]

Thanks

[@colbyfayock]

Np!

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

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

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

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

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

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