Image aspect ratio, optimization, URL, error handling questions

[JPVRS]

This looks like an amazing solution to streamline the integration of Cloudinary into a Next.js application! Thanks for creating this.

I have a couple questions.

1. What is the right way to scale an image while maintaining its aspect ratio? I've found this to be kind of difficult using the Next.js Image component, which is surprising because it's such a common UI design practice. I'm talking about situations like when you have a column layout on mobile and an image that spans the width of the viewport, and you want the image to scale with the width of the viewport up to a certain breakpoint, and the height of the image should scale proportionally so the image keeps its aspect ratio.

2. With this package, it automatically uses a custom loader. Does this mean the Next.js image optimization isn't used at all, so Vercel's billing practice for image sources over 5,000 images doesn't apply? The cost for that gets super expensive, and we have a lot of images, so I need to make sure we're not triggering that at all on Vercel's side.

3. The src attribute for the component should be either a public ID or a full Cloudinary URL. The latter requires the "version" portion of the URL to be included, which seems cumbersome for us (although I'm sure it's possible) since we'd rather just be able to retrieve images based on the filenames in a db. The former seems fine if by public ID we're talking about the filename. But we do have the images in a folder on Cloudinary. Does that make a difference, or can we just pass in the filename as the src and it should work?

4. Is there anything for error handling, particularly in cases where the specified image isn't successfully found/retrieved from Cloudinary? We'd like to know if users are seeing broken images so we can address those cases. Maybe a longshot but is there something built in for that?

Thank you again for putting this out there. I'm excited to use it and hoping it'll work well for us.

[colbyfayock]

1. two ways to achieve scaling an image. By setting the width and height to a smaller size while maintaining the aspect ratio (300x600 instead of 600x800), the component will produce a resized image. On top of that, it sounds like you're looking for responsive sizing which you can use the sizes attribute to specify what image sizes you want at specific breakpoints: https://next.cloudinary.dev/guides/responsive-images

2. correct, the URL delivered in the browser is a Cloudinary URL, so Vercel doesn't apply.

3. The reason the version number is required is it's virtually impossible to consistently and safely parse the URL with the wide variety of options that one can pass in. Without being able to do that, I can't confidentally append any additional parameters to the URL without the potential for it breaking. You can see how I'm parsing the URL here: https://github.com/colbyfayock/cloudinary-util/blob/main/packages/util/src/lib/cloudinary.ts

4. There's an onError callback native to the Next.js Image component!

[JPVRS]

Very cool, thank you for those details! I think I'm clear on what I need. Feel free to close if there's nothing more to add.