Reactjs 如何更快地加载图像并提高网站性能（React JS、GSAP和Netlify）？

我有一个部署在Netlify上的网站，如下所示：

Github：

为了给你一点背景，这个应用程序是由React JS驱动的。在

的主页中，有两个React组件正在呈现。它们都由三个JS提供动力，并通过GSAP在两张图片之间无限地交替使用图像转换动画。因此，总共有4幅图像在右侧渲染。图像的大小总计约为13MB（更多图像将陆续出现）

我还有一个滑块，如果值达到

=50

，则样式和图像将改变，以让用户知道他们正在查看的图像的“类别”

现在，这是没有地方接近完成，所以不要介意的不完整性。让我烦恼的是图像的加载时间（由THREE JS，GSAP处理）要花很长时间才能加载，我认为这也影响了其他元素的加载时间

如何加快加载过程？ 我尝试减小图像大小（以前是60MB，现在是13MB！）；我正试图切掉更多，但我能得到的最多是大约600~KB/img，而不会失去任何实质性的质量

还有别的办法吗？这将是一个投资组合网站，因此项目页面中会有更多的图像，因此我假设如果我现在继续这样做，结果将与我正在处理的页面一样或更糟

---

谢谢你抽出时间

那些巨大的PNG图像应该是JPEG。即使是PNG，通过OxiPNG运行它们也能为我节省大约33%的大小。除了找到一种减小图像大小的方法（我认为它们可能仍然太大）之外，你可以研究的一些技术是：1）在进入网站之前预加载？在您进入站点时，至少会加载所有主要资产。2） 仅加载您首先看到的滑块图像，延迟其他图像。3） 可能在加载期间使用占位符资源？4） 您可以进一步优化图像，例如使用webp格式？为您拍摄一张使用JPEG而不是PNG的PR照片：您还有three.js和gsap.js的完整副本；如果有较小的版本只包含您需要的功能，那就更好了。您也使用1200 x 1800的图像，但显示的图像要小得多。控制台给你一个警告：代码>三。WebGelnReRe:纹理已经被调整（从119x1800）到（1024x1024）。。所以你可以考虑使用两个幂的图像来避免浪费带宽。你所拥有的巨大的PNG图像应该是JPEG。即使是PNG，通过OxiPNG运行它们也能为我节省大约33%的大小。除了找到一种减小图像大小的方法（我认为它们可能仍然太大）之外，你可以研究的一些技术是：1）在进入网站之前预加载？在您进入站点时，至少会加载所有主要资产。2） 仅加载您首先看到的滑块图像，延迟其他图像。3） 可能在加载期间使用占位符资源？4） 您可以进一步优化图像，例如使用webp格式？为您拍摄一张使用JPEG而不是PNG的PR照片：您还有three.js和gsap.js的完整副本；如果有较小的版本只包含您需要的功能，那就更好了。您也使用1200 x 1800的图像，但显示的图像要小得多。控制台给你一个警告：代码>三。WebGelnReRe:纹理已经从（119x1800）调整到（1024x1024）。< /代码>，所以你可以考虑使用两个幂的图像来避免浪费带宽。