Saturday, July 4, 2009

Picture Tests 2

I am doing some tests to determine why Blogger sometimes does not show pictures. I think it has to do with both the type of link and how the URL was generated. If you don't care about such things then you can just ignore this post. In this second experiment I am making sure to use a different image file for each test. In my previous test I just used the same image file for all the different kinds of links and I couldn't get it to break. I think this is because, once the image file was downloaded once for a good link, that the browser may have just used the good image for all the other links as well. I don't know enough of the details of how browsers choose to pull files out of their cache to say for sure. So, this time, I am using separate images to avoid that possibility.


NO a tag, blogspot.com URL

Ebbinghaus Chart 1

YES a tag, blogspot.com URL

This is the standard form of link that you get when you insert a picture the normal way that Blogger expects you to: Compose tab, Insert Picture button, Upload a file from your computer. Blogger sticks that file in a special, unlisted, album in your Picassa account and then links to it there. Interestingly, if you look at the HTML of the link below, you will see that the URL of the image comes from the blogspot.com domain instead of picassa or even picasaweb.google.com. In contrast, if you copy the URL from the Picassa web site (as I did for the next two tests) you get a URL from ggpht.com. I can only guess that this is a domain used by Google for serving up these files via some kind of server redirection or virtual server technology which I won't get into here.

Ebbinghaus Curve 1

(If you already have posts where the images sometimes disappear and those images are on Picassa, then you can use the following trick:

  1. Download those images from Picassa to your computer.
  2. Delete those images from Picassa.
  3. Make sure the files on your computer have meaningful names.
  4. Create a new, bogus, post in Blogger. (You will not be publishing this post.)
  5. Insert all the images into the bogus post by going to the Compose tab, clicking on the Add Image button, then uploading the image. (This will then stick the image back into your Picassa album reserved for this blog but Blogger will then know the special URL that goes through the blogspot.com domain instead of that crazy ggpht.com domain.)
    • Blogger creates an <a> tag with some weird code in it and buries an <img> tag within that. You will want to use this entire thing in the next step.
  6. Copy those <a> tags with the <img> tag inside them and paste them into your original post in the appropriate locations.
    • I paste them above the original <img> tag then check to make sure I have the same height and width specified before deleting the original <img> tag.


NO a tag, ggpht.com URL

This image link is likely to be broken intermittently. For some reason Blogger does not always like accessing images from the ggpht.com domain. To ensure reliability, do not use this technique.

Ebbinghaus Chart 2

YES a tag, ggpht.com URL

This image link is likely to be broken intermittently. For some reason Blogger does not always like accessing images from the ggpht.com domain. To ensure reliability, do not use this technique.

Ebbinghaus vs. Calculated

Using the Embed link provided by Picassa:

From Ideationizing

Using a simple img tag with ggpht.com URL:

This image is stored on Picassa but in the album called Blogger rather than the album named for my blog. This seems to make a difference.


Using a simple img tag from some other domain:

This image is from my web site about the XML standard I am working on (www.demml.org). I am using it because I know I have the right to link to it.


Link created by referring to web based image in Compose tab insert image window, using URL from ggpht.com domain:

I used the ggpht.com URL obtained by right-clicking on the image in Picassa. Then I pasted that URL into the field where Blogger's Compose tab ; insert image dialog lets you paste a URL. If you look at the HTML below you will see that Blogger did not modify that URL in any way. The question is whether this image will show up later.

Update: July 9, 2009: This link did eventually break. This image is stored in my album in Picassa that is named for my blog. I have found that if I right click on any images that are in this album and use the resulting URL that the link eventually breaks. However, if I use an image that is in any of my other albums then the link doesn't break.


Notes:

  • It seems as if there are only two major ways to get images in a Blogger blog such that they will not eventually disappear.
    • Upload the file from your computer using the Compose tab ; Add Image button. This will put the image in your Picassa album named for your blog and will use the blogspot.com domain in the link.
    • Create your own <img> tag in the Blogger post-editor's Edit HTML tab. However, be sure to use an image that is on Picassa but not stored in the album named for your blog. I have found that using the Picassa album called Blogger seems to work reliably. In this case, you can simply find the image in Picassa then right-click on it to get it's URL.
  • I have found that images which are stored on other web sites do not show up when using Internet Explorer.

You are free to copy this post and use it to do experiments on your own blog. Just make sure to change the links to images you control, rather than leaving the links pointing to my images. Please also give full attribution and link back to my original page.
Thank you.

3 comments:

  1. Has Google changed something somewhere that this is happening now? I didn't have this trouble at all until about 2 weeks ago. I'm going to go back through all my photos and redo the links and see if this solves it. My really big question is "why is it intermittent?" Thanks for the help. I'll post back and let you know how it turns out.

    ReplyDelete
  2. Jimmy, I don't know when the problem started. All I know is that I had some of my pictures not showing up and started investigating it. If you could try similar experiments on your blog that would be really helpful. I have not given all the details of how each link is constructed but you should be able to see from looking at the HTML code.

    ReplyDelete
  3. I have updated the post with some notes and observations at the end. It seems there are really only two ways to get images to work reliably on Blogger. But, at least we now know what they are.

    ReplyDelete