Javascript “如何获取图像”；“在褶皱上方”；正确的

我在折叠上面有图像，很难让它们在谷歌Pagespeed上“正确”

标记大致如下（删除的srcset和一些不相关的css）

稍后异步加载的JavaScript会交换属性，以便显示图像。这些课程仅用于选择目的

以下屏幕截图来自ChromeDevTools，其中所有外部JavaScript和CSS都已从页面中删除。因此，这就是我期望PageSpeed在折叠上方看到的：

相反，它抱怨，事实上，这是Pagespeed在折叠上方看到的：

图标字体是内联的。不知道为什么Pagespeed看不到它。但事实上，这张照片根本没有出现，这让我很困惑。我知道，通过内联JavaScript设置src属性并对第一幅图像的显示CSS进行混洗，可以更好地实现逻辑，但我希望首先获得“基本”内容。：）

所以首先要做的事情是：为什么图像会在PageSpeed中崩溃

<img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D&#039;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&#039; viewBox%3D&#039;0 0 748 429&#039;%2F%3E"
 data-lazy-type="image"
 data-lazy-src="../disaster-girl.jpg"
 width="748" height="429"
 class="lazy lazy-hidden"/>
<noscript>
  <img src="../disaster-girl.jpg" width="748" height="429" />
</noscript>