如何在next/image中为不支持WebP的浏览器显示降级图片？

方法一：浏览器特性检测动态切换图片源 #

通过检测浏览器对WebP的支持性，动态传入对应格式的图片地址。

1. 编写WebP检测工具函数

export const isWebPSupported = async () => {
  if (typeof window === 'undefined') return false; // 服务端渲染阶段默认返回false
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img.width === 1);
    img.onerror = () => resolve(false);
    // 用极小的WebP base64图片做检测
    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
  });
};

2. 改造你的图片组件
   结合React状态和副作用钩子，根据检测结果切换图片源：

import Image from 'next/image';
import { useState, useEffect } from 'react';
import { isWebPSupported } from './utils';

const NextImage = ({ webpSrc, fallbackSrc }) => {
  const [imgSrc, setImgSrc] = useState(webpSrc);

  useEffect(() => {
    const checkSupport = async () => {
      const supported = await isWebPSupported();
      setImgSrc(supported ? webpSrc : fallbackSrc);
    };
    checkSupport();
  }, [webpSrc, fallbackSrc]);

  return (
    <Image 
      src={imgSrc}
      alt="product image"
      width={500}
      height={500}
    />
  );
};

使用时直接传入两种格式的图片地址：

<NextImage webpSrc="/product.webp" fallbackSrc="/product.png" />

方法二：利用picture标签实现原生降级（Next.js 13+ App Router） #

Next.js 13及以上的App Router支持将Image组件嵌套在原生picture标签中，借助picture的资源选择能力实现自动降级：

import Image from 'next/image';

const NextImage = ({ webpSrc, fallbackSrc }) => {
  return (
    <picture>
      <source srcSet={webpSrc} type="image/webp" />
      <source srcSet={fallbackSrc} type="image/png" /> {/* 需切换为对应格式，如image/jpeg */}
      <Image 
        src={fallbackSrc}
        alt="product image"
        width={500}
        height={500}
        priority={false}
      />
    </picture>
  );
};

注：picture会优先匹配浏览器支持的source，最后的Image组件作为兜底，需传入降级图片地址。

注意事项 #

• 服务端渲染时，方法一会默认使用降级图片，客户端渲染完成后会重新检测并切换为WebP（如果支持）。
• 确保所有图片资源放置在public目录，或使用Next.js兼容的图片优化服务（如Cloudinary、Imgix）时，服务端能返回对应格式的图片。

内容的提问来源于stack exchange，提问作者kogyikyaw