Why is the NextJS Image component not outputting webp file format?

Question

I am using the Next Image component, and expecting my png and jpeg files to be converted to webp format like they outline in the docs, but in the browser they are still rendering in jpeg and png format. I am on next v.13.2.4.

Here is a snippet of code:

import Image from 'next/image'
import Banner from '../../public/lake.jpg';

export default function About() {
  return (
    <Image priority src={Banner} alt="" quality={30} width={1422} />
  )
}

Here is the output in the browser where you will notice my images files are in JPEG and PNG formats, and taking about 2s to load regardless of the the small file sizes: enter image description here

For added context, I am migrating my site from Gastby to Next, and even though Next is compressing these images to a smaller file size, they are ultimately taking longer to load on the page. These same images are loading in 400ms on the exact same page built using Gatsby. It may not be the file format that is causing the added load time, but I am looking for every possible way to reduce the load time with the options Next gives us, and that is what led me to this webp discussion.

I have tried adding this to my next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    formats: ['image/webp'],
  },
};

module.exports = nextConfig;

Any feedback or help is appreciated!