How to Embed Images to HTML Code

Sometimes you may want to give users of your website a way to insert images into their content. Normally, this would require users to upload pictures they want to publish to your server. However, there’s an alternative – embedding images directly to a web page using data URI.

Of course, embedding is not suitable for high resolution images. This would make the HTML page too heavy and slow to load. Another possible disadvantage of this approach is that embedded images are only cached with the HTML contents of the page. But in many cases embedding is a preferable solution.

In this article we will describe how you can add image embedding capabilities to the content editor on your website (CKEditor or TinyMCE) using the JS+ Image Embed plugin.

Why would you want to embed images?

Here are the main reasons to use embedded images:

  • Images are small (icons, glyphs, emoticons and so on);
  • Images are used on just one page, specifically, the page they are displayed at;
  • You don’t want to (or can’t) provide ways to upload images to the server.

While the third excuse is easily resolved using JS+ Easy Image Uploader or JS+ Quick Image Uploader, the first two are still reasonable enough to give embedded images a try. Especially, since embedding images to the HTML code becomes simple thanks to JS+ Image Embed.

How does embedding work?

Embedding of images to the HTML code of a web page is powered by the data URI scheme and defined by RFC 2397.

The embedded image is encoded using the Base64 binary-to-text encoding scheme. Then, the Base64 string is inserted to the HTML code as follows:

Base 64 encoded data as part of URL Scheme

The browser reads this value, decodes it and displays the actual image.

In the user-generated content it is all the same except that the HTML code is composed automatically by the content editor (TinyMCE or CKEditor or any other content editing solution).

Of course, you wouldn’t expect that an average user can and will generate the code like the above. You need to give users a visual way to browse for an image and insert it to the page. And here is where the JS+ Image Embed plugin makes and entrance.

How to embed an image to the page in CKEditor or TinyMCE

First of all, install JS+ Image Embed plugin. The plugin is compatible with CKEditor including the latest CKEditor 4 and TinyMCE also including the latest version 4.

Installation instructions:

After you install the plugin, you should see its button on the toolbar of the editor. Here is how it looks in CKEditor:

Image Embed screenshot

The embedding works as follows:

  1. The user clicks the JS+ Image Embed button on the toolbar. A dialog appears.
  2. The user selects one or more images to embed.
  3. The selected images embed to the page.

The result is similar to uploading the image except that the image is now embedded to the page:

Images inserted by uploading and embedding

If you bring up the Image Properties window, you can see the URL of the image is a Base64 encoded string:

Appearance of embedded image in CKEditor

Conclusion

As you see, working with the Image Embed plugin is as easy as with conventional image uploading solutions.