Auto Detect Cloudinary and CDNs, Easily Deliver Images with Unpic - DevJams Episode #26
Matt Kane, principal software engineer at @NetlifyApp has developed the Unpic project. With it, you can automatically detect the content delivery network (CDN) for an image. On top of that, it uses the CDN’s URL API to resize and format images. It then generates the correct srcset and sizes attributes for the image.
Join Matt for this Cloudinary DevJams episode to walk through Unpic. He will show how to use this component with popular frameworks like Astro, React and Svelte, using simple img tags. Matt also will demonstrate how Unpic can handle responsive resizing of images, while preserving aspect ratio and avoiding layout shift.
If you're looking for a simple way to work with CDN-delivered images in your favorite framework, don't miss this episode!
---
Episode Sections:
00:00 Introduction to DevJams
00:38 Introducing the Hosts
01:02 Discussion on Unpic Project
01:38 Why Unpic is Exciting
01:59 Unpic Project Overview
03:21 Inviting Guest Speaker: Matt Kane
03:38 Matt Kane's Background and Unpic's Origin
06:22 The Problem with Current Image Handling
11:16 The Birth of Unpic
12:29 Unpic's Functionality and Features
20:34 Unpic's Support for Various Frontend Frameworks
20:52 Unpic Demonstration with Astro
23:59 Understanding Unpic's Image Tag Generation
26:03 Unpic's Image Resizing and Cropping
27:14 Dynamic Image Size Generation in Unpic
28:26 Understanding Image Sizing and Resizing
29:53 Exploring Image Resolutions and Device Compatibility
31:18 Unveiling the Unpic Library
32:05 The Power of Open Source and Community Contributions
34:54 The Magic of Unpic: Automatic Image Handling
49:15 The Future of Unpic: Enhancements and Potential
51:49 The Impact of Unpic and Call to Action
---
Mentioned Technology:
Astro: https://astro.build/
GitHub Repository for Unpic: https://github.com/ascorbic/unpic
Unpic's Homepage: https://unpic.pics/
---
Not a Cloudinary user yet? Sign up for your FREE account today! https://cloudinary.com/users/register...