Image optimization
Unanswered
Northwestern Crow posted this in #help-forum
Northwestern CrowOP
I am using the new Next.js Image component.
I am fetching my Image data from Contentful.
Is there a way to say to the Image not to load the full image size (that sometimes is really big) in order to load it faster on my page?
I could ask Contentful for an Image with a certain height and width and quality also, in order to optimize it a little bit, but I would like not to modify my Contentful query, so I was wondering if there is a "Next.js Image way" to do that.
PS: I am deploying my site on Amplify, so unfortunately I have to put
in my next.config file.
Thanks!
I am fetching my Image data from Contentful.
Is there a way to say to the Image not to load the full image size (that sometimes is really big) in order to load it faster on my page?
I could ask Contentful for an Image with a certain height and width and quality also, in order to optimize it a little bit, but I would like not to modify my Contentful query, so I was wondering if there is a "Next.js Image way" to do that.
PS: I am deploying my site on Amplify, so unfortunately I have to put
images: {
unoptimized: true,
},in my next.config file.
Thanks!
6 Replies
I think you could use the
<Image src="your_url_goes_here" className="define_size_here"/> element and just specify size within classNameMasai Lion
if its not optimized, theres no reason to use next/image, you can just use native img
next/image is optimized by default
Masai Lion
unless you set it as unoptimized, which OP said he needed to anyway, at which case it does nothing
I don't understand