Image with declared width and height renders square before load

Question

I have images with declared widths and heights, e.g.:

They are within

Answer 1

The following is the only solution that worked 100% of the time, and is much simpler: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

In short you can use an SVG placeholder image that contains the dimenions:

Here is an React example:

const placeholderSrc = (width, height) => `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`

const lazyImage = ({url, width, height, alt}) => {
  return (
    
  )
}