Uploading animated .gif image to Blogger post

I tested uploading animated .gif image to Blogger post at Testing uploading animated .gif image to Blogger.

Conclusion of the test is, if you upload the animated image direct via the Blogger photo upload icon , the image will no longer be animated as you can see from the first image which was uploaded via the via the Blogger photo upload icon in the toolbar of the Blogger post editor.

If you want the image to remain animated, you must first host the animated .gif image with the free Photobucket image host and use HTML to display the animated image. Here is a screenshot of the animated .gif image uploaded to Photobucket (click on screenshot to enlarge):



IMPORTANT NOTE: In the screenshot above, I have highlighted the third tag wrongly. You can use it directly, but the image will link to Photobucket homepage, and not to your image or any other sites you want the image to link to. Further, the alt="some description" attribute describe Photobucket". It is the second tag (URL) that you should use for use in your profile, typing your own <img src="image URL" alt="" /> to display the image or to use the image as a hyperlink to another site, eg, your book you are trying to sell on Amazon, etc. However, if you are not familiar with using the <img> tag to display images, the third tag (highlighted) you can just copy and paste into your Blogger post editor window to display the image, and if you wish, edit the target URL to link to any site of your choice and edit the alt="" attribute to some description of your image. The HTML have already been prepared for you and you don't need to know any HTML

For blogging purposes, only the second and third box is relevant. The IMG code (one of the BBB code normally only used in bulletin boards) where you can just copy-paste the IMG code into a message and post in a bulletin board to display the image.

For displaying animated .gif images, you MUST use the EDIT HTML mode for your post editor, otherwise you will not be able to write HTML properly.

Typing the image HTML tag yourself

As you can from the screenshots, the free Photobucket image host give you 4 codes. The second one is the actual URL and if you are familiar with HTML for displaying images, you can type the HTML yourself. It will be of the form

<img scr="photo URL" alt="some text" title="some text" /">

Replace 'photo URL' with the actual URL of the photo which you can get by clicking on the second box (Direct Link) you see in the screenshot above and pressing ctrl+C key or right-click on your mouse and select "copy", then pasting it within the quotation marks in scr="photo URL" and deleting 'photo URL' (that is, in short, replacing 'photo URL' with the actual URL of the photo).

The attribute alt="some text" and title="some text", where you replace "some text" with something relevant to the photo, and are optional. That is, you can leave it out if you want. But it is highly recommended to add them as search engines spiders cannot read images, but can read what is written inside the alt="" and title="" attributes. Adding them will thus enable search engines spider your post better. Further, by adding the title="" attribute, when you hover your mouse cursor over the image, you will see a tool tip displaying the text you put between the quotation marks.

Copy image HTML tag from Photobucket and pasting it into the post

If you are lazy to do what is described above, you can just click on the third box (HTML tag) which for the image used in Testing uploading animated .gif image to Blogger, is:

<:a href="http://photobucket.com" target="_blank"><:img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"><:/a>

Note that it is given as a hyperlink (starting with <a....), and anyone clicking on the image will be taken to the Photobucket site, not to the page showing the photo. Further, the alt="" text is given as alt="Photo Sharing and Video Hosting at Photobucket" which means you are doing a favor for Photobucket. Well, if you are generous, that is a fair exchange for Photobucket hosting the photo free for you. Plus you have the luxury of just copy-pasting. Also, the animated image will be aligned left.

Copying the image HTML tag from Photobucket and editing it

Another alternative will involve a little extra work but will get the displayed and at the same time do what you want. If you want the animated image to link to a site of your own choosing, you can delete http://photobucket.com and replace it with a URL of the site you want to link to (the actual image on the web, your favorite site, you homepage, etc.). If you are observant, you will notice that the example of the image HTML tag obtained direct from Photobucket end with

alt="Photo Sharing and Video Hosting at Photobucket">

whereas mine ends with

alt="some text" alt="some text" /"

(note: for Photobucket, no space between title=""> and no / for HTML tag. This is bad practice because to be compliant with XHTML, a HTML tag with opening tag and no closing tag (most HTML tags come in pairs, and opening tag and a closing tag. Only very few HTML tags like the img tag don't need closing tag) should end with a / plus there must be a space between the last attribute and the /. I suppose if you want to comply, you can just edit the HTML from Photobucket yourself.

Further, the image is aligned left. What I did in Testing uploading animated .gif image to Blogger was to copy the photo HTML direct from the third box (HTML tag) and as I don't want it linked to Photobucket, I deleted the

<:a href="http://photobucket.com" target="_blank">

in front of the <:img...... and then deleted <:/a> at the back of the tag, leaving the image HTML tag as

<img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket" title="animated gif image"/>

leaving the alt="" attribute as alt="Photo Sharing and Video Hosting at Photobucket" as a favor returned for Photobucket hosting the image for me free, adding title="animated gif image" but adding a space after the title="" tag followed by a backslash / to make it XHTML compliant.

In the third test image, I wanted to center the image, so I surrounded the above edited image HTML with <div style="text-align:center"> and </div> (note: this is the standard tag with an opening tag and a closing tag) so that the image HTML become:

<div style="text-align:center"><img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket" title="animated gif image" /></div>

Other possibilities with Photobucket

I hope you understand what is explained above, and if you do, you should be able to think of other alternatives to achieve what your objectives are by suitable editing or changing.