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
https://github.com/colbyfayock/my-ast...

🗒️ Read More
https://spacejelly.dev/posts/how-to-o...

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/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!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Astro
https://astro.build/

Cloudinary URL Gen SDK
https://github.com/cloudinary/js-url-gen

Cloudinary JavaScript SDK
https://cloudinary.com/documentation/...

Cloudinary Optimizing Images
https://cloudinary.com/documentation/...

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/danijel-zambo/st...
License code: ZSEJ0EAJYL1HEILU

#colbyfayock #astro #cloudinary #webdevelopment #optimization #performance