How to embed an image in HTML (Usually for Emails)

If you’re developing some HTML code that it can be accessed by thousands of people at the same time, if you use images like this:

<img alt="" src="http://myimage" />

You could trigger a huge load to your server, because every request of every image goes to your server. Instead of that you could embed the image as HTML using Base64.
You have to convert your image (e.g. PNG image) to Base64 Code. You can convert it here: http://www.greywyvern.com/code/php/binary2base64
Then you have to build your HTML image like this:

<img alt="" src="data:image/png;Base64;8Fjh8YgG654d6f..." />

The new src must start with “data:image/png;” (png or jpg, gif…), then continue with a “Base64;” and finally the base64 code for the image.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.