Ckeditor4: html email img width="" being removed causes Outlook/Windows display issue for retina sized images

[winds4sw]

BUG:
I wanted to bring to your attention an issue that I'm running into repeatedly when helping clients troubleshoot html email display issues particularly as it relates to Outlook/Windows versions.

Folks who are using retina sized images are having to go into the html source view to add in width="" to the image tag because the editor strips out any width="600" if an image in a template is replaced . If an image is added, it never actually gets the width="600" which is another issue. Images will only have an inline width style that defines the width, ex. style="width: 600px;" and not a width="600". For example, when someone adds or replaces an image, the code for an image will look like this:

img src="https://nvlupin.blob.core.windows.net/images/van/UNF/UNF/1/60021/images/TELL%20CONGRESS%20TO%20SUPPORT%20THE%20UN%20%281%29.jpg" style="width: 470px;"

The image in this example is actually 600 pixels wide or if they had created it to be retina sized it would be 940px. The problem with only having an inline style width on an image in html emails is that if the image is any wider than 470px in this example, Outlook/Windows ignores the inline width style completely. It only recognizes the width="470".

Outlook/Windows will display the image at 100% size if it does not have width="600", regardless of any classes, !important marks, wrapping divs, tables or cells with fixed widths defined. So when you add or replace with a retina sized image, it blows the email wide in Outlook/Windows.

At this point, I've been telling folks that they can't use retina sized images unless they are comfortable going into the html source and adding in the width="" to an image. I'm telling them to make the image the exact width of the container it's in. I don't love telling people that they can't use retina sized images.

Retina sized images that are evergreen like logos or social media icons are fine 1) because they don't get replaced or modified and 2) they retain the width="" because they aren't edited and have been coded that way as part of a template. But for folks, who don't understand the complexities of html email coding and rendering issues, they don't even know this is a thing until they see it but they don't know how to solve it.

This only seems to be a problem for Windows versions of Outlook.

[msamsel]

Hi @winds4sw,
your description is a little confusing for me and after reading it I actually don't know what and where is wrong.
Maybe you could describe it according to our template?
What I would like to clarify is:

• what are reproduction steps,
• what is actual result, which you consider as a incorrect>
• what result you expect?

I assume you are using our Paste From Word plugin and copy-paste content when this plugin is active in editor?

[winds4sw]

Yeah...this is sort of hard to explain without just showing you but I'm trying my best. HTML emails and Outlook are a special kind of PITA. Let's say you've created a new email from a template. Within in the original template code, images are coded with a a width="" instead of an inline style="width:".

Try replacing an image by double clicking the image that was in a template using the WYSIWYG. Replace the image by selecting an existing image or upload a new image. You'll see that width and height are populated automatically. The width and height of the new/replaced image are added as inline styles on the img src and the width="" is removed. Save and then return to the email, then flip to the html source and you will see that the width="" has been removed from the img src. So if someone has created a retina sized image at 1200px wide and the email is only 600 pixels wide, the image will blow the email wide in Outlook because Outlook doesn't recognize inline style widths on images just width=""

I'm telling clients not to make retina sized images unless they are comfortable going into the source view and adding in a width="" on an image they've replaced or added. Most folks aren't comfortable working in the code so it's a real problem.

BTW - I'm NOT using the Paste from Word plugin.

[msamsel]

Hi @winds4sw,
maybe it's enough to forbid those styles for IMG tag? Some example here: https://codepen.io/msamsel/pen/rpBmzY
I see that we transform attributes to styles: https://github.com/ckeditor/ckeditor-dev/blob/230f715926634e4056a87a572c94707c4190921c/plugins/image/plugin.js#L40-L43
And I don't se any easy option to prevent of such transformation except forbidding those styles.

[mlewand]

Hi, It's been a while since we last heard from you. We're closing this issue for now. Still, feel free provide us requested feedback, so that we can reopen this issue.

[winds4sw]

My apologies for not getting back to you. It's been a busy year-end. Yes, forbidding the transforming of attributes to styles particularly the width would help. But what's also important is the width is adding to an image with width="xxx" version the inline style. Is there a way to do that instead?

[mlewand]

@msamsel could you check the issue after the feedback?

[msamsel]

@winds4sw I'm sorry but I don't understand what is you expectations here. Github is a place to report bug or made a feature request. Please take a look into our support guide to read more about it.

As I wrote earlier preventing transformation to styles might be complicated. I also point to code where this transformation is made, in case that you wish to dig more with this case by yourself. If you need some assistance or guidance with editor configuration, then GitHub is not a place to do so (all possibilities are present in support guide)

Please follow our issue template if you wish to report bug or feature request next time.

[OrganicPanda]

It's a shame this got closed because I have the same issue. Let me try to explain it better:

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

1) Open http://jsfiddle.net/4n5q3a17/4/
1) Use the "source" view to verify the width and height attributes are present
2) Double click the image and replace the URL
3) Use the "source" view to verify the width and height attributes have been removed

Expected result

Image is replaced without losing the width/height attributes which are needed for HTML emails to support Outlook

Actual result

Image width/height attributes are removed

Other details

• Browser: Chrome
• OS: MacOS
• CKEditor version: 4.6
• Installed CKEditor plugins: Standard (See fiddle)

I had a look in the plugin but without knowing too much about how CK internals work it's hard to see where the attributes are getting lost