Initial stab at responsive images for high-density displays

classic Classic list List threaded Threaded
23 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Re: Initial stab at responsive images for high-density displays

Brion Vibber-4
Their screenshots are kind of vague, and it's unclear whether the S3
browser actually implements srcset incorrectly or if this is just a
complaint about our JavaScript fallback implementation, which allows the 1x
images to load first and then goes and loads the 1.5x or 2.0x images.

This does use more data than loading *only* the 1.0x images (obviously), as
does it use more data than loading *only* the 1.5x or 2.0x images. However
it should have nearly zero impact on time-to-interactivity, since the read.

Can we get some more detail from them? Like, did they test any sites other
than Wikipedia, or other browsers than the S3's for this bug? The research
paper PDF says "it turns out" that the S3 browser has the bug but doesn't
explain how they determined this. Do they see three loads per image (which
would be what they describe as the error) or two loads per image (which is
what I expect to see under the current code)? Their diagram circles three
images, but only two of them are of the same image and appear to be a 1.0x
and 2.0x pair.

[Note that we can also improve this dramatically on mobile if we can
prevent preloading of images in initially-collapsed sections; we might then
be able to replace the URLs before the 1.0x images load for anything
outside the lead section.]

-- brion


On Mon, Jun 3, 2013 at 1:04 PM, Tilman Bayer <[hidden email]> wrote:

> BTW, it seems that a certain mobile phone manufacturer wasn't quite
> ready for this ;)
>
>
> http://tech2.in.com/news/smartphones/samsung-galaxy-s3-browser-bug-inflates-data-usage-loading-times/875182
>
> "
> According to the researchers, the problem is caused by the srcset HTML
> attribute, which indicates the size and resolution of images a browser
> should pick based on the device’s screen size and magnification
> needed. ...
>
> The Galaxy S3’s browser, however, has a bug that makes it download all
> the images specified in the srcset HTML attribute instead of the ones
> it needs, resulting in long load times and lots of data usage. For
> instance, the researchers loaded a Wikipedia page that was only 600 KB
> when browsed using Internet Explorer, but the page’s size inflated to
> a whopping 2.1 MB on the Galaxy S3.
>
> “This bug significantly affects the Wikipedia performance on 3G were
> these massive number of requests for image downloads overwhelmed the
> network and ended up timing out rendering an incomplete page,” the
> research paper reads.
> "
>
> On Thu, Sep 27, 2012 at 3:45 PM, Brion Vibber <[hidden email]> wrote:
> > On Sun, Sep 23, 2012 at 7:59 PM, Brion Vibber <[hidden email]> wrote:
> >
> >> I've updated the patch to use the 'srcset' attribute as defined in the
> >> current HTML 5 working group version, only using the density options and
> >> not the width/height options:
> >>
> >>
> http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset
> >>
> >> Patch in gerrit:
> >> https://gerrit.wikimedia.org/r/#/c/24115/ (core)
> >> https://gerrit.wikimedia.org/r/#/c/24147/ (MobileFrontend)
> >>
> >
> > Patch has been updated to:
> > * include QUnit tests for the srcset matching
> > * match "next-highest density" if there's not an exact match available
> >
> > This latter fixes Opera Mobile on my Galaxy Nexus (where devicePixelRatio
> > reports 2.25 rather than the expected 2) and BlackBerry 10 developer
> alpha
> > device (where it reports slightly less than 2.25). Should help with some
> > other funky configurations where a non-integral zoom is reported as well.
> >
> > Currently Firefox for Android doesn't report window.devicePixelRatio, I
> may
> > add another special case, should be able to use media queries.
> >
> > Opera Mobile works, but Opera Mini does not -- at least because we don't
> > serve it jQuery etc. :)
> >
> > You can see a live demo of this patch in action on these test articles:
> > * http://leuksman.com/mw/index.php/San_Francisco
> > * http://leuksman.com/mw/index.php/Lens_(optics)
> >
> > Mobile browsers won't automatically switch to mobile view on this wiki
> > currently, so hit the 'mobile view' link manually to switch in.
> >
> > -- brion
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
>
>
> --
> Tilman Bayer
> Senior Operations Analyst (Movement Communications)
> Wikimedia Foundation
> IRC (Freenode): HaeB
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Initial stab at responsive images for high-density displays

Matthew Flaschen-2
In reply to this post by Tilman Bayer
On 06/03/2013 04:04 PM, Tilman Bayer wrote:
> BTW, it seems that a certain mobile phone manufacturer wasn't quite
> ready for this ;)
>
> http://tech2.in.com/news/smartphones/samsung-galaxy-s3-browser-bug-inflates-data-usage-loading-times/875182

Interesting.

"However, there’s no need to be too alarmed. The srcset attribute is
still in draft status. That means that it is not yet recommended to use
it because the specification can still change and web browsers are not
expected to implement it already"

That sounds fine in theory, but that isn't how HTML5 has worked out in
practice.  Both sites and browsers have emphasized the "running code"
part quite heavily, and WHATWG has gone ahead and declared it a "Living
Standard"
(http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset).

Matt Flaschen

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Initial stab at responsive images for high-density displays

Brion Vibber-4
In reply to this post by Brion Vibber-4
On Mon, Jun 3, 2013 at 2:08 PM, Brion Vibber <[hidden email]> wrote:

> Can we get some more detail from them?
>

I sent a mail to the authors listed on the PDF paper asking for more
details.

-- brion
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
12