Update 2012-04-25: Seeing as how the script actually checks for the rendered width of the image, not the actual browser width, I was stuck trying to figure out how to keep the “medium” size for images at 300×300 but still serve those for users all the way up to 500px. I originally had a max-width: 100% declaration for images (which is a fairly common practice for images in responsive designs), but reviewing the Viewport Industries example I’ve removed that declaration up until the media query I’ve set at 600px. This way I can set a width threshold of 500px for the medium size, even though the native size of the image is 300px wide. Because the image is now allowed to scale past its native size the script now correctly detects when it has scaled past the 500px threshold I’ve set, and then it serves up the larger size. That way most smaller-screen devices get the medium size.
This is a test of the responsive images technique outlined by Viewport Industries. Originally I thought that the Responsive Enhance script was checking the screen width, but looking at the script it appears to check the width of the image. So for this example WordPress generates a 300px wide “medium” version which I’ve modified to B & W for easy identification. When the image renders at smaller than 300px 500px you should get a black & white version of the image, everyone else should get the full-size version. That’s how I understand it, at least.
