為什么為我的 SPA 下載我的圖像需要很長時間？

Question

我正在構建一個反應 SPA，我想要一個圖像作為我主頁的背景。 圖像為1.2mb，首次加載時有明顯延遲，甚至以黑白加載，然后輕彈彩色

所以我嘗試了一些事情。 我已經壓縮了。 現在是 700kb。 我已將其添加到 s3 存儲桶中，而不是在本地使用。 我創建了一個雲端發行版，我正在請求它。 顯然，下載后圖像很好，我在我的應用程序的不同頁面之間滑動並返回主頁，因為大概瀏覽器已緩存。 但是，當我硬重新加載時，它似乎總是有點延遲。 哦，我還在我的存儲桶中的 object 中添加了一個緩存控制標簽。 無論如何我可以解決這個問題或讓它加載得更快嗎？

哦還有一些代碼：

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 ，因為它提供比前者更好的壓縮。

但是，請注意瀏覽器支持，因為 Safari 仍然不支持它。 您可以考慮為不支持webp的瀏覽器使用備用圖像格式。

2) 根據視口大小獲取圖像。 您可以存儲各種大小的圖像，並確保您的應用根據視口大小獲取正確的圖像。 例如，在移動設備上，您應該獲取較小的圖像。