The WebContent process is using a lot of CPU when visiting https://www.heise.de. It appears to be busy in repeated calls to Document::update_layout which is related to SVGDecodedImageData::render. The page has ~158 entries of this nature with different width/height.

<figure data-component="Image" class="mb-4 md:mb-0 md:mr-4 md:w-2/5 float-right w-[28%] ml-4 md:float-none md:ml-0">
  <a-img width="1600" height="899" src="https://www.heise.de/imgs/18/4/6/3/2/8/6/7/IMG_8264-303ff33c1bf449fe.jpeg" alt="Subaru Impreza" style="aspect-ratio:1600 / 899">
    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjk2cHgiIGhlaWdodD0iMzkxcHgiIHZpZXdCb3g9IjAgMCA2OTYgMzkxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgc3Ryb2tlPSJub25lIiBmaWxsPSIjZjJmMmYyIiBmaWxsLW9wYWNpdHk9IjEiPgogICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI2OTYiIGhlaWdodD0iMzkxIj48L3JlY3Q+CiAgICA8L2c+Cjwvc3ZnPg==" width="1600" height="899" alt="Subaru Impreza" style="aspect-ratio:1600 / 899;object-fit:cover"/>
  </a-img>
</figure>

The dumped/decoded SVG is:

  <svg width=696px height=391px viewBox=0 0 696 391 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink>
    "
    "
    <g stroke=none fill=#f2f2f2 fill-opacity=1>
      "
        "
      <rect x=0 y=0 width=696 height=391>
      "
    "
    "
"

My understanding is that there will be a single SharedImageRequest.cpp (as we have the same data url) with a single SVGDecodedImageData. The SVGDecodedImageData will cache up to 10 sizes of the rendered SVG. Given that this image is used in > 10 places we will have churn.

My questions:

• How come we attempt to paint so many of them?
• How can we make this better?

Should we have a more global render cache?
Should we cache immutable bitmap in the outer img?
Should we optimize this kind of SVG?