Re: [css4-mediaqueries] Bandwidth Media Queries

Interesting question. I would say that browsers may ignore media conditions 
in case they have the specified resource in cache. That means that they 
could choose to use HIGHER resolutions of the image if they already have 
them in cache.

To return to my sample :

    @picture myPicture {

        width: 1000px; height: 300px;

        background-color: black;
        background-size: 100%;
        background-image: image(
            @media (min-bandwidth:4)       url(veryBigImage.jpg),
            @media (min-bandwidth:2)       url(bigImage.jpg),
            @media (min-bandwidth:0.5)    url(smallImage.jpg),
            none
        );

    }


Let's imagine a first case where the browser has a low bandwidth (0.75Mbps) 
and no cache.
=> It'll dowload smallImage.jpg, resize it accordingly, and use it on the 
website


If the bandwidth increases to 2.5Mbs (let's say the guy connects to a public 
Wifi hotspot).
=> The browser continues to use smallImage.jpg because conditions are met 
and it's in cache.
=> [optionnaly] The browser starts to download url(bigImage.jpg) and uses it 
as soon as possible.


Let's now imagine that the page is reloaded at a later time, with no 
internet connection available (offline mode).
=> The browser evaluates "veryBigImage.jpg". It's not in cache and the 
bandwidth condition is not met. It ignores the declaration.
=> The browser evaluates "bigImage.jpg". It's in cache so bandwidth 
conditions are ignored. There are no false conditions, so the browser can 
use the resource.
=> In a case where no image would be in cache, the browser should use "none" 
(which results in a black picture).


Let's now imagine that the page is reloaded again at a later time, with a 
12Mbs connection available :
=> The browser evaluates "veryBigImage.jpg". It's not in cache but the 
bandwidth condition is met. It starts the download.
=> The browser evaluates "bigImage.jpg". It's in cache so bandwidth 
conditions are ignored. There are no false conditions, so it uses the 
resource until the veryBig one is downloaded.


We could also imagine that veryBigImage could have another condition set 
like "(min-ppx-per-px: 1.5)" because it's a 2000*600px image that is not 
needed in the case when a physical pixel is equal to a css pixel. However, 
when the image is downloaded, the media is ignored and the image could be 
used in such a context, too. It the page gets zoomed, quality will be 
increased.





-----Message d'origine----- 
From: Markus Ernst
Sent: Monday, April 02, 2012 9:23 AM
To: www-style list
Subject: Re: [css4-mediaqueries] Bandwidth Media Queries

Am 31.03.2012 11:52 schrieb François REMY:
> The decision to choose one “image” item over another happens at the time
> where the image is downloaded, and should probably not be changed after
> that (even if this is left at browser’ discretion). Anyway, the image
> will be consistent on the site if she’s used more than one time.

What happens if the user clicks the reload button or gets back to a
previously visited page - will the UA re-evaluate the media query? The
same question applies to images avaliable on more than one page.

Re-evaluating could possibly result in downloading a different resource
than the cached one, thus increase bandwidth usage and even lead to
disturbing user experience, e.g. display of a different image after page
reload.

Received on Monday, 2 April 2012 08:35:22 UTC