Pasted Images Into The Joomla Editor Do Not Show Sometimes On IE8
Please note that I do not get paid to write these articles.
Based on tests done on Joomla 3.2.3. Took about 5 hours or more of work to do this article.
The Problem
When you are using the Joomla editor, TinyMCE, and possibly other editors to make an article for your Joomla website, you may find that some PASTED images do not show on Internet Explorer 8 (IE8), and on other older versions of IE too. This problem might also be occurring with some extensions/addons/plugins for Joomla, since they would have the same behavior and result.
First, What Happens When You Paste An Image Into The Page Editor (Such as TinyMCE, the default editor on Joomla)?
When you paste an image into the editor, the html code for the image is automatically generated and a data URI is put for the URL portion of the html code. When looking at the source link for the image, you will see that the URI starts with "data:image". 
What happens is instead of an image reference URL (a web address link) being provided, the image is embedded directly into your page as code.
The Cause Of The Problem
The problem is that browsers have limitations for how large a embedded image URI it will display. It is more like how many of the characters it will read. Internet Explorer 8's limit is 32Kbytes (specifically 32,768 characters). The limit for IE8 is relatively small enough to cause images to not show frequently enough to be a big problem, and this happens when the number of characters that make up the URI is larger than 32,768.
This means the problem seen on IE8 can potentially happen on other browsers too, if that browser has a limitation set too, or possibly a future version of the browser could get a limit set. Different browsers have different limits, and I am not sure if some modern browsers just have very large limits or no limit, because I have been able to have very large images embedded and show on Firefox new versions.
There is an easy way to determine the number of characters in the URI.
- While you are in the Joomla editor (and I suspect any CMS or software editor that uses TinyMCE) and after you paste an image into the editor, click on the image and then click on the image icon,
. - Copy the contents of the Source field.
- Then Open Microsoft Word, or something similar like OpenOffice Writer.
- Do a Word Count on the whole URI by pasting it into MS Word and highlighting it and going to somewhere like Tools >> Word Count (varies according to your version of Word).
If you do a Word Count using an older version of MS Word, you will see something like this:
As long as the word count is 32278 or less, you should be fine and the image should be showing on IE 8 and other browsers.
Below is an example of how the same image is not showing in IE8 and showing in IE8. The first does not show in IE8 because it's URI is larger than 32278 characters. The second image shows, since it is not using a URI, and using an image source link (URL) to reference were the image is.
Example: Image does NOT show in IE8
The URI for the image above is not pasted here since it takes up a lot of space, but you can see it here.
It is 36,118 characters long, and since that is larger than 32,768 characters in count, it will not display as it will be a broken image.
Example: Image shows in IE8
The Fix
Since this is a browser related issue and hard coded into the browser (I have not checked for a setting to change the browser URI size; if it exists, please post here as a comment), your only option is to save the image as a .png or .jpg or .gif or other accepted image format, and upload the image to the Joomla Media Manager, and then click on the uploaded image and copy the images link (by clicking with the right mouse button and choosing something like Copy Image Link), and use that as the image source URL.
By the way, the last two images above were both pasted into the editor and thus embedded into the page with an URI, and since they are less than 32,768 characters, they both show.
Feel Free To Leave A Good Comment. :)
Look around, and you may find other useful articles. Add this site to your Bookmarks/Favorites for easy return for new articles. Consider submitting technical articles for publication, including your embedded links. I will even create a new category if needed.
