Inline svg to prevent reflow when lazy-loading images
August 09, 2019
Lazy-loading generally means fetching a resource only if and when it’s needed, in order to improve (at least perceived) performance.
To lazy-load images, one would wait for an
<img /> element to be about to enter the viewport to load it.
Reflow is what happens when the browser needs to redraw the viewport in reaction to an update of the DOM.
For instance, since the browser cannot know the intrinsic width or height of the image before loading it, it will most likely cause a reflow once it has loaded it, causing the surrouding content to jump around.
While css-based tricks exist that can address this issue, it can get messy if it conflicts with your styling.
Another way of dealing with it is to provide a placeholder image with the same aspect ratio as your original image.
This assumes, of course, that you have access to said ratio before loading the actual image.
An easy way to do this is to set the
src attribute to an inline svg image.
<img src='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"%3E%3C/svg%3E' />
All that matters is that the
viewBox of the svg must have the same aspect ratio as your actual image.
Here is an example in React :