To avoid layout shift, my current approach is something like this:

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" data-src="/path/to/image--16-9.jpg" alt="16:9 demo" class="lazyload">

So, the inline encoded SVG in the src attribute is rendering an empty box at 16:9 aspect ratio (you can edit this to be any width & height) as a placeholder for a like for like lazy loaded image in data-src with the same dimensions. Lazysizes (or another lazyloading approach) will simply swap this out and the page layout will barely notice a difference in structure and size.