Retina theme screenshots

[nacin]

Themes should be able to provide a screenshot called screenshot-2x.png or screenshot-600x450.png, and we should load it for retina displays (or load them always).

In doing this, we should consider switching the themes.php page to be infinite scroll, as that page can take a *long* time to load with a lot of themes (and now with even bigger images).

On WordPress.com we have a script called devicepx.js which looks for certain URL patterns in img src attrs and rewrites them for higher-res images. One of the patterns it matches is "-1x" before the file extension. It assumes it can safely rewrite that to "-2x". This might not be the best way -- perhaps to be less ambiguous and have fewer potential false positives it should use @1x -- but it's what we made.

So themes could announce their support by having a file called screenshot-1x.png as well as screenshot-2x.png. The advantage of putting this bit of data in the 1x filename is that you don't have to do a HEAD request to find out whether the 2x image exists.

This is the approach I'm thinking:

• We just always load the screenshot that is provided, named as-is, and encourage theme authors to update to a 2x size (but no bigger). That 2x size would be 600x450. It's already CSS constrained, so nothing else to do there. Will need to communicate that guideline to Theme Review Team. Should also encourage (or enforce?) it being optimized using PngCrush or similar.
• We implement lazy loading and unloading to deal with both load time and browser memory consumption. This is very interesting to me in that regard: ​http://airbnb.github.com/infinity/

Per IRC:

• New theme guidelines — screenshot.png (.jpg, etc.) should be 600x450.
• Change per_page from 999 to 36, to kick on infinite scroll and make this page snappier.

[21768] changes per_page.

In [21884]:

Twenty Twelve: update screenshot with double-sized version at 600x450, props drewstrojny. See #21388 and #21227.

I asked lancewillett to procure Twenty Ten and Twenty Eleven screenshots as well.

In [22112]:

Twenty Ten and Eleven: update screenshot.png files in both themes to double-sized versions for HiDPI support. Fixes #21388.