如何在HTML中插入大量小型循环视频或GIF数千个或更多，但又要保持良好的质量和页面大小？

如何解决如何在HTML中插入大量小型循环视频或GIF数千个或更多，但又要保持良好的质量和页面大小？

我需要在HTML中放置一千个小的GIF（20x20像素或稍大一些）。页面加载后，几乎所有这些元素都立即可见。我尝试了几种方法，但每种方法都有问题。

方法1。。放置GIF图像。 GIF效率低下且笨重，因此加载页面需要大量流量。 WEBP更好，但是在最新版本的Safari中不完全支持WEBP。因此，我使GIF较小，质量较低。在Safari中，我正在加载这种低质量的GIF，在其他浏览器中，我正在加载WEBP。效果很好，但是问题在于，使用一千个小的GIF，用户需要为此页面加载600 MB以上的内容。因此，这种方式并不那么好。我可以使它们的质量甚至更低，但是我不想让体验变得更糟。即使现在质量还是中等的。

方法2。使用自动启动功能制作MP4并将其嵌入到循环播放的视频标签中，因此它们看起来像是GIF。这样的方式真是太好了，因为MP4的大小要小得多，但是却能保持良好的质量。这里的问题是，即使我在标签中添加10-15个小视频，浏览器也无法对其进行管理，并开始缓慢地运行veeeery。每个视频都变得非常慢。因此，体验比使用低质量GIF还要糟糕。

我的问题是–在这种情况下，如何实现最佳方式，同时保持每个视频的质量和小尺寸？也许我可以通过其他方式使用MP4视频？有人知道如何解决这个问题吗？

要缩放视频并转换为GIF / WEBP，请使用ffmpeg。