next.js: Webp images using next/image are not converted to another format on incompatible browsers

Why not use html to do the fallback. Newer browsers that support webp will load the source image url, older browsers fall back to the img tag with the jpg image. <picture> <source srcSet="_next/image.webp?format=webp" type="image/webp" /> <img src="_next/image.webp?format=jpg" /> </picture>

The current implementation logic of image-optimizer. Correct me if I’m wrong.

If the browser supports `webp`, convert to `webp`.
  if convert to `webp` success, return `webp` format.
  else return original format.
else if original source is image type, use original source format.
else use JPEG format.

So, if you want to use webp, you original image don’t need to be webp. If your original image type is webp(or other modern image format), it will cause this issue.

Note：Animated images have additional logic

For me, this is not working. I am setting the images in JPEG format, hoping that it will convert it to webp for the browsers that support it, and it is not doing it.

This is the way I am using it

import * as React from 'react'
import NextImage, { ImageProps as NextImageProps } from 'next/image'
import { preloadImage } from '../../../utils/preloadImage'
import NoImagesPlaceholder from '../../../../src/components/search/src/components/Product/assets/no-images-placeholder.jpg'

interface IImageProps {
  id?: string
  className?: string
  itemProp?: string
  title?: string
  src?: string
  alt: string
  onSuccess?: (imgUrl: string) => void
  onError?: (imgUrl: string) => void
  fallbackImage?: string
  height?: number | string
  width?: number | string
  priority?: boolean
  customPreload?: boolean
  layout?: 'responsive' | 'intrinsic' | 'fixed'
  testId?: string
}

const Image = React.forwardRef<HTMLDivElement, IImageProps>(
  (
    {
      id,
      className,
      itemProp,
      src,
      alt,
      title,
      fallbackImage,
      width,
      height,
      priority,
      customPreload,
      layout = 'fixed',
      testId,
      // CHECK WITH GABY IF HE IS STILL USING THESE PARAMETERS
      onSuccess,
      onError,
    },
    ref
  ): JSX.Element => {
    const [loading, setLoading] = React.useState(true)
    const [error, setError] = React.useState(false)

    React.useEffect(() => {
      // If an image fails to preload, handle it here in order
      // to avoid reloading it again as a broken image.
      if (!priority) {
        const preload = async () => {
          try {
            await preloadImage(src)
            setLoading(false)
            onSuccess && onSuccess(src)
          } catch (imageURL) {
            setError(true)
            onError && onError(imageURL)
          }
        }
        preload()
      }
    }, [src])

    const isFallback =
      !src || (customPreload && error) || (customPreload && loading)

    const imageProps: Omit<NextImageProps, 'layout' | 'height' | 'width'> = {
      id,
      src: isFallback ? fallbackImage || NoImagesPlaceholder : src,
      alt,
      title,
      itemProp,
      priority,
    }

    return (
      <div className={className} ref={ref} data-testid={testId}>
        {width !== undefined && height !== undefined ? (
          <NextImage
            {...imageProps}
            data-testid={isFallback ? 'fallbackImage' : 'image'}
            layout={layout}
            width={width}
            height={height}
          />
        ) : (
          <NextImage
            {...imageProps}
            data-testid={isFallback ? 'fallbackImage' : 'image'}
            layout="fill"
          />
        )}
      </div>
    )
  }
)

Image.displayName = 'Image'

And I added in the next.config.js the domains that I am using

images: {
                domains: [
                  'auth-cityfurniture.dotcmscloud.com',
                  'embed.widencdn.net',
                  'www.cityfurniture.com',
                  'cityfurniture.scene7.com',
                ],
              },
            }

Maybe work well in Next v12.

nextConfig = {
  images: {
     // ... other conf
     format: ['image/webp', 'image/png', 'image/jpeg'],
  }
}

I try to change the local file in node_modules, it is work well.

if (mimeType) { 
   contentType = mimeType 
 } else if (upstreamType?.startsWith('image/') && getExtension(upstreamType) && getSupportedMimeType([upstreamType], req.headers.accept)) { 
   // It should be considered whether the UA supports upstreamType
   contentType = upstreamType 
 } else { 
   contentType = JPEG 
 }

Another problems: If the web image contains transparent areas, it will be problematic to convert to JPEG.