title: Responsive images without layout reflow when they load
body: <p>To have responsive images that scale down proportionally on a small screen, I currently use <code>max-width: 100%;</code> (or a fixed max width). As opposed to specifying a fixed size, this has a terrible downsize in that when the page is loading, the browser allocates no space for the image and can only do that after it starts downloading it. This causes a lot of layout reflows and a bad experience before all images are loaded.</p>
  
  <p>This seems like it could be easily fixed - after all, I just have to tell the browser what the real size is so that it can figure out the aspect ratio and the final size before downloading it. First, I was wondering if that's what the <code>width</code> and <code>height</code> html attributes are for, but I know that that's not their purpose as they can be used to rescale the image and change the final size.</p>
  
  <p>What I really want is something like "<code>srcwidth</code>" and "<code>srcheight</code>" that would tell the browser the actual size of the image file so that it doesn't have to load before knowing the aspect ratio to make use of the <code>max-width</code> styling. But from what I could find, there is no such thing like these attributes. Is there really no way to achieve this?</p>
  
  <p>I tried using the actual <code>width</code> and <code>height</code> html attributes in this way and then overriding it with CSS, but browsers simply don't care about that.</p>