Looking at those settings, you don’t actually serve retina specific images to iPhones at the moment. You only have one “min-device-pixel-ratio” query and it’s for screen sizes 640px and higher (iPhones weigh in at 320px wide).
Typically speaking, if you want to do high-res assets, you provide a counterpart “min-device-pixel-ratio” query for every single one of your media queries, so that you can get high res assets at any ratio. So, if you added the following below the “all” query:
media: (min-device-pixel-ratio:2) query:w600
That would get you high res assets for iPhone4+.
The other thing that may be causing issues is the actual size of the image. Is the image having to scale up at the screen-sizes you’re looking at? For example, at 419 pixels wide, you’re serving assets that are only 300 pixels wide – do you have 59.5 pixels of padding to either side of those images? It’s better as far as clarity goes for images to scale down, rather than up. So you should look at the largest size that will occur for any of your media queries, and set the image size accordingly. For example, if your images were to have 10px of padding on either side of the content, I’d set the “all” media query to:
media: all query:w400
Since your next media query is at 420px. (Technically I’d almost bump it up to 421px, as well, as the image is still sized correctly AT 420px. Minor quibbles at that point, though)
Hope that helps!
