HTML: How does a browser render an image for layout ?

Question

1. How much layout space does a web-browser allocate when initially rendering:

   < img src="image.jpg" />

2. How much layout space does a web-browser allocate when initially rendering:

   < img src="image.jpg" style="max-height:100px; max-width:200px" />

3. How much layout space does a web-browser allocate when initially rendering:

   < img src="image.jpg" style="min-height:50px; min-width:110px" />

4. How much layout space does a web-browser allocate when initially rendering:

   < img src="image.jpg" height="97" width="134" />

Update:

What I'm trying to determine is if the browser first allocates 0x0 and then scales up the layout once the dimension is obtained OR ... in the cases of using min/max-height/width - does the browser actually allocate that much space and then updates the layout once it has the actual dimensions.

Answer 1

However much it wants.

You would have to perform tests in all the browsers you care about to get answers for them.

Answer 2

I'm not sure why this is important for you to know, but here it is:

1. No space, until a bit of the image is loaded. Then it expands to the size of the actual image, based on the loaded metadata in the first part of the jpg. This is before the file is completely loaded. In Internet Explorer, the size is that of the x-icon plus any alt text. In some other browsers the size is just that of the alt text.
2. Same as 1
3. 110x50 until a bit of the image is loaded. Then it expands to the size of the actual image.
4. 134x97 always.

But you should know that browsers often render the same page multiple times in a short period of time, especially after reading image metadata.

You can see what initial size they are by specifying a file that doesn't exist, such:

<img src="thisfiledoesntexist.jpg" alt="Text that may be visible" />