通过预转换为 .webp nextjs 来避免图像转换答案

【问题标题】：Avoid image conversion by pre-converting to .webp nextjs通过预转换为 .webp nextjs 来避免图像转换
【发布时间】：2022-10-08 07:45:00
【问题描述】：

我目前在 DigitalOcean 的最低层上运行一个小型 Nextjs 应用程序。加载我的 Web 应用程序时，每张只有 1-2 KB 的图像需要将近 500 毫秒来渲染。延迟的可能原因是将原始.png 文件转换为.webp 所需的时间吗？如果是这样，如果浏览器不支持.webp，我如何修改下一个/图像以同时获取预转换的.webp 和.png 图像并在两者之间正确选择？

【问题讨论】：

您确定问题出在next/image 上吗？您是否尝试过使用 <img> 元素加载图像以进行比较？

标签： javascript next.js digital-ocean webp

【解决方案1】：

你可以试试这样的

//elsewhere in the file    const imgSrc = pathToImage, const name = imageName
  <picture>
      <source
        type="image/webp"
        srcSet={`/images/${name}.webp`}
      />

      <source type={`image/${type}`} srcSet={imgSrc} />
      <img
        src={imgSrc}
        alt={props.alt ?? ""}
        width={props.width}
        height={props.height}
        className={props.className}
      />
    </picture>

【讨论】：