- From: Adam Barth <w3c@adambarth.com>
- Date: Tue, 12 Nov 2013 11:40:36 -0800
- To: "lists@ericportis.com" <lists@ericportis.com>
- Cc: Markus Ernst <derernst@gmx.ch>, "Tab Atkins Jr." <jackalmage@gmail.com>, Ryosuke Niwa <rniwa@apple.com>, whatwg <whatwg@lists.whatwg.org>, "Jukka K. Korpela" <jkorpela@cs.tut.fi>, Markus Lanthaler <markus.lanthaler@gmx.net>
On Tue, Nov 12, 2013 at 11:38 AM, lists@ericportis.com
<lists@ericportis.com> wrote:
> On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w3c@adambarth.com (mailto:w3c@adambarth.com)> wrote:
>> We might even be able to make this work without inventing anything:
>>
>> <style type="text/css">
>> @media (min-width: 480px) {
>> .artdirected {
>> width: 30px;
>> height: 30px;
>> background-image: image-set(url(small.png) 1x, url(small-hires.png) 2x);
>> }
>> }
>> @media (min-width: 600px) {
>> .artdirected {
>> width: 60px;
>> height: 60px;
>> background-image: image-set(url(large.png) 1x, url(large-hires.png) 2x);
>> }
>> }
>> </style>
>> <div class="artdirected"></div>
>
> Would the <style> element have to reside inline, to reap the performance benefits?
If you want the preload scanner to be able to load the images, you'll
need to put the URLs in a place where the preload scanner can see
them, which means inline.
Adam
Received on Tuesday, 12 November 2013 19:41:33 UTC