How to convert image to html?

Question

Is there a way to convert an image to an html equivalent of the image, by having an html table divided up into many cells each having a certain background colour which would act like pixels in an image? Much like ASCII art.

I would see this as a way to have a corporate logo in an email signature without having to worry about email clients blocking images.

Answer 1

Try converting to html/css. It's more compact than base64 and although I haven't tried it yet, it should work. It uses css to create an image without needing anything external. Dont pay attention to the top, that is the place where the code that does all the work is. Pay attention to the bottom. https://codepen.io/blazeeboy/pen/bCaLE

no code. just something I have to do to get the post online.

Answer 2

Try the "Image to HTML Converter for Email" from STYLECampaign. If I remember it right, you'll get a download link in exchange for subscribing to their newsletter on stylecampaign.com. The tool works ok, has scaling and compression; here's a blog post http://bit.ly/Jhf1CK and a video guide explaining tips and draw backs: http://www.youtube.com/watch?v=VSi51yLQFnc

Answer 3

Yep, loads of people have done this: http://pgl.yoyo.org/img2html/ is an example.

Answer 4

Perhaps what you need is just converting your image to URI format.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://jsfiddle.net/z6FFc/

Answer 5

I would caution against attempting this sort of trick.

A simple rule with doing 'clever' things with email is first to ask "Do Spammers use this same technique?". If the answer is yes, you can be certain that ISPs are manning their filters to junk email containing it.

In the case of tricking images into displaying, either with the base64 trick or pixeldivs, these techniques have been used for years by spammers and may damage your sending reputation.

If the company in question has a good connection with the recipient they will be happy to display images. Many clients such as gmail will enable images once you've replied or added to contacts. Furthermore, using techniques such as DKIM to sign your headers, using a reputable third party sender, or paying for ReturnPath certification can raise your reputation sufficiently to override the image blocking at most major ISPs.

Answer 6

Tom Walsh, what makes you think it is always ISPs that block images? What about email clients? 80% of emails have images blocked as default. Relying on users to have the effort, or knowledge to change these settings is a bad idea.

Using some services such as Mailchimp, give you a new email address each time you send, hence, you cannot add as a safe sender. Techniques such as those mentioned are a great way to get an email list, which has already double opted in, to receive a semi-pictorial version of your email in order to entice them to download images.

That top link works. I used a JPG, I'm not sure what format it accepts. Just so you know, this makes the file a fair bit larger than a normal JPG. Consider whether it's worth using for larger images, but for an email signature, I can see that being a decent use. I've noticed that sometimes when you reply, signatures break... sooooo.... be aware you might end up with a load of <tr><td>A</td></tr>

Final warning... if your email signature did break and end up in code form.... be aware that the default for the top link is "arse" hence... some clients may find that offensive. Perhaps change it to your company name. And remember that making a link for this table-image is going to (a) take a while and (b) majorly bloat this code for the second time.