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.
Here are the main reasons to use embedded images:
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.
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:
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.
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:
The embedding works as follows:
The result is similar to uploading the image except that the image is now embedded to the page:
If you bring up the Image Properties window, you can see the URL of the image is a Base64 encoded string:
As you see, working with the Image Embed plugin is as easy as with conventional image uploading solutions.
