March 18, 2009
In this article we will talk about upload of pictures (images) in your Blogger Blog. I'll try to point out some advantages and disadvantages, and share some general advices about using a free picture hosting services (Photobucket, Imageshack...) instead of using only the default Blogger image upload (Picasa).
There are two different "ways" of using pictures in Blogger:
1. pictures uploaded in Blogger Post (or gadget/widget)
2. picture used in Blogger HTML layout (for Blog design purposes)
PICTURES IN POSTS
Uploaded pictures HAVE to be stored (hosted) somewhere. When you upload a pic from your computer into Blogger Post, it will automatically be stored in your default Picasa account that comes in a package with your Blogger account....
► in Blogger, you'll click on Upload Image button, Browse for the pic on your comp (machine), and Upload it...
But if you take a better look, you'll notice the other option in Upload pop-up window:
Add an image from the web gives you the option to upload a picture hosted somewhere else on the web (using direct link), be it from your existing Album (Photobucket, Imageshack....), or the one you will create."Why do I have two options anyway?"
Picture storage - in default Picasa (pics uploaded from your computer), you have a storage limit of 1GB. If you exceed this, picture's will be broken. Your options are:
- upgrade Picasa account (you'll have to pay)
- combine with uploading pictures from a free picture hosting services
Picture size - if you upload the pics from your computer, not only they are stored in Picasa by default, but they are also automatically re-sized and compressed. Blogger has 3 options:- small (width is 200px)
- medium (width is 320px)
- large (width is 400px)
They will show up in their full size when clicked on, but in the post, you can only choose from these 3 options.
Uploading images hosted on a free picture hosting services, you will have better manipulation of the picture appearance in the Blogger post, without automatic re-size or compression.
WHERE TO HOST YOUR PICTURES?
Well, probably you already have an account somewhere, but the important thing here is to get the Direct Link to our hosted pic. When we've done that, we can use this Link either:
► in Blogger Post (gadgets/widgets)
► or in HTML of the Blog template (custom design tweaking)
I'll make a list of my personal favorites when it comes to Free picture hosting. So, in this order:
Tinypic.com, owned and operated by Photobucket.com, is a fast, simple, reliable and free video and image hosting site. Personally, I love it because of it's short URL address, and unlimited bandwidth. Other features:► the image size limit is 1600 pixels (either width or height)
► images and videos on your account will not be removed
► unlimited storage, hosting period and bandwidth!
Create an account, and start uploading. Just be careful to copy the Direct Link, and use it in your Blogger Blog Post, or HTML. Here's a few screen shots:
ImageShack.us is an intuitive and easy-to-use free media hosting service. It can be used to upload images, flash files, and videos. It's free, but you also have the upgrade option. Features:► each image you upload must be less than 5 MB in size
► your files will be available forever (if you have an account)
► unlimited storage
► unlimited bandwidth for videos and slideshows, and allows each hotlinked image 300 megabytes of transfer per hour
Create an account (1 minute), upload pics, and get the Direct Link for your Blog. Here's how it looks like:
Photobucket.com is a famous media-sharing and hosting site where you can upload and store your images and videos. You can choose to have either a Free or Pro (paid) Photobucket account. By default, a new account is Free. Features:► free accounts users limited to 1MB file size and max. resolution of 1024 x 768px
► up to 1 GB of space for images and video clips
► free accounts are allowed 25 GB of bandwidth per month
Create an account, and enjoy all the additional features Photobucket is offering...In order to get the picture link for your Blog, check this screen shots:
Click here for Upload instructions (official help)
..and make sure to get the Direct link of the files you're use in Blogger:
There are also many other fine services around, and it's only up to you which one you will use...These services offer much more than just image upload, but that's another story...
Smile!
52 comments:
This is one of the things I've been wondering about for quite a while! Uploading pictures into photobucket, etc, is MUCH faster than uploading directly into Blogger. But then there's the added step of needing to go to the picture you want to use and copy the link.
That's one reason that I liked Photobucket over the more common Flickr (I hadn't heard of the other two sites you mentioned) because Photobucket kept the image name intact, so if I was doing a lot of photos, I could insert one picture, then copy and paste the link, changing just the last part of the name.
What about Windows Live Writer? Have you used that? Makes writing posts and inserting pictures even easier and faster, plus I can easily add a watermark, image border (like drop shadow) and more. I've only been using it for a few weeks, so far like it a LOT (has substantially cut down on the time it takes me to create a post!) but am curious what the downfalls/disadvantages of it are. (Other than it's only for Windows, not Mac.)
Anyway, just found your site last night and have already learned so much. Thank you thank you for putting all this content out here, for anyone who wants and needs it!
Karin,
..you are very supportive. Thanks...
About Windows Live writer. No. I don't have much experience with it, but it's obvious that it's much more advanced than Blogger interface. And personally, I think these changes are not so hard to make. Upload picture function in Blogger is very clumsy...From picture sizing, to picture placement.
Anyway, I'm not such long time with Blogger, but the fact is that things are changing. To better. Crumb by crumb....
:]
Pocket,
I used PhotoBucket in the beginning. And, then, for one reason or the other, the links failed and my blog didn't show a slideshow or background.
I decided to try Picasa. A little more detailed (and confusing) than PhotoBucket when formatting the URL link into HTML. Eventually, it worked. So far, so good.
Now, we do know the backdoor boys at Google owns Picasa, don't we? Maybe, just maybe, they ain't in the mood for a Blogger to link to another photo hosting site?
I may be pissing in the wind, but ...
Meanwhile, I do like to keep things simple and down-and-dirty in blog design and writing. My brain cells are slow in the morning with a touch of St-Remi brandy in my coffee:)
I'm been trying to find a way to configure a link for a reader to download a particular post which has been formatted as a PDF file.
I would like this PDF link placed at the bottom of the post article. Any suggestions in this area?
Koo-koo Stu!
About pissing in the wind. Well, I wouldn't agree. I can assure you that Blogger is quite friendly when it comes to linking files from other hosting sites...They do benefit from this: we don't waste their bandwidth, but somebody's else...
About failed links from Photobucket. Hm. You sure you haven't 'moved' them around in your albums? Or maybe exceed bandwidth?
About PDF file. The simplest thing would be:
► upload the file to a free file host (like www.mediafire.com, or any other...)
► get the direct link to your hosted .pdf
► link it from your Blog
You can even create a small PDF icon beside the Link. Just place this part of code beside the link in your Blog (in EDIT HTML mode, rather than COMPOSE):
<img src="URL OF THE HOSTED PDF PIC"/>
..replace the CAPS with your hosted PDF picture Direct link...
..I will also do a tut on this, if you can wait..
:]
Hi there! Thank you so much for all the wonderful information that you have here. This is exactly the help I've needed!
I'm currently using Photobucket for my photos and I posted a slideshow the other day by directly sharing it from Photobucket to Blogger. When I edit that post (add some text above or below the slideshow) and preview my blog the slideshow does not work. It continues to act like it is uploading the photos. Even if I just make a change to the title of the post with the slideshow it won't upload after saving the change. Is there something I am doing wrong or an easier way to upload the slideshow into a post where I can add text? I appreciate your help! :)
Tatum,
honestly, I don't have much experience with slideshows. But Blogger can be quite buggy. Try adding a slideshow when you're finished with post composing. Also, make sure you're not moving/editing the original pics (in Photobucket).
There's also the possibility you've 'break' the code of the slideshow script, while editing the post (check the HTML mode)...
That's for starters...
I'll try to figure this out...
:|
Thanks for the info pocket!!
Entering slideshows into my posts is the next task I need to master. I will return to follow the progress of this post :-D
As a footnote I have found
http://www.slide.com/ quite useful for photograhic slideshows...its the best I have found so far. :-)
Jeff,
..it really does look awesome! Thanks.
:]
I uploaded pics to my blog on Blogger which showed up in a Picasa account. Then I uploaded some other pics direct to that account via Picasa's "browse & upload" feature... BUT, I cannot determine the direct URL to those pics. If I could ascertain their direct URL, I could just add a link in the html on my blog. But how, within Picasa, can I discover the URL? I've tried everything in the account and nothing seems to show the direct URL of each image. Help!
Photobucket is good but I really dont understand their policy! They just banned the social bookmarking icons :O!! Pocket as you have experience can you please tell me what was wrong with this digg icon http://i44.tinypic.com/2r4o95i.jpg which photobucket banned! Now I have moved them to tinypic! I am really worried as 90% of the template photos are from photobucket and if they are going to ban photos like this without such reason then with all those 20-30 picture I will be left in a desert :((
Swashata,
..that's the weirdest thing I've ever heard. I really don't know what to tell you...
:|
thankzzzzz..its very helpfullllllll!!
Hi there! You're site seems really helpful, but I'm hoping you can help me with something that hasn't been addressed yet.
I am trying to post several pictures within a blog and have the text wrap around them and when not around, just to the side of the picture. I have chosen "left" and proceed to type the text---I utilize many breaks to get the text just where I want it, and just when everything looks perfect, when I post it all ends up a garbaled mess. Not every picture and text is all out of whack, but at least 2 or 3 go haywire and then the rest of the post looks terrible as well because the text is then all over the place and doesn't line up with anything. I screen capped an example:
http://i183.photobucket.com/albums/x230/cmg8784/messeduplayout.jpg
I started trying to do my posts in windows Live writer thinking that it would solve the problem, but no, same thing.
Do you know why this is happening and how I can fix it? I'm about to pull out my hair! Any suggestions would be GREATLY appreciated.
Thanks!
You may want to you Microsoft Windows Live Writer to publish blog entry (including photos and videos). The advantage of Windows Live Writer is that we are able to format the text in a diversified way, attach images (a little bit surprise that the Windows Live Writer enables you to add some effects to your images).
+ Another way is Picasa, that would be good but it provides just a nutshell of text-formatting tools.
+ You may want to use "Email posting" of Blogger service (set it in setting). It supports "blog on the go". It's advisable that you use a Google Mail account + a Mail client (I am currently using Microsoft Outlook 2007, Thunderbird is good, too).
I'm not sure if the above reply is to me, but I have tried to publish via Live Writer and it comes out the same as if I were posting it directly from blogger. I still can't seem to fix all of the alignment issues---any other advice?
I am looking the way how to have larger photos then 400px in blogger post.
tinypic show as very good in my blogs till now. Great blog you have.Bookmarked
Hey Pocket,
I'm fine with getting pictures and uploading them onto blogger but how do i move them around on my blog page?
Hiya Pocket
Just wondering, how do you get comment links at the side of the post? I just saw it for the first time today and I was wondering if you know how. Also, what template is in use here or is it a custom template?
Many thanks :)
The blog link is here:
http://croakish.blogspot.com/
And here's a screenshot in case the layout changes:
http://i43.tinypic.com/2i07ryo.jpg
hey..
you seem to know very well abot uploading pictures in Blog...Help Me...i have a foodie blog..and i would like to show all my recipe pictures either left or right side of the page with link to the recipe.How will i do that..Help me!!!!!
ITemplatez.com offers professional web templates, flash templates ,swish templates, dreamweaver templates, and other web design productsavailable for immediate download.
Hi
i looking for a imagen of rounders corners likes as you blog for the main wraper. can you recomend me any pace for get it...
Tnak you, thank you!!!
hi! i like the designs. check out the source of the template.
Thank you! i love it.
More templates easy to download
But if you like a picture from the web it's OK to Copy Image Location and put in your post. Sure you have to put the Source of that picture!
Question for you...
I just started using Windows Live writer and love it, but it won't send to Blogger (as a draft OR to publish) if I have photos in my post. Do you know if there's a fix for this? I do have Vista...the bane of my existence...
Thanks for your help! Great post, btw!
I m Using imageshack and that's good site for uploading images ..!
@ Mandy:
Hey Mandy I had the same problem, apparently there is just some minor things going on. This worked for me although "drop shadow" and any fade effect still isn't working:
http://social.microsoft.com/Forums/en-US/writergeneral/thread/830692dc-b37e-44e2-9b5c-13229c76657c
I hope that helps!
Hi i hope you can help me. When i post pictures up i usually like to have my pictures posted from the beginning of my trips to the end but when I upload them i always have to Upload pictures from the end of the trip to the beginning so it will be in order when people look at them. is there a way i can do it the other way?
Flying AZN,
I don't know a better way....Sorry. I know you can use 3rd party WYSIWYG editors...
The best advice would be to upload the pics in opposite order. Upload the last picture first...
Smile!
Hi, i found this article very useful for a blog starter like me. But i'm a bit puzzled by this tiny pic upload thing. Because i pasted the direct link from tiny pic onto my blog (i uploaded a .GIF image) and it works fine in my computer. But the image failed to appear on some of my friends'computers. It only showed the Tiny Pic Logo. What did i do wrong? thanks
I created a blog for help new bloggers (and present).So also visit my blog encourage with your comments!
ibloglab.blogspot.com
Great advice. I am busy trying to lay out a new blog, so fingers crossed.
Thanks.
Lovechld,
make sure you haven't moved the pic from the Tinypic Album.
Try uploading the pic again, and update the Link in Blogger...
Smile!
ugh.............how do you get a pic on there i have tryed i wanted to uplode one please help :(
your site is very 'contentful'. I have learnt alot here! Pls how do i make money with my pictures?
thanks again, Pocket! very useful place indeed. keep it going:)!
how to remove border from the pictures ? i hate to see there is a line surrounding the pictures. i hope you understand what am i trying to say :)
sera,
in your LAYOUT ► EDIT HTML ► locate this part:
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
..and replace 1px with 0px
Smile!
Brilliant advice! Thanks for that
This is how I implement graphics onto my blog. Just giving Kudos on information :*P
i'm using picasa..but how to put image name or something to write down under the image..plz help me
thanks for your post. It was very helpful.
Hi Pocket,
Help! Previously I've adapted your beautiful template for use in my blog shop. However, when i try adding a picture under "Design" Tab -> "Page Elements" -> "Add a gadget", the picture (rather big) covers up my first blog post. Could you advise how I can change the template to make my first post visible? Thank you!
I like your blog !!Thank you. They are really great .
do not miss my goods , they are very beautiful !!
Fashion watches
Discount watches
Antique pocket watches
Engraved pocket watches
Awesome!! I've been wondering why my pictures can't be resize, a bigger resize. Your post is answer it all!
Thank you so muchhh!! Love you, Pocket!^^
thanks a million man! never tought about the picasa stuff. cool!
Do you like MBT shoes online MBT chapa buy it MBT chapa shoes with MBT lami free MBT lami shoes shipping MBT kaya over MBT kaya shoes us,we MBT M.Walk sell MBT m walk shoes on line mbt men shoes for mbt women shoes and vibram five fingers sale vibram five fingers sale is our discount vibram five fingers best cheap vibram five fingers choice cheap MBT chapa shoes thank cheap MBT lami to cheap MBT lami shoes see cheap MBT kaya it cheap MBT kaya shoes you can cheap MBT M.Walk go cheap MBT m walk shoes by cheap mbt men shoes click cheap mbt women shoes
That's awesome , Thanks very much .
thanks man! :)
My blog:
www.tricksterminal.com
Thank you so much! All of your tutorials have been very helpful, but this one was the one I really needed. Thanks! :)
Fabulous review of the image hosting sites. I have a question that I have yet to figure out or find the answer to: I have my site images in photobucket. The content pics are on blogger for now. I have recently been re-working the image of my blog and want to replace the photobucket held image that is my "button to share" without breaking the link on any other blogs that it sits on. Does this make sense? In other words, I don't want people to click on the old button on another blogs site and not haveit redirect to my blog because the photobucket image is gone. And I would like to make it so that people who already have iton their site to NOT have to go through the work of replacing the image.
Any Suggestions?
Allie
AllieMakes.blogspot.com
Say it...