Sunday, August 16, 2009
Note: This tutorial works great, but check out my new easier tutorial here!
So you want to display large images on your Blogger blog. You make your image 1000px wide, load it up on your post selecting "Image Size, Large", and suddenly your large image looks small on your post. What happened? Why is Blogger shrinking your image? If you click on your image within you post it opens a new page with the full-sized version, but why is it not showing up full-sized in your post?
Probably most of you know the trick of uploading your web-sized images to Flickr or Photobucket, grabbing the http code and pasting it into the HTML part of your post and using
But if you want to have your image centered or to the left or right you have to enter new code and it is a PITA. Not to mention you have to upload to another site and grab the URL, transfer it over to Blogger, etc. Yep, it is a hassle. But there is an alternative.
So what happens to your images when you upload them to Blogger? I wondered this myself and did a google search and found that they all go on a your own Picasa Web Album. So when you make a Google account to start your Blogger blog, you automatically upload all of your images to your Picasa album (that you did not realize you had!). I would suggest logging in on the Picasa site (use your Google account) and take a look at your images. I found many extra images that I could delete.
So you upload a 1000px wide image and suddenly Blogger shrinks it. Well, you can easily get around that with a bit of tweaking. I love having my images on Blogger because Photobucket limits bandwidth (so my images disappear mid-month because too many people have looked at my CoffeeShop blog) and I hate having a million blog images on my Flickr account. Blogger limits your total uploads to a gig (you can buy additional space for a small fee if you want), but if you only upload images that are web-sized that is plenty of space for years of blogging. And they do not limit your bandwidth which is amazing for a free photo-hosting site.
Look at the two images below. I uploaded a 1000px wide image to Blogger using the standard post way (first image) and you can see it is pretty tiny (only 400px). So I used a little trick to get a larger version up there (see the second image, 600px). You can read the tutorial below. I actually ended making my image 600px (1000px is too large for my 3 column blog), but you can easily make it any size, as long as you don't go bigger than 1000px, that affects the resolution.
Original 1000px wide image uploaded to Blogger the normal way.
With a bit of tweaking, you can have your Blogger uploaded images as large as you want! In this case, I made my 1000px wide image 600px wide to fit my blog.
1. Upload image as normal to your blogger post. If you do it on with the Edit Html tab selected, you won't have to worry about weird extra spaces.
2. Right Click on the image in the Compose mode, and then select "Open Link in a New Tab".
3. Go to this new tab and right click on the image and then select "Properties". Copy the entire image URL (sometimes part of it is hidden, make sure what you copies ends with .jpg). Then press Cancel or OK.
4. Now go to your Edit Html mode and paste this URL over the old one there (it will be the second http, the first one is the link), remove the entire "HEIGHT: xxxpx;" part of the code, and type in your new Width. In this case I uploaded a 1000px wide image, so I can put in anything, as long as it is smaller than 1000px (or the resolution will look bad). My CoffeeShop blog only has room for a 600px wide image, so I change it to that number. Now you are done!
So now you know how to display your wonderful large images on your blog! It is a bit of a workaround, but still a nifty trick you should know. And some people have commented that you can skip these steps and just change the sizes in the Html part of your post, but that only works if you want to go smaller than the size Blogger posted. If you make the width larger without changing the photo URL, then your resolution will really suffer!
I am almost finished with my first set of Blog Storyboard actions! Keep an eye on my blog, I have much headed your way. And other then some residual bronchitis, our family is almost well, 2.5 weeks later...