Google Chrome上的next.js图像组件质量差

brjng4g3 于 2023-11-18 发布在 Go

关注(0)|答案(2)|浏览(75)

我正在使用next.js框架开发网站。我在谷歌Chrome中的图像组件有一些问题。它加载质量很差。但是当你从浏览器下载该图像时，它具有完美的质量。其他浏览器没有问题。

<Image
              src={url}
              layout='responsive'
              quality={100}
              height={500}
              width={1250}
            />

字符串
我试图清除缓存，但没有帮助。也许Chrome错误地告诉浏览器的大小。我如何修复Chrome中的图像质量？

next.js

来源：https://stackoverflow.com/questions/72188920/poor-next-js-image-component-quality-on-google-chrome

2条答案

按热度按时间

zz2j4svz1#

您可以添加unoptimized={true}属性，然后它将作为原始大小提供。在这里您可以找到有关Nextjs Image功能Link的更多信息。
您还可以将priority属性添加到您的图像，然后它将提供一个优化的图像，而不会影响质量。

<Image
 src={`/images/sample.png`}
 height={500}
 width={500}
 objectFit="cover"
 layout="fill"
 alt="carousel"
 priority
/>

字符串

赞(0）回复(0）举报 2023-11-18

lg40wkob2#

上面的答案并不令人满意，因为它没有解决这个问题，因为你的网站仍然会加载大图片，这会减少加载时间（并污染我们的环境）。
这个问题来自于宽度属性和Chrome不能很好地处理它。将你的宽度设置为所需的宽度会以一种更优雅的方式解决这个问题。
我工作过的一个网站的外部图像高达7.2MB，这被减少到30.6KB。
您可以开始为每个设备指定多个宽度，以便为多个设备提供不同的格式。

赞(0）回复(0）举报 2023-11-18

我来回答

Google Chrome上的next.js图像组件质量差

2条答案

相关问题

热门标签

最新问答