CODEWITHSUNDEEP
next.jsnextjs-imageimage-optimization
Anshul M
Anshul M

Reputation: 99

Why is image loading at full size even though rendered using next/image?

I am rendering image with original size 1.4MB (1440 X 600) like this:

<Grid item md={9} sm={12}>
    <Box
      position="relative"
      width="100%"
      height="400px"
      overflow="hidden"
     >                  
        <Image
          src={image_url}
          layout="fill"
          objectFit="cover"
          objectPosition="50% 50%"
          quality={60}
        />           
    </Box>
</Grid>

<Grid item md={3} sm={12}>
   ... right side
</Grid>

On staging / local env:

On wide-screen (1020px width)
Rendered size:  736 × 352 px
File size:  42.6 kB

On small-screen (600px width)
Rendered size:  568 × 304 px
File size:  37.6 kB

On production env:

On wide-screen (1020px width)
File size:  1.4 MB

On small-screen (600px width)
File size:  1.2 MB

What is causing this behaviour? Why is image optimization not working on production?

I am using Next 10.0.5 and the website is deployed on AWS. Let me know if any more details are needed.

Upvotes: 0

Views: 1804

Answers (1)

Anshul M
Anshul M

Reputation: 99

The issue was CDN was not forwarding the Accept header to the origin (NextJS).

As mentioned in this answer "NextJS decides whether to serve the image as webP vs jpg/png/svg etc. depending on the Accept header. With the current settings, CDN would not forward the Accept header to the origin"

Upvotes: 1

Related Questions