AFAIK there is no feature like that in next Image

but what I think you can do is

read metadata of the image file

write a conditional to whether render the image or not

but why would you need this feature tho?

@averydelusionalperson ,Thanks for your reply. Could you please give me an idea how could I read the metadata of that image <Image src={product.image} alt={product.name} width={200} height={200} />

@Hakuna Matata ,I went through their documentation and found that I can restrict max_height or max_width by using sizes prop.

I thought you were speaking about file size?

@averydelusionalperson ,you can restrict Image component from displaying if the size is more than 5mb. first convert 5mb into equivalent height & width by below formula : Size (in MB) = (Resolution in pixels) x (Color depth in bits) / 8 / 1024 / 1024 . Now use sizes props to define max-height & max-width.What do you think?

if you can do it, noice

I was thinking of direcly getting image size

Could you share your idea please.I will check in your way.I am confused how to get sizes via metatag.

I don't really have an idea on how to do that

but I assume that you can read the response content-length if you fetch an image url

you can maybe write some custom image wrapper

IDK

yes I am fetching an image as an url only. But how to get image sizes from an url?. I can use a wrapper too if I get those sizes directly from an image url.

maybe it helps you

@averydelusionalperson , Great content. Sure It will help me a lot. Thank you so much for your help.

Glad that I can help, once/if your problem is solved, consider marking answer as solution

resolved.Thanks @averydelusionalperson

noice, consider marking answer as solution

^

How to mark answer as solution. Where is that option.