I investigated pages with math on my phone.
The lazy loading of images works reasonably well.
I think it would be nice to use lazy loading for images on the desktop too.
However, I think it would be good to simplify the structure of the HTML output.
If javascript is required to load the image anyhow, we could also include the size and name information to the mathml element.
Currently the dom looks like that
Fourier transform of the function <span><span class="mwe-math-mathml-inline mwe-math-mathml-a11y" style="display: none;"><math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow class="MJX-TeXAtom-ORD">
<mstyle displaystyle="true" scriptlevel="0">
<mi>f</mi>
</mstyle>
</mrow>
<annotation encoding="application/x-tex">{\displaystyle f}</annotation>
</semantics>
</math></span><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/132e57acb643253e7810ee9702d9581f159a1c61" class="mwe-math-fallback-image-inline" aria-hidden="true" style="vertical-align: -0.671ex; width:1.289ex; height:2.509ex;" alt="f"></span>(from in https://en.wikipedia.org/wiki/Fourier_transform#Definition)
and could be simplified to
Fourier transform of the function <math xmlns="http://www.w3.org/1998/Math/MathML" class="mwe-math-mathml-inline mwe-math-mathml-a11y">
<semantics>
<mrow class="MJX-TeXAtom-ORD">
<mstyle displaystyle="true" scriptlevel="0">
<mi>f</mi>
</mstyle>
</mrow>
<annotation encoding="application/x-tex">{\displaystyle f}</annotation>
<annotation encoding="image/svg" src="/api/rest_v1/media/math/render/svg/132e57acb643253e7810ee9702d9581f159a1c61" style="vertical-align: -0.671ex; width:1.289ex; height:2.509ex;"/>
</semantics>
</math>