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

Right off the bat I notice that you are using px instead of % for width and height. Responsive HTML 5 DOCType. you should use percentage. There to many phones and tablets out there visiting your website.

Use meta tag viewport in your headers. Try something like this

For further information on how to correctly re-size your web page for any device go here https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

I recon-mind that you use CSS to control the height and width of the image try to stay away from attributes if possible. Use min and max along with your width and height sectors for width and height in you CSS code. You don't need JavaScript to solve your issues