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

At time of writing none of the answers explain why this happens or how to overcome it. I found another question which is the same as this one that explains an interesting "hack" to get around this.