If something here interests you, I'm glad to share it.

Why your image is gone

You may have noticed that when your browser loads a web page, particularly over a slow internet connection, the page sometimes appears in fits and starts, with pictures arriving after the surrounding text is already on screen. This is because the most common technique for including an image in HTML is to use a tag that contains a pointer, or address, called a URL, to an image file stored somewhere on the web, not necessarily on the same server as the rest of the page. When the browser encounters such a tag, it sends a request to that server for the image, which may not arrive for a while. In the meantime, the browser continues rendering the text on the page. The browser leaves a hole for the image if the tag also specifies a width and height; otherwise it has to rearrange the text suddenly when the picture arrives. In any case, the page appears asynchronously — herky jerky.

Some web page designers don’t want the page to show in fits and starts; they want it to roll out quickly and smoothly. One way to handle this for images is to replace the URL pointing to a remote image file with an encoding — called a data URI — of all the pixels in the image. This technique can enlarge the file size of the HTML page considerably; a typical URL pointing to an image elsewhere might run to a few dozen bytes, but an image itself, say from a smart phone, can easily run to millions of bytes.

When you comment on my blog, I have to store your comments at my website, so that others can see them. (I use a database, but the technique doesn’t matter.) If you copy something — say from a web page somewhere — into your comment, and it includes an image, I don’t mind storing an ordinary image tag, but I don’t want to store encoded pixels for the image itself, especially considering that the image already has a home somewhere else on the web. Hence the replacement of your image with the text [Data URI removed].

What you can do about it

If you can find the image included on some other web page via an ordinary tag, then copy from there into your comment instead.

How do you know how the image is embedded in the page? On Firefox or Safari right-click the image and choose View Image Info; if the address starts out data:image/ you have a data URI; if it starts out http:// or https:// you have an ordinary tag. On InternetExplorer, right-click and choose Properties, then inspect the address in the same way. On Chrome, right-click the image and choose Copy Image URL; open a new text document and perform a paste operation (Edit→Paste or Ctrl+V [Windows] or Command+V [Mac]); then inspect as before; in the case of a data URI you may have to scroll mightily to get to the beginning of the paste.

If you can’t find the image anywhere in file form, but you have a publically accessible web page where you can park images for the long term, then save the image somewhere on your computer (to a folder where you can easily find it again) and upload it from there to your page. Then you can copy it from that page to your comment. The saved image will be a jpeg or png, depending on how it was stored in the data URI, and you will get an ordinary image tag in your comment.

As a last resort, you can put a link in your comment to the page where you found the offending image and describe for the reader in your comment what to look for. For example, you might insert in your comment “See the picture of the cat on this page.”