Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Wena Kwan
Wena Kwan
14,343 Points

HTML Email in Outlook - Images become fuzzy in IPad

I created a HTML email in editor, with inline CSS, inserted in Outlook and sent out. For images, I doubled the size, for example, for a 230 px x 45 px image, I made it 460x90 px based on 72 dpi and confined the image with width = "230" height = "90" in the img tag. The image looks perfectly sharp in browser but it looks fuzzy in IPhone or IPad. I know that Outlook renders images differently. But I don't know how to fix the problem. Can anybody please HELP? Thanks.

3 Answers

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

Making an image double it's size doesn't make the image have more pixels, it just makes each pixel more prominent.

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

Wena Kwan
Wena Kwan
14,343 Points

Jared, I have followed Mailchimp's suggestion but it's not working. I used resolution of 460x90 instead of 230x45. What did I miss?

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

You need to have an image that is larger than or equal to 460x90 and then downsize it to keep resolution.

Wena Kwan
Wena Kwan
14,343 Points

Jared, that's what I did. The image is 460x90 based on 72 dpi and downsized to 230x45. See my code: td > <img src="xxx.png" width="230" height="45" />
</td>

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

I can't see any images. Just to be clear, when the image was first created in a blank photoshop file. Was the image made at a size larger than 460px?

If yes. Then I'd suggest asking on Stackoverflow. You will have better luck with someone that will know a lot more about email styling.

Wena Kwan
Wena Kwan
14,343 Points

Yes.

I am sure it has to do with how Outlook render image. The image looks fuzzy when sent by Outlook but it looks high res in IPad when sent by putsmail or displayed in browser.