Is This A Better Way To Handle Images in Next.js?

[@JamesQQuick]

Want to know if your website images are optimized? Check out Image Carbon for a FREE review of your website carbon footprint! www.imagecarbon.com/

[@Cloudinary]

We're glad this was able to supercharge you're workflow! 💪

[@JamesQQuick]

Thanks for being amazing!

[@dpklabs]

OMG - I've known of Cloudinary, but never used it. I definitely need to check them out more closely for some projects!

[@JamesQQuick]

It's sooooo good!!!

[@NikitaDrokin]

I just realized that you use Arc as well! I’m glad you like the new browser too.

[@DaveMacpherson]

It would be nice if the Cld image component could generate responsive image sizes and the resultant " given image width component configurations. Or can it do this already?

[@JamesQQuick]

Yeahhh! So you can do that now. It basically accepts all the parameters that Next Image accepts including "sizes" Here's the official docs page - next-cloudinary.spacejelly.dev/guides/responsive-images

[@alexanderkomanov4151]

Thanks!

[@miro-hristov]

@James Keep an eye on your Cloudinary account. One time I end up racking up $1000s in bills due to similar tool for a client who's campaign went viral 😭 Each generated image counts as a transformation. Another way to do this is on the client only using but then you can't share it on social unless you download the image.

[@JamesQQuick]

Great point. With my app specifically, the generator part uses html elements and not cloudinary directly, partially for that reason. Good thing also is that after a transformation is done once, it is cached forever!

[@abhishekchandel4244]

OG IMAGE?

[@JamesQQuick]

Are you asking what OG Image is?

[@abhishekchandel4244]

@@JamesQQuick yes, sorry for the confusion

[@JamesQQuick]

@@abhishekchandel4244 It's a meta tag in your HTML that tells websites what image to show in a preview card. Here's more info ahrefs.com/blog/open-graph-meta-tags/