How To Outsmart Blogger’s Image Handling

Don’t you just hate the way Blogger adds every new image to the top of your post? You have to move each photo to where you want it displayed. What’s WYSIWYG about that? And no matter which image size you select, ‘small, medium, or large’, it always seems to be the wrong choice! Also what’s up that the funny image names and complex html code about ‘on blur… etc?’ Seems Blogger’s younger sister “Blogger-in-Draft”(aka Wonder Woman) will come to the rescue with some smarter image handling features. In the meantime, this post shows you how to play the game and stay sane!


Know Blogger’s Game

As with any game, you need to know the rules to be successful. In the case of adding images, knowing how Blogger thinks and profiling its Picasa teammate will mean less stress and more successful image posting. Here’s what you need to know:

1- Blogger thinks you want a thumbnail image in the post, not the actual image. They expect visitors to click thumbnails for the original photo you uploaded. This is not necessarily a bad thing if you have no control over the original image size. A thumbnail may be just right. However, if you go to the trouble of photo-shopping the image to the exact size and sharpness you want — Surprise! And sometimes you don’t want a click which only opens up the same view in a new window.

2 – Picasa is Blogger’s wide receiver for photos you add from your computer. Blogger snatches the image and kicks it to Picasa’s Web Albums where a copy is created (Learn more). You’d think you own the album and can use Picasa to add more images for future posts — Wrong. Only images in draft or published posts get to this free web storage. Furthermore, the images are in a Blogger’s witness protection program. All names have been changed to something like this: http://1.bp.blogspot.com/_wHNYjYDRAn0/SJ8VCbKmJLI/AAAAAAAAAR4/ PvQizsoaJBc/s200/imagehandlingpost.jpg Images uploaded from the web” are not copied to the Picasa album.

3- In resizing every image before plopping it into your post, Blogger lets you select one of three sizes. These options translate into 3 static widths for Blogger:
200, 320 and 400 pixels.

If the actual image “from your computer” is less than 200, then all 3 sizes show the same image — e.g. this image is 116 x 98 in all 3 sizes. If your image is larger than 200, say 280, then the small thumbnail is 200 x 57, while medium and large show the original size. At least it knows 300 x … will be out of focus for this method!

On the other hand, if the small image is uploaded “from the web,” then it has 3 completely different and out of focus versions! Select ‘small’ and you get this 200 x168 image:
Apparently, the programs for the two upload methods don’t talk to each other! But clicking your unfocused thumbnail shows the correct original in the ‘enlargement’ !!!

Go ahead click and see what I mean.
I dare you! ===>

Play To Your Advantage

So how does this information help us play the game? These should be your rules:

* know the size of your photo before pressing the add image icon. View the image on your pc or online storage and look at the properties:

If you upload the image from your computer, then select a S, M, L size that is greater than the image and you’ll be okay. Remember, Blogger uses 200 for small, 320 and 400. So if your image is 350, select ‘large’. The 400 will default to your actual size of 350 which is less in width. Blogger does seek to protect the innocents who can only keep images on their PCs!

If the image is stored at your online host, then it doesn’t matter what size you select — they’re all wrong so pick your poison. After you get the weirdly focused image at the top of your post, view “Edit Html”. Find …” width: 200px;“and change the value to 116 ! (in our example of wonder woman image)

* The fact that each new image goes to the top of the post makes it easier to do the adjustment above. Suppose you loaded the image as left justified and want to change it to the right. Then using Edit Html, find the float tag and change the value: “img style=”FLOAT: right…”

* When the thumbnail displays correctly then highlight the image, cut and paste it into the correct spot in your post. Read more about how to add images to your Blogger post.

Young Blogger To The Rescue

One of the major improvement in the beta/draft version of Blogger involves new post editing features, including image handling. Read the details here. You can actually try out the draft version using the dashboard at http://draft.blogger.com/. These are welcomed and smart enhancements:

* You can upload multiple images and go back to your post. From the post you can insert a selected image at the cursor!!!! Just remember the thumbnails go away if you don’t put them in the post before you close it.

* The generated html no longer has the ‘on blur’ , which refers to the action taken when the thumbnail does not have focus. When the cursor is on the thumbnail you see the hand icon denoting ‘clickable’. When you move to another spot, the regular cursor appears.

* Resizing is smarter also. The default size is ‘medium’ and you can change it by clicking the thumbnail directly in the post. And there is an “original size” selection which works to give you the perfect focus for images on your web storage. You can still go to the html to adjust the width and height as needed!

Summary

If you are a business owner with a blog that links to your corporate website, you know the importance of images. This is especially true for product photos that link to your online shopping cart. With a blog, you become more personally involved with the content — this is how you and your customers get to know each other. So go out there and show Blogger your moves for handling images.

You may also be interested in these posts.
Fearful of what blog is behind door #1 on Blogger?
Choose Your Template Wisely

Color in Blog Design
*Related posts: BloggerUniversity – “Post larger images”


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


2 Trackbacks / Pingbacks

  1. How to Make the most of Blogger’s New Editor « BPWebNews
  2. Adding Custom Social Bookmarks to Blogger « BPWebNews

Comments are closed.