为什么我的 SPA 图像需要很长时间才能下载？

Question

我正在构建一个 React SPA，我想要一个图像作为我主页上的背景。图片大小为1.2mb，第一次加载时有明显的延迟，甚至以黑白加载，然后轻弹到彩色

所以我尝试了一些东西。我已经压缩了。现在是700kb。我已将它添加到 s3 存储桶而不是本地存储。我创建了一个云前端分发，我正在请求它。显然，图片一旦下载就很好，我在应用程序的不同页面之间轻弹并返回主页，因为浏览器可能已经缓存了。但是，当我重新加载时，它似乎总是有点延迟。哦，我还为存储桶中的对象添加了一个缓存控制标签。无论如何我可以解决这个问题或让它加载更快吗？

哦还有一些代码：

const Container = styled.div`
    background-image: url(cloudfront.net/beach.jpg);
    background-size: cover;
    height: 100%;
    position: absolute;

    width: 100%;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #000, #fff);
        opacity: 0.2;
    }
`

我实际上是将它应用到组件本身而不是直接 html 或正文元素

Answer 1

在优化图像方面实际上有一些策略，但让我列出两个您可以采用的最直接的策略。

1) 与其使用 jpeg 和 png 等传统图像格式，不如考虑使用 webp，因为它提供比前者更好的压缩率。

但是，请注意 browser support，因为 Safari 仍然不支持它。对于不支持 webp.

的浏览器，您可以考虑使用后备图像格式

2) 根据视口大小获取图像。您可以存储各种尺寸的图像，并确保您的应用根据视口尺寸获取正确的图像。例如，在移动设备上，您应该获取较小的图像。

为什么我的 SPA 图像需要很长时间才能下载？

Why does my image take a long time to download for my SPA?

javascript

reactjs

amazon-s3

amazon-cloudfront