You’ve distributed a newsletter to your subscribers and received complaints from some readers that your images would not show up? The answer may be quite simple: include the image in the source code of your newsletter! To accomplish this, the image must first be converted to a base64 string.
The basic idea behind an image (.JPG, .PNG, etc.) to CSS is to bypass image filters in email clients to ensure images don’t get blocked. The amazing thing is that the conversion process creates a near-perfect pixel-for-pixel copy of your image(s)! This works by encoding an image into a base64 string and placing it directly within an HTML image tag or as a CSS background URL.
Online image converters
Summary
The biggest drawback to the first three methods is the resulting file size. The size of each image is increased, making them larger than ordinary images. The size of the resulting css/html file increases as the image size increases. This is why it is best to convert only small images like icons and logos. Large images may be clipped by the email provided. There is also a huge advantage, though. Email clients cannot tell that CSS images are really just images. The image source code looks like regular HTML, and so it gets displayed just like plain text!
Don’t forget to validate your email code. You can try Fractal, a clever online tool which allows your email CSS to be validated across 24 of the most popular email clients simply by uploading your email code (HTML/CSS). This tool will even suggest fixes to your code to ensure it is cross-compatible. If you like the tool, a subscription can be purchased.