Defining height and width on images

[Phillip_Wild]

I might be crazy....but I thought I read something a while ago which said that when coding for email, it was best to avoid hard-coding values for images (through width="" and height="" attributes). I thought this might have been for mobile or Outlook, but I'm not sure.

What's best practice here? I know I should be creating images at the actual size I want them displayed on desktop - so how will setting a hard-coded width and height affect my mobile rendering? Are there any benefits and drawbacks?

[Frank_Breen2]

When doing responsive email templates it's best not to define the width and height, then in your @media query you have to set the image css to: width: 100% !important; height: auto;

If you're not going responsive emails, then defining the width and height should not effect the template on different clients.  

[Dan_Stevens_]

You'll need to manually remove the H and W attributes/values from the HTML (you can't just delete the values from the image properties box) since Marketo inserts these automatically each time you place a new image within an email.

[Frank_Breen2]

Totally correct Dan, sorry I'm so use to just doing the it in the raw HTML; also I tokenise my images so we only have to include the name rather than using the image insert in the WYSIWYG editor (which is a great work around too).

[Phillip_Wild]

Ahhh very interesting. Thanks everyone. Frank, I'm also using the raw HTML which I then paste into Marketo's email editor. So I assume my width="" tag would be fine then, and wouldn't insert values automatically?

We are also using responsive templates with media queries, and use exactly the CSS code you have above, so that's heartening to find it's ok!

Sounds like I am on the right track by not defining it, and then using the media query to make it 100% width and auto height.

Thanks all!

[Frank_Breen2]

Correct, Marketo only automatically inserts the width and height when you use the Insert/Edit Image in the Rich Text Editor.

[Phillip_Wild]

Further update: best practice seems to be to define the width and height you want, but not to use "px". If you use "px", Outlook will show the image at full size.

So use width="300" instead of width="300px".