Next.js (React) - add new generation images to existing site

The site has 3 landing pages that are not performing well in google pagespeed insights.

Google says that if the format of the images will be JPEG 2000, JPEG XR i WebP instead of .jpg and .png, the site will load about 9 seconds faster.

This job consists in:
-optimizing the existing images using https://nextjs.org/docs/basic-features/image-optimization
-and make the site faster
-only for 3 landing pages (1 homepage, and 2 subpages)


Definition of done:
-Google pagespeed insights will not "scream" anymore about "Serve images in next-gen formats".
-the site will look exactly the same in desktop and mobile (no image quality problems should be noticeable)
-Chrome and Firefox will be given Webp images
-Safari will be given JPG2000 images or Webp if the user has BigSur or newer
-Otherwise, if a user is using a browser that does not support Webp nor, jpg2000, the user will be given normal .jpg or .png

The final work will be tested using Network in developer tools and check what files the browsers download.
And also in Google Pagespeed Insights


The code is in a GitHub repo (private). I will grant access.

Budget about 60$.