Original: https://codingcat.dev/podcast/2-16-optimize-your-media-experience
▶ Watch on YouTube & Subscribe to CodingCat.dev
Questions
- Last time we had you on, you were working for Applitools, can you give us some background and how you ended up at Cloudinary?
- For those that don’t know, what is Cloudinary?
- Why or when might we need a media manager?
- Pricing?
- What frameworks are supported?
- Demo
Additional Links
https://www.learnwithjason.dev/blog/auto-generate-social-image
https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary
Technical Overview: Optimize your Media Experience
2.16 - Optimize your Media Experience with Cloudinary: Colby Fayock walks us through how to optimize your media experience with Cloudinary. https://codingcat.dev/podcast/2-16-optimize-your-media-experience Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole-t
When applying the concepts from Optimize your Media Experience in a production codebase, teams working with Cloudinary, React, Builder.io, Remix should align their implementation with the Cloudinary Programmable Media Docs (Automated image/video optimization, responsive delivery, and transformations). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.
Key Engineering Takeaways
- **Core Topic Focus: **Practical strategies for Cloudinary, React, Builder.io, Remix covered in "Optimize your Media Experience" (Colby Fayock walks us through how to optimize your media experience with Cloudinary.).
- **Production Implementation: **Combine the architectural patterns demonstrated in this podcast with the official Cloudinary Programmable Media Docs for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: **Follow along with the live coding demos and discussion on YouTube (Optimize your Media Experience) and subscribe to CodingCat.dev on YouTube for weekly deep dives.
Video Chapters & Timestamps
Jump directly to any segment of Optimize your Media Experience on YouTube using the timestamped chapters below:
- 00:00: PM (EST)
- 00:00: Intro
- 00:00: Colby Intro
- 00:00: Rest
- 00:00: applitools
- 00:00: Cloudinary Media Platform
- 00:00: MediaJams.dev
- 00:00: AVIF format
- 00:00: Auto f_auto
- 00:00: When do you need a media manager?
- 00:00: Cloudinary Demo
- 00:00: Bad Dad Joke
- 00:00: Media Library
- 00:00: Sanity and Cloudinary integration
- 00:00: CDN caching demo
- 00:00: url parameters
- 00:00: sdk frameworks
- 00:00: Alex's Demo on Remix
- 00:00: Additional Image Transformations
- 00:00: Purrfect Picks
Resources, Links & Official Documentation
- *Watch on YouTube: *Optimize your Media Experience Full Video (plus Subscribe to CodingCat.dev)
- *builder.io: *https://Builder.io
- *Show Pick: *Divvy, Cloudinary and Remix (picked by Alex Patterson)
- *Show Pick: *Personalized Social Media Cards Video (picked by Brittney Postma)
- *Show Pick: *Personalized Social Media Cards Post (picked by Brittney Postma)
- *Show Pick: *Sendestar Water Bottle (picked by Brittney Postma)
- *Show Pick: *Ozark (picked by Colby Fayock)
- *Show Pick: *Peacemaker (picked by Colby Fayock)
- Colby Fayock Guest Profile & Episodes on CodingCat.dev
- Colby Fayock on GitHub
- Episode Sponsor: Builder.io
- Cloudinary Programmable Media Docs: Automated image/video optimization, responsive delivery, and transformations
- React Official Reference: Hooks, Server Components, and UI state patterns
- Builder.io Developer Documentation: Visual headless CMS, SDKs, and design-to-code workflows
Related CodingCat.dev Tutorials & Podcast Episodes
- Automating Infrastructure with Digger.dev: We sit down to chat with Igor from http://Digger.dev how to automate all of your infrastructure needs on AWS. The goal of Digger is to make AWS simple!
- Using No-Code with Builder - Part 1: In this first part Alex sits down with Steve Sewell to understand how http://builder.io/ is different from other no-code solutions.
- Cloudinary: Talking with Tessa Mero all about Cloudinary, the Media Developer Experts program, and comparing other SAAS platforms.
Frequently Asked Questions (FAQ)
What are the main takeaways from Optimize your Media Experience?
Colby Fayock walks us through how to optimize your media experience with Cloudinary. 2.16 - Optimize your Media Experience with Cloudinary: Colby Fayock walks us through how to optimize your media experience with Cloudinary. https://codingcat.dev/podcast/2-16-optimize-your-media-experience Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole-t Throughout this podcast, Colby Fayock breaks down real-world implementation details for Cloudinary, React, Builder.io so developers can apply these patterns directly in production.
How do you implement Cloudinary best practices in production?
When adopting Cloudinary and React in a production stack, start by validating your configuration against the Cloudinary Programmable Media Docs (Automated image/video optimization, responsive delivery, and transformations). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
Where can I watch the full Optimize your Media Experience walkthrough and find related code resources?
You can watch the complete video session for Optimize your Media Experience on the CodingCat.dev YouTube channel. For a deeper dive into Cloudinary, check out our related guide: Automating Infrastructure with Digger.dev.
Top comments (0)