replace png and jpg files with webp format

[gevuong]

Images with medium to large file sizes in .png, .jpg, or .jpeg in public/images/... should be replaced with the same image but in webp format. The webp images are located in /nextImageExportOptimizer in their respective subdirectories. For example, the the original png image for the /faq page is located in /public/images/faq. The optimized webp images for the /faq page are located in /public/images/faq/nextImageExportOptimizer. Select the image size that is closest the size of the original image where the width of webp image >= width of original image.

This will significantly reduce bundle size and improve overall performance metrics, such as FCP, FMP, and TTFB.

Also, investigate which device sizes and image sizes are sufficient for the site. This is the current default. We probably don't need to support that many image and device sizes. This will significantly reduce the number of optimized images and bundle size. At the time of writing this, the build optimizes 84 images with 17 sizes, producing 1428 optimized images.

  images: {
    loader: 'custom',
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },

Update: Created a separate ticket to address the 2nd half of this issue involving updating image optimization configs: https://github.com/gevuong/minimal-i18n-with-app-router/issues/30. This means this ticket will only cover replacing the original images with images in webp format.

[ridham-virufy]

@gevuong our people, OYW, navbar, faq are the only folders which have a format that is not webp. /nextImageExportOptimizer that you mentioned is not present in those folders. Do I have to convert those to webp on other sites or I run something that will create those optimized image?

[gevuong]

If you haven't already, try running npm run build, and I think the folders should appear.

[gevuong]

Quick update: I went ahead and replaced some of the background images with its .webp equivalent because performance was terrible during testing. I think most of what remains are the profile pics.

[ridham-virufy]

@gevuong Can you take a look why my build is failing? It says module not found error. I have followed the step mentioned in the issue and also referred your commit for the same. Commit details

[gevuong]

Can you share error message(s) when you run npm run build locally?

[ridham-virufy]

@gevuong here it is `@ridham-virufy ➜ /workspaces/minimal-i18n-with-app-router (GFI_Ridham) $ npm run build

minimal-i18n-with-app-router-v2@0.1.0 build next build && next-image-export-optimizer

▲ Next.js 14.2.4

Creating an optimized production build ... Failed to compile.

./public/images/navbar/index.ts Module not found: Can't resolve './hero-donate.webp'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./app/[lang]/Navbar.tsx

./public/images/oneYoungWorld/index.ts Module not found: Can't resolve './testimonials/gonzalo-square-pic.webp'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./app/dictionaries/en/oneYoungWorld.ts ./app/dictionaries/en/index.ts ./app/dictionaries/index.ts ./app/[lang]/faq/page.tsx

./public/images/oneYoungWorld/index.ts Module not found: Can't resolve './testimonials/marcos-square-pic.webp'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./app/dictionaries/en/oneYoungWorld.ts ./app/dictionaries/en/index.ts ./app/dictionaries/index.ts ./app/[lang]/faq/page.tsx

./public/images/oneYoungWorld/index.ts Module not found: Can't resolve './testimonials/sebastian-square-pic.webp'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./app/dictionaries/en/oneYoungWorld.ts ./app/dictionaries/en/index.ts ./app/dictionaries/index.ts ./app/[lang]/faq/page.tsx

./public/images/oneYoungWorld/index.ts Module not found: Can't resolve './teamLeads/allana.webp'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./app/dictionaries/en/oneYoungWorld.ts ./app/dictionaries/en/index.ts ./app/dictionaries/index.ts ./app/[lang]/faq/page.tsx

Build failed because of webpack errors`

[gevuong]

check the spelling of the image file format between the image filename and imported filename. They don't appear to match.

[gevuong]

Created a separate ticket to address the 2nd half of this issue involving updating image optimization configs: https://github.com/gevuong/minimal-i18n-with-app-router/issues/30. This means this ticket will only cover replacing the original images with images in webp format.