WebP conversion provided by Next.js image optimization feature seems not working

[jaga810]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

https://main.d3pdm8wpju4m0p.amplifyapp.com/

Region

us-west-2

Amplify Console feature

Not applicable

Describe the bug

WebP conversion provided by Next.js image optimization feature [1] seems not working on Amplify Console. Similar issue is also created in amplify-js repository [2].

[1] https://nextjs.org/docs/basic-features/image-optimization [2] https://github.com/aws-amplify/amplify-hosting/issues/2906

Expected behavior

WebP conversion provided by Next.js image optimization feature [1] works.

Reproduction steps

1. npx create-next-app --example image-component image-app

2. cd image-app

3. npm run dev

4. Check images are served as WebP type using developer tool as below.

   

5. Push image-app directory to your repository.

6. Deploy image-app using Amplify Console with default settings.

7. Check images are served as PNG type using developer tool as below.

   

Build Settings

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Additional information

No response

[ghost]

Hi @jaga810, Thank you for providing repro steps. We are investigating this. Will update once I have more information.

Update: We were able to reproduce this behavior and identify this as a bug. We are working on fixing this. Thanks!

[alrabdullah]

Until the bug is fixed, did anyone find a workaround for this bug?

[ghost]

Hi @alrabdullah, unfortunately there isn't a workaround for this but we are prioritizing this issue.

[carlosriveroib]

This happens too with NextJS i18n https://nextjs.org/docs/advanced-features/i18n-routing I have the default locale configured in en and my browser is configured in es. It should redirect to es automatically. It works on Vercel but not in AWS

[shaunchander]

For what it's worth, when accessing the NextJS app using the Cloudfront URL, we do get webp images back.

That's makes me think that somewhere between Amplify requesting images from Cloudfront that the accept/webp header isn't being transferred so when Cloudfront gets the request for the image it just returns the default format of that image.

This also got me thinking, what is the difference between the Amplify URL and the Cloudfront URL for a NextJS app?

[dottodot]

I'm seeing the same behaviour as @shaunchander. Any idea when this might be fixed?

[november11th]

Hi @jaga810, Thank you for providing repro steps. We are investigating this. Will update once I have more information.

Update: We were able to reproduce this behavior and identify this as a bug. We are working on fixing this. Thanks!

I am having the same issue.... Are this bug still not fixed?

[gouravbhardwaj]

As a workaround we can use platforms like cloudinary and use their sdks to make image responsive, lazy load, decrease size.

[ghost]

There seems to be something happening with png and transparent backgrounds. I don't know if that is related but when using the Image component, the transparent background becomes black. I noticed this happens only on external urls only.

Internal url image (works fine) External image url (transparent is transformed to black) If you play around with the background-color property on both images, you'll see that the external one's background doesn't change. However, everything works fine when using next dev.

For the record, I am using nextJS 11 and nodeJS 16

[xiaoxiaosaohuo]

yeah, webp is not working for me too, it works in local, but in production, the image is still jpeg or png, I'm using nextJS 12

[naingaungphyo]

@xiaoxiaosaohuo Hi, just a side question, can you use Nextjs 12 SSR in amplify. As far as I know, version 12 is not supported officially yet.

[xiaoxiaosaohuo]

I use the latest version, I think you're right, Amplify support version 11

[hernanrdiazr]

@hloriana. What is the status of this issue?.. Automatic WebP conversion is a very nice feature of NextJs... is a shame is not working with amplify

[axelpach]

You know approximately when will Amplify suppot Nextjs 12 Image webp optimization?

[chstrong]

I have the same issue. Appreciate it if support for this could be added, due to SEO. I only get a 93 in performance, I'd like to see Amplify as the fastest host out there giving me a 100 on Google Lighthouse :)

[ivowiblo]

so this bug has been open by 10 month now. is there any update or eta? what's the point on using amplify if it does not work?

[calavera]

I am pleased to share we have now launched support for Next.js 12 and 13 image optimization. For more information, please see our blog post at https://aws.amazon.com/blogs/mobile/amplify-next-js-13

If you run into issues with Next.js 12 or 13, please open a new issue so we can track it specifically. Thank you everyone for your patience and support. It's much appreciated.

[github-actions[bot]]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please either tag a team member or open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.