Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@peapuffer3514]

Just what i was looking for! Thanks a lot colby😁

[@colbyfayock]

No problem!

[@colbyfayock]

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

[@iwo_sawicki]

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?

[@colbyfayock]

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.

[@hubifriedriecch9134]

❤

[@colbyfayock]

😁

[@cheattube]

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

[@colbyfayock]

Thank you! Nice

[@spencerbigum1309]

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?

[@colbyfayock]

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

[@spencerbigum1309]

​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!

[@colbyfayock]

@@spencerbigum1309 thanks spencer!

[@karlr4792]

Hey, Is there a means of servering the images from he next public folder?

[@colbyfayock]

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

[@codedusting]

What's the pricing?

[@colbyfayock]

check this out: cloudinary.com/pricing - includes a generous free tier