Image swapping for background image on mobile looks blurry
There is a technique for swapping out a wider banner image for a smaller background image on mobile devices. Email on Acid has a nice write-up that explains using a media query to hide the
img and add a background-image to it's parent
td. Pretty simple.
However, my issue is the background image looks blurry on iPhone and Androids in my Litmus tests and actual device testing.
Has anyone else come across this issue? I optimized the jpg to look good (85 quality setting in photoshop's save for web feature). It looks good on my computer, on my phone looks blurry.
I also did an interesting test where I viewed the html for the email on my iPhone4 using mobile safari and the background image was not blurry. Whereas when I use mailchimp to send the email it looks blurry on my phone.