Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary
Vložit
- čas přidán 27. 07. 2024
- Learn how to boost performance in a Next.js app with automatic optimization of images, responsive sizing, and dynamic cropping with AI. We'll walk through setting up Next Cloudinary in a Next.js app to server modern formats, use the sizes prop to set up responsive images, and crop based on where something is in a picture with object detection.
🧐 What's Inside
00:00 - Intro
00:16 - Tools we'll use like Next.js and Next Cloudinary
00:46 - Creating a new Next.js app from a demo starter
01:36 - Automatically optimizing images in Next.js with Next Cloudinary
02:27 - Installing and configuring Next Cloudinary
03:43 - Delivering remote images from Cloudinary with the Fetch API
04:52 - Setting up responsive images with the sizes prop
07:25 - Dynamically cropping images with AI object detection
09:51 - Outro
🚀 Starter
github.com/colbyfayock/demo-g...
💾 Code
github.com/colbyfayock/my-ima...
🗒️ 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: hello@colbyfayock.com
👨🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/uses
🧰 More Resources
Demo Gallery Starter
github.com/colbyfayock/demo-g...
Next Cloudinary
next-cloudinary.spacejelly.dev/
🎼 Music
Music from #Uppbeat (free for Creators!):
uppbeat.io/t/moire/downtown-snow
License code: EHFVNVZX3XK62I5R
#colbyfayock #nextjs #cloudinary #images #optimization #performance #webdevelopment - Věda a technologie
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Just what i was looking for! Thanks a lot colby😁
No problem!
❤
😁
Hey Colby, thanks for the amazing video. But it leaves me questioning if there is not a simpler way of doing such a important and widespread feature, that does not rely on a third party library.
As a website scales and uses such providers, you would need to pay hundreds of dollars monthly for image resizing, contact form delivery, etc. The free tiers are enough for my personal portfolio website. But they are not something I am willing to use on client projects that may need more down the line.
Is it your personal preference to use those third party providers for ease of use, or is there just no other way with the nextjs tag?
great question! I think there are a few points here
Starting with the last line - wanted to clarify that this video is using Next Cloudinary, a wrapper around Next.js Image, this isn't the stock Next.js Image. but beyond that
simpler: I'd argue this (Cloudinary) is one of the simplest methods to do this. simple options, powerful results. I'd be curious to hear about some other methods that you find simpler
3rd party library: sure, but there's a tradeoff between building something yourself and paying someone else who specializes. this can be said for any service, auth, the cloud (as opposed to hosting your own servers)
payment: my guess is your relative scale is a bit off there, you would need to be at a really high scale to be getting to that point, and a lot of customers see the ROI in using solutions like this because of the benefits they provide, on top of this just being a small subset of the features. building your own service not only costs money to build, but maintain, and still the cost of the services you use to build it
people have different preferences. there are definitely a lot of open source solutions to do this kind of thing, but again, you have tradeoffs, and generally they're not as easy to use or set up. it depends on where you want to prioritize your time.
great content thanks , you are way under appreciated , bad youtube, i use margin top and margin left to reach desired landing, for size issue i create folders respect to sizes and scale them with imagemagick
Thank you! Nice
Another great tutorial! I think the only thing that is missing to complete my image features on my website is how to handle the lazy loading blur effect that requires a base64DataUrl when using next/Image. Is there an easy way that Cloudinary handles that?
the tricky thing, and why its not baked in to Next Cloudinary, is that i would need to do that serverside
React Server components changes things and i haven't really explored that as a mechanism yet
in the Pages Router, created those those versions in a data fetching method and pass it down into the components through the base64DataUrl prop which should "just work" since its a wrapper
as far as React Server Components and the App Router, currently the component is a client component, because it polls for images after processing which has to happen clientside, but im trying to think of ways to separate that logic to provide both, but thats not clear yet
so right now i dont have a great answer unfortunately for a native solution right now, but open to ideas
If, when I was trying to solve this problem originally, there was just some documentation on how to do it in a nice simple way, I honestly wouldn't care if it wasn't completely baked all into one component. It would have at least saved me time on research and learning how to do it.
Ideally I just want to pass a param to enable the data64Url feature, but seeing as how server-side needs to be involved, that complicates things.
Maybe the solution is something like a server-image component if the user wants to use the base64data url in a simple way. If the page is static you won't even notice. Not sure what impact it would have on a server-rendered page. Else the fallback way is like a 2 part step with some documentation on how to process the image on the server and then pass it down to the client.
Hope this helps in some way!
@@spencerbigum1309 thanks spencer!
Hey, Is there a means of servering the images from he next public folder?
Do you mean with Cloudinary? Or just generally from next? Any file you drop in the public directory will be available as a static asset. Public/file will be available at .com/file
What's the pricing?
check this out: cloudinary.com/pricing - includes a generous free tier