There are various ways of adding images to your post. Most people uses the photo upload icon

tool icon in the post editor toolbar. When you click this icon, you will get a pop-up window where you can browse for photos saved in your computer to upload to your post or enter the URL of a photo already hosted on the web. If you choose the first option, your image will be hosted by Blogger. You may choose to have photos which are already hosted on the Web using the second option. If those photos are not yours and not hosted by your own third party photo host like Photobucket under your own accoount, there may be copyright and bandwidth issues.
You will have a choice of how to position your image - none, left, center, and right. See "Positioning of the images" below.
You can upload more than one photo at a time. After selecting a photo from your computer, to upload another one, you just click "Upload another image" and another field will open below the first one, and you just repeat the process. When you have finished opening all the photos you want to upload, just click the button DONE and the photos will be published to the post. For me, I prefer to upload the photo one-by-one.
With this method, the image will be rescaled to fit into your main column automatically if you choose the "large" format.
File format of images you can upload
You can upload images in jpg, gif, png, tif or bmp file format. If you have images in format not included in the above, you can use the free and very good Irfanview to convert it to an acceptable format. I use Irfanview a lot, together with the Paint program that comes with Windows. See post
Using Irfanview for your blog.
Positioning of the images
If you choose left or right, the text will wrap around the image. The image will always be uploaded to the top of your post irrespective of where you place the cursor. If you want to upload only a single image, and you want to leave it at the top, or you want it to be in a particular paragraph, then this may be a good choice. However, if you intend to position your image accurate in the post with respect to the text, you will have very little control over how the text will wrap round your image, except choose which paragraph it will appear in. You may place it in a certain position in the post editor window and preview it, but when you publish it, you may discover that the text flow differently around the image on the Web.
Choosing NONE means you can position it anywhere within the text such as that "upload photo" icon you see above.
Choosing CENTER will mean your image will be positioned in the center of the column and text will not wrap around the text.
Repositioning and resizing your image
As mentioned above, images are always posted to the top of the post irrespective of where your cursor is. If you want to repostion it, if you are in the COMPOSE mode, you can click, drag and drop it to whereever you want. You can also resize the image by positioning the cursor at the corner of the image, drag and drop it to the size you want. You can also do the same with the sides, but it will mean the aspect ratio of the image will be changed (the image will be distorted). I don't like to use the COMPOSE mode to reposition images. This is especially if you have a long post, and you want the image way down the post. You will have to do numerous consecutive drag and drop to get it there.
To reposition image, I prefer to use the EDIT HTML mode, as all I have to do is to highlight the HTML for the image, cut and paste it into the position I want. To be able to do this, of course you would need to know how the HTML looks like, so I put below the HTML for this

image below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbImO4Z-7XFic_3Wn7IbFVzR_3ZMkZmkJvGkKHBoV69qE1DYxcVACqi83s_x_JKfQhyp3xVdycy_v2ePcSm2g71mWWBbfP8jYZ3VNL6cFptV_UAzWbYiDkSnkH9cVCmFRYAYQWDGaXjY/s1600-h/post+editor+photo+upload+tool.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbImO4Z-7XFic_3Wn7IbFVzR_3ZMkZmkJvGkKHBoV69qE1DYxcVACqi83s_x_JKfQhyp3xVdycy_v2ePcSm2g71mWWBbfP8jYZ3VNL6cFptV_UAzWbYiDkSnkH9cVCmFRYAYQWDGaXjY/s400/post+editor+photo+upload+tool.jpg" border="0" alt="Blogger post editor photo upload tool icon"id="BLOGGER_PHOTO_ID_5013615884201821682" /></a>
When uploaded, this alt attribute alt="Blogger post editor photo upload tool icon" was just alt="", but I added the description in because search engines cannot read images, but can read the alt="" attribute. Doing this will be good for search engine to know what your post is all about. Further, if for any reasons the image cannot be displayed, the text will be displayed in its place.
Problems uploading the image via the photo upload icon in the post editor toolbar
In the Google Blogger Help group, there are frequent complaints of not being able to upload images. If you are experiencing such difficulties, there are various ways you can try to overcome it:
Using a different browser
Try using a different browser. See post
What to do when you can't upload photos, publish post, login, download a webpage, etc. I find this simple "trick" helped me through lots of situation, and I have received feedback from readers that it has helped them. But don't expect it to work in every circumstances. If you belong to the 80% surfers who use only Internet Explorer, it is time for you to download and install
FireFox as it is a very much better browser than Internet Explorer 6. See also post
Why you should be using more than one browserPhotobucket
Upload your image to a third party photo host like
Photo Bucket. With
Photobucket, you can upload photos as well as videos, and you can blog direct from
Photobucket. There are 2 type of accounts - free account and Pro account. I will explain the difference later.
After you have uploaded your photo to
Photobucket, you can use the <img src="photo URL" width="W"> tag to publish your photo to the blog, where W is the width of the photo you want displayed in your blog, or you can blog direct from
Photobucket. If you take the first alternative, you will need the URL of the hosted photo. This you can get from your Photobucket account. See screenshot

To publish the photo to your blog, type this into your post editor: <img src="URL of photo" width="W" alt=""> where the URL of the photo is what you see highlighted in blue in the screenshot above. To ensure that the image published fits the width of the main column. You will first have to know what is the width of the main column. For this, you will have to get to your template editor window and look for this block of codes:
#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
(This one is taken from this blog. It says the width of my main column is 400 pixels)
If I publish an image to this blog, I will have to type the tag as
<img src="URL of photo" width="395"> which will make the image fits nicely into the main column. The height of the image will automatically be adjusted to keep the aspect ratio constant (that is, the photo will not be distorted). Alternatively, if you don't like to use the width="" attribute, you can use
Irfanview (click "BACK" button to get back to this page) to resize your photo to fit the main column before you upload it to photobucket. Then you don't to add the width="" attribute to the <img> tag.
For more information on the use of the <img> tag, go to
W3schools.
I also tested direct from
Photobucket and the result was disappointing, and I will advice you to use the <img> tag instead. I blogged direct to this post
Testing blogging direct from Photobucket, which wasn't my choice, but the blog just happened to be the first blog in the list of blogs on my Blogger account. You can read more about the test in that post.
Difference between a Photobucket free account and a Pro account
I will tabulate the difference between a free
Photo Bucket account and a Pro account:
| Features | Free | Pro |
|---|
| Ads | Yes | No |
| Storage space | 1GB (10,000 images) | 5 GB (50,000 images) |
| Image file size | 1 MB | 2 MB |
Image dimension | 1024x768 | 2240x1680 | | Slide show images | up to 10 | up to 50 |
Video length | 5 minutes | 10 minutes | | Print discount | none | 10% |
| FTP support | none | Yes |
| Premium support | none | Yes |
| Bandwidth | 10 GB | unmetered | |
You can get a
PhotoBucket Pro Account for $25 a year or $2 a day.
Using Google Group
You can create a Google group to specially upload your files and photos like what I have done at
Google Group Photostore. You upload your photo, and when you have done that, you right-click on the file and choose "Copy Link Location" (see screenshot):

Then you use the URL as described in the section for Photobucket above. BTW, I used that image Baby Centre Header 3.JPG for the Header in this blog
Baby CenterBlogging from flickr
This is a bit more complicated, and I have only started testing how to blog from flickr. I have difficulties in adding blogs to blog to, so while I explore blogging from flickr, I will just post the notes I made while trying to upload photos to flickr and blogging from there. Hopefully, I will be able to revise this section in the next few days, time and memory permitting:
Signup for a flickr accountupload photo
add tags
edit title if necessary and add description
save
click on photo
click "Blog This"
Configure a blog to publish to, if you have not already done so
If posting to New Blogger, have to sign into Google Account first
Grant Access or
Granted Access
Create a custom posting template
Click on Your Photos
Click on "Blog This"
Select blog to publish to
Type text for blog post
When ready, click "Post Entry"
I have successfully posted to a New Blogger blog at
I think, therefore I am.
The problem I am having is figuring out how to add other blogs to post to. Hope to have an update, time and memory permitting.