在 NextJS 中使用 base64 編碼圖像的性能方面

Question

我正在創建一個可以包含圖像和視頻的全屏滑塊。這些媒體是從 Firebase 加載的，因為客戶端需要通過控制面板進行更新。 使用getStaticProps我可以從服務器獲取 url 並將其傳遞給滑塊組件，但是滑塊的平滑度存在一些延遲和故障，因為我們只是將媒體的下載 url 傳遞給滑塊組件。

因此，據我所知，我正在考慮將url從getStaticProps本身轉換為base64並將其傳遞給滑塊。

大多數圖像將在 2MB 左右，視頻將在 5-10 MB 左右。

1）我知道base64會占用更多的存儲空間，但是當我在構建時在服務器中執行此操作時，這只會在用戶訪問該站點時引起任何其他副作用嗎？ 或者這是一個不好的做法？

2）如果上述一個沒問題，那么我會在控制台中從getStaticProps收到一些警告，例如
Warning: data for page “/” is 150 kB, this amount of data can reduce performance. 可以避免這種情況嗎？ 還是我需要將編碼寫入某個 JSON 文件並從那里讀取？

提前致謝。

Answer 1

我想你部分回答了你的問題

大多數圖像將在 2MB 左右，視頻將在 5-10 MB 左右。

1. 我知道 base64 會占用更多的存儲空間，但是當我在構建時在服務器中執行此操作時，這只會在用戶訪問該站點時引起任何其他副作用嗎？ 或者這是一個不好的做法？

一般來說，在這種情況下，較小尺寸圖像的base64是首選，因為您沒有指定它們可以上傳多少圖像和視頻 - 隨着越來越多的資產被上傳，您最終可能會得到一個大的 html。 請記住，base64 本身並不是一種壓縮機制

您應該考慮的其他選項

1. 使用next/image並內置圖像優化- 這甚至適用於遠程圖像。
2. 通過 imgix 或 cloudinary 等圖像轉碼服務加載