0

Logo image is doubled and reduced to smaller size with set pixel width and height. I want the image cleaner and not blurry. Logo still is original size in outlook.

Do I need to wrap this in it's own table to a set pixel width? Do I need to set a certain class to it? How can I clean up this code to work more efficiently?

<td bgcolor="#FFFFFF" width="150" align="center" target="_blank"><a href="http://www...."><img src="http://..t_lgo-300.jpg" width="150px" height="89px" alt=""  style="display: block; border: 0; font-family: 'Open Sans', Arial, sans-serif; color: #86898B; font-style: normal; font-size: 18px; line-height:10px; width: 150px; height: 89px;"></a></td>

styles - the logo does not have a class....

td[class="logo"] img{
      margin:0 auto!important;
    }

 img[class="img-max"]{
      max-width: 100% !important;
      width: 100% !important;
      height:auto !important;
    }
linda
  • 1
  • 3

1 Answers1

0

I don't believe it is necessarily the code so much as it is the quality of the image. (https://www.emailonacid.com/blog/article/email-development/mobile-optimization-retina-images-in-email)

For retina images it is best to save the image as double if not triple the size of what you want in your message (at a high resolution). Ex. save at 300x150 for 100x50 image in email.

Just make sure to declare your width and height on image tag or Outlook will display the raw image size. You can then use media queries to set it to the proper size for mobile display.

Gortonington
  • 3,557
  • 2
  • 18
  • 30
  • This works on set size logo. but I had to remove the px off of the width and height. – linda Jan 18 '16 at 15:51
  • i am not sure what you mean. Do you mean you had to remove the declaration of height and width on your logo image or just the px declarative? Also is this the HTML attribute or in the inline style or both? – Gortonington Jan 18 '16 at 18:45
  • This works on the smaller logo image but a larger image below will not resize in android - copied code and css from sample onto my page..any suggestions on why this would work on logo and not on larger 600px in android. Removed px from inline left it on css declaration. .deviceWidth {450px !important;} inline - width="150" height="89" – linda Jan 18 '16 at 19:22
  • That may be due to some android clients (especially the newer ones) have similar rendering engines to Gmail App (in fact some only have the Gmail app as an option). Gmail App ignores all media queries, etc. so that may be why it doesn't change. – Gortonington Jan 18 '16 at 21:05
  • Image resized without the outlook fix on android. so I guess I can choose to have it resize in outlook with fix or in android without fix. So hard to please all of these viewers. – linda Jan 18 '16 at 21:25
  • Is it possible to serve a different image to outlook only and keep retina for others? ...just a thought. I would not know how to do this. – linda Jan 19 '16 at 16:28
  • yes but I wouldn't recommend. You would need to use MSO conditional to have the Outlook only image. Trust me, it sounds a lot easier than it is. – Gortonington Jan 19 '16 at 16:30
  • I think I may have found something that is working for me: added this to the query width: 100% height: auto max-width: 450px all with important - inline I added class width =450" height="262" then a style with this added "width: 100%; height: auto; max-width: 450px -I don't know, still testing..any opinions on this approach? – linda Jan 19 '16 at 17:49