Question:`.WEBP` image not used when rendering webpage?..

[gevuong]

Hi, I have a NextJS app with App Router deployed to Github Pages, and this is one of the pages: https://gevuong.github.io/minimal-i18n-with-app-router/en/our-story

I noticed the optimized .WEBP image is not being used when the page is rendered. Instead it's using the .png version.

In the Network tab, I see that the .WEBP version of the image is fetched, but it's a 10x7 image, which is extremely small.

This is how I'm dynamically importing the image: https://github.com/gevuong/minimal-i18n-with-app-router/blob/2eb7c95e73e4d1537a21b81513e999e3c02d7249/app/%5Blang%5D/our-story/page.tsx#L19

And this is my next.config.mjs: https://github.com/gevuong/minimal-i18n-with-app-router/blob/main/next.config.mjs

Question:

1. Any idea why the optimized .WEBP image is not being used when the page is rendered?
2. Why is only the smallest WEBP image being fetched and not a larger WEBP image to better fit current screen size?

Any assistance would be greatly appreciated. Thanks!