我是否可以将<picture>、<source>与next/image搭配使用？

1. next/image 核心优化逻辑 #

它的优化是全链路的，不需要你手动预处理大量图片资源就能拿到不错的加载性能：

• 自动格式降级：服务端会自动识别浏览器支持的最优图片格式，优先输出AVIF、WebP等高压缩比格式，兼容性 fallback 到JPG/PNG，同画质下比传统格式体积减少30%~75%
• 响应式尺寸自动匹配：你只需要声明sizes属性（比如sizes="(max-width: 768px) 100vw, 600px"），框架会自动生成从几十像素到几千像素的多套尺寸版本，浏览器会根据当前设备的屏幕宽度、像素密度自动选最合适的大小加载，不会给小屏手机加载桌面端的超大图
• 懒加载默认开启：非首屏的图片默认在即将进入视口时才加载，大幅降低首屏带宽占用和渲染阻塞
• 自动缓存与CDN处理：所有处理后的图片会自动做静态缓存，配合托管平台的CDN可以直接实现全球节点的图片加速

2. 能不能和<picture>、<source> 标签结合？ #

可以，二者不是互斥关系。
next/image 默认的自动响应式能力已经能覆盖绝大多数通用场景：如果你只是需要同一内容的图片在不同设备上加载不同分辨率的版本，完全不需要手动写<picture>，配置好sizes属性就行。
只有你需要做艺术指导级别的适配时，才需要搭配<picture>使用：比如宽屏要显示带左右背景的全景裁剪图，移动端要显示只保留核心主体的竖版裁剪图，两张图的内容本身有差异，不是单纯缩放的关系。
示例用法：

<picture>
  <source media="(max-width: 768px)" srcSet="/mobile-cut.png" />
  <source media="(min-width: 769px)" srcSet="/desktop-full.png" />
  <Image
    src="/fallback.png"
    alt="产品展示图"
    width={1200}
    height={800}
  />
</picture>

这种场景下<source>的srcSet也可以配合Next.js的自定义图片加载器生成优化后的地址，同时保留next/image的所有优化能力。 #

内容的提问来源于stack exchange，提问作者Diego Cortés