Embedding encoded Base64 images into your HTML Web Resources in Dynamics 365 can be useful. Rather than referencing a public facing image, or having to upload the image as another standalone web resource we can use code to render an image.

Base64 Images

There are many online tools that will take your source image, and convert it into the Base64 code.
Some debate abounds to the validity of doing this for mobile responsiveness etc, but i’m only using this sparingly.

My PNG goes from this:

MiiiA Pty Ltd Logo

To this: (shown inserted in an <img> tag inside some HTML)

The beauty of this, is that to the end-user it renders like the original image on the page, they wouldn’t know the difference.

 

The Problem

While updating some components in a Dynamics 365 solution, I stumbled on a gotcha today. One of my Base64 encoded images suddenly decided not to render for some reason.

After inspecting the page I noticed that the Base64 encoded string was all in lower-case (something had removed the capitals).

Base64 uses 64 characters (A-Z, a-z, 0-9, +, /) as part of its index table.
By losing the Capitals it had effectively lost 40% of the information, or scrambled it at least using only lower case letters.

If you use the Upload File capability directly when creating/editing a Dynamics 365 Web Resource you can maintain the integrity of your code.

Dynamics 365 Web Resource Create Edit

However I noticed that if I upload the file directly, then click Text Edit and flick to the source tab the code has been altered back to lower-case. If you don’t SAVE then it won’t affect your code/image, but if you’re in the habit of making other tweaks directly like this then you could corrupt the image. I was also able to confirm that pasting the correct Base64 code over the top in the in-build editor does not Save. So this must be the editor stripping the Capitals out of this for some reason.

Dynamics 365 Web Resource Text Edit Source

 

The Solution

Moral of the story is, edit your Web Resources with external tools and use the Upload File. There’s also a great plugin by Tanguy Touzard for XRMToolBox Web Resources Manager that makes this stuff a breeze.

 

Daniel Hesketh SignOff

The post Base64 Encoded Images in Dynamics 365 Web Resources appeared first on MiiiA Pty Ltd.