Added example of HD image support to markdown and to working index #16

wants to merge 1 commit into


None yet

3 participants


Tested on an iPhone 4 and an iPad3.

Would appreciate some help with better images, I did my best to scale the PSD, but it was originally 512.

Brian Muenzenmeyer Example of HD Support in Picture Element
Would appreciate some help with a better image, I did my best.  Don't
know if it was optimal resizing.
Wolfr commented on e004bf3 Jun 25, 2012

This will not work on Firefox, Opera on a Macbook with retina display.

Can picturefill handle multiple media queries?

(will end w/ a boatload of code otherwise)


You are right about the -webkit-prefix; those browsers would only be served the standard definition images. It would be best to use the standards syntax too, though I am unsure of browser support at the moment. (btw, the Macbook with Retina was not announced when I wrote this :) ).

As to whether the picturefill can handle multiple media queries; yes it can. The compound syntax works fine in my testing.


I am writing an article called "webdesign in a retina world" and researching these things. Thanks so much!


Looks good, but I worry about making the README example harder to understand. The markup is changed now, so this would need to be redone anyway, but I wonder if we might do better to just add a section to the readme about how to use HD media queries? Would you be interested in adding that? Also, the user-prefs branch ( ) has an example that includes an SD/HD user toggle with SD defaults. Might be worth linking that up too, or perhaps rolling it into master.

@scottjehl scottjehl closed this Jul 10, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment