Problems when images must be attached to the email

[madesp]

Hello,

I'm having issues using images in mails. My images need to be sent within the mail. These are not taken from external urls.

When doing it, I tried two options:
When having something like:

<img height="auto" src="example_image.png" style="border:2px solid;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200" />

1st option, the src content is converted into, as example, cid:16688038786377ed26ca430288725985 with the attached image.

2nd option is using inline base64:

src="data:image/png; charset=binary;base64,iVBORw0KGgoAAAANSUhEUgAAAcQAAADzCAIAAACXNfHpAAAgA= ElEQVR4Ae2deVwUR9rHq7p7hiOA3CIgh4qIgki8b0XxAATReCcxyRuzuTbZzZtrk93Nm8vNbs51 c+2ua1aNVzQeaBTvE7wiXlwKgsh9DcjNTHfX++kZGAaYHoaBmYHhmT+0p7vqqae+T/Uz ..."

When using tag it seems to mostly work ok. But when the background-url is used, several clients don't render it. I mean, when having something like:

<table align="center" background="example_image.png" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url(example_image.png) center top / auto no-repeat;background-position:center top;background-repeat:no-repeat;background-size:auto;width:100%;">

Some email clients work with the "cid" option and some others with the inline base64... and with other clients no option works.

Is there any recommendation on what I should do to include the image inside the email?

Thanks in advance.

[iRyusa]

It's not really the MJML job to handle this. base64 isn't really safe to use as it might make the email too big for some clients and trigger spam filters.

Best solution is to host your images somewhere (cdn, ...).

[madesp]

Hi @iRyusa , thanks for your reply, i got your point, thing is that the way of hosting the images is not the issue, sorry i didn't explain myself clearly... Thing is no matter how images are hosted, but how images are included within the html content, when including them for instance inside background or background-url styles for a mj-section , some mail clients are displaying them correctly when some others are not displaying them. I mean, there seems to be no general strategy to make images correctly visible for all mail clients, or at least i didn't find one good way...

[iRyusa]

MJML try to ensure the background will be displayed in as many clients as possible but support vary (https://www.caniemail.com/search/?s=background). Anything that might alter the output HTML (esp, minifier, ...) might break some of our hacks to make sur the background will be displayed.

[madesp]

Thanks for sharing that helpful website ;)