[wp-trac] [WordPress Trac] #21019: Retina All the Things

[WordPress Trac]

#21019: Retina All the Things
----------------------------+--------------------
 Reporter:  matt            |       Owner:
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  3.4.1
Component:  Administration  |     Version:  3.4
 Severity:  normal          |  Resolution:
 Keywords:                  |
----------------------------+--------------------

Comment (by azaozz):

 Replying to [comment:6 nacin]:
 > I think the best thing is foresight.js with a twist: Since we can do
 bandwidth checks, we should forgo the idea of preventing a double-loading.
 (This crosses off the first bullet point on the challenges document.) And
 then we end up with something like this:
 > {{{
 > <img src="imagefile.jpg" width="320" height="240" class="fs-img">
 > }}}
 >
 > Then we get an image, and then some JS can convert img.fs-img's src to
 -2x.jpg (or _2x, or @2x), and then they become sharper. It's progressive
 JPGs all over again.

 This would work well for the screenshots on the About screen, but not for
 most of the other places. The problem is that most images are loaded as
 css backgrounds (all the sprites), so there aren't <img /> tags for them.

 Another (big?) drawback of using JS is that replacing the images at DOM
 ready leaves the screen "imageless" for couple of seconds. What happens is
 the low-rez images start to load together with the html, at DOM ready all
 half-loaded low-rez images are replaced with the high-rez. That makes the
 browser send another set of requests for them before the requests for the
 low-rez images have completed. So now we have double the number of image
 requests.

 During that time the html is rendered and since the "src" for the low-rez
 images is already replaced, they aren't shown. What makes this look worse
 is that the html is rendered without any images and then they start to
 appear here and there.

 Did some quick tests and on slower networks that may be several seconds.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21019#comment:21>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software