Hosting/Uploading images/photos  in Blogger template means you get unlimited Bandwidth and top class up time for loading to that images/photos in to websites or blogger templates. I have seen many webmasters who created so many templates for websites as well Blogger Blogs and hosted all the images into any free hosting server such as imageshack.us and photobucket.com, but all the free hosting servers gives some limited Bandwidth. It may be 1GB or 2GB or more if you are a premium member. So if you reached your Bandwidth limit, then your images can't be shown on your websites or blogger template or if you used photobucket, then after reached your Bandwidth limit your websites or blogs template shows an image which display to your visitors that Bandwidth limit exceed which hearts the health of your sites or blogs which leads as an unprofessional way and if you used any third party blogger template in which some images hosted on free hosting server and if you have enough traffic to your blogger template, then your visitors may be sees an image of Bandwidth limit exceed. If your Blogger blogs have not enough number of visitor then no problem because you may be not reach to your Bandwidth limit exceed, but it doesn't mean that your Blogger blog never receive enough traffic in the future so why not try to give unlimited bandwidth of your blogger images and then doesn't matter that how much traffic you receive.

The second advantage is that the top class loading time or uptime because it hosted on the Blogger as well on picasa as you can see an example in my site. All the images of this site are hosted on Blogger so I don't worry about my Bandwidth limit and also I got top class loading time or Uptime. You can too do for your blogger template.  

Suppose you used a lot of image hosting server then actually what happening to your loading time of images. Let me explain deeply. As you can see in the following image,

When a HTTP request sending to a Domain Name Server ( DNS ) then how much time it taken as getting the result. I am dividing it into 3 parts as you can see in the figure above as yellow, green and blue so duration of  yellow color indicate the time for starting to download and then it will be attempt to connecting the download as green color duration and then the blue color duration indicate the downloading time of your project. So if you use many image hosting site then, your start, connect and first byte time will be execute many times due to different domains which depends upon the no. of outbound domains which you used so you can optimize your uptime or downloading time of your images by using minimum no. of hosting server and also your downloading time or uptime will depend on your image size so I recommend that first you compressed the size of your images and then upload it into web and use only one image hosting server which gives you ultimate up time.

Hosting all images such as for your templates and your used images for your article to Blogger ,are a good idea for ultimate up time for accessing these images, now

Firstly our aim is to find the direct link of our images which we want to use for our Blogger Template images by hosting it into Blogger and then these direct link could be use into blogger template that's it! now proceed the following,

Now by default your post editor will be in compose mode if not then choose compose mode of your blogger post editor as you can see in the above image in 1 no. and click on 2. Insert image and then 3. Choose files and 4. Add Selected.

Now you will see your image on your post editor and it has been hosted on Blogger but this image may not be it's original width and height so we will have to find the original image of the same width and height for our blogger template. So for click on Edit HTML which will be beside of compose mode then you will see the HTML code for your uploaded photo as something look like below,

Basically Blogger used three HTML tags for displaying an image that is div, a and img tags. div tag used for position of images such as center, left and right and a tag used for original image but it will open after click and img tag used for displaying images on your blog but this image will be different from the original image. Can you see any difference from both images which are used in a and img tag. Yes that is s1600 and s320. you can check by copy the links and paste to new window and look what is the difference from both links. Blogger use original image if including s1600 and you can use here s320 or s500 or something but then image width and height automatically decreased.

So the direct link of your image will be the blue text area of the above code which exist in a tag. Make sure s1600 present. If you have any image in which s200 or s320 or something like that so just replace it with s1600 then it will be the original image. You can use this direct link anywhere.

Now don't publish this post while you have to save this post as draft then this image will be always on your blogger. In this draft you can use as many images as much you want. You can give it a name as title " My hosted Images in Blogger" for finding purpose only in the posts as drafts.

*** You can also delete s1600/ from the direct link and in this case you will get also original image but I recommended that use s1600/ in the direct link.

and find the code .png or .jpg or .gif using [ctrl+F] for all images which are in your HTML Blogger Template and one by one copy the link of each image and paste it into new window and save this image to your system (desktop) and then upload it to your Blogger post and find your direct link as we did before, and then replace this direct link with the previous link of your old image. Do this for all images of your Blogger Template. I recommended that in the writing of your post used Blogger hosted images.

After doing that You will definitely see the improvement of your loading time or uptime of your Blogger!