[whatwg] Responsive images using http headers

Oscar Otero oom at oscarotero.com
Tue Jun 26 01:41:41 PDT 2012


Thanks for your answer, Boris.

I understand the problem. Sending only the window dimmensions, screen
resolution and other useful information available in media-queries can be
enought. For example:

Viewport: width=1024px; height=768px; scale=1;

Or even connection information:

Connection: type=2G;



>
> On Mon, Jun 25, 2012 at 8:10 PM, Boris Zbarsky <bzbarsky at mit.edu> wrote:
>
>> On 6/25/12 1:34 PM, Oscar Otero wrote:
>>
>>> For example, for an image 100% width in a div of 400px, the browser
>>> would send a header indicating it need a 400px width image.
>>>
>>
>> The problem is that the browser typically does not know the following
>> pieces of information when it sends the image request:
>>
>> 1)  The styles of the image.
>> 2)  The parent of the image (or even whether the parent is unique;
>>    image loads are coalesced if the same URL appears in the page
>>    multiple times).
>>
>> It could have that information available if it waited a lot longer to
>> request images [1], but right now browsers try to kick off requests as soon
>> as they can.  For example in this example:
>>
>>  <!doctype html>
>>  <link rel="stylesheet" href="something.css">
>>  <img src="whatever">
>>
>> browsers will currently start loading the image before the stylesheet is
>> done loading.  With your proposal they would have to stop doing that, right?
>>
>> -Boris
>>
>> [1] Though in cases like this:
>>
>>  <table width="200px">
>>    <tr>
>>      <td>
>>        <img src="img1" style="width: 100%">
>>      </td>
>>      <td>
>>        <img src="img2" style="width: 100%">
>>      </td>
>>    </tr>
>>  </table>
>>
>> the actual layout width of either image can't be determined until the
>> intrinsic size of both images is known.  There are lots of other cases like
>> this involving flexbox, floats, etc, etc.
>>
>> -Boris
>>
>
>



More information about the whatwg mailing list