Consider this image:

<span>
   <a href="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2ltYWdlcw">See more images</a>
    <img
        class="w-2/5 aspect-[5/3]"
        src="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2ltYWdlcy9zYW1wbGUtaW1hZ2Uud2VicA"
    />
</span>

Correct me if I'm wrong, please.

The browser loads this HTML and wants to render it. It does not know the width of the span and based on that it can determine the width of the img. However, the width of the parent element is still unknown, and most of the time an inline's width is calculated based on its children.

So, the parent <span> needs the img to be rendered to for its width, and the img needs the span for its width. Circular dependency.

Does that cause a layout shift?

What is the best practice here?