Thursday, April 1, 2010

Resize Images with Blogger | Easy Tutorial

As a webmaster, there are times when you need to resize a copy of your site's logo to a specific size so it can be included in blog directories, feeds, and links on other websites and blogs for better search engine optimization (SEO).  This tutorial will show you how to resize images.

Screenshot of Enspyre 1 American Pop Culture Blog
Screenshot of Enspyre 1 American Pop Culture Blog
Working with images and photo editing is a lot of fun.  You can try out all sorts of things with pictures.  I needed to resize a blog logo for Feedburner to a much smaller size.  I was certain of a few things, but not so sure about others.  It would be trial-and-error from this point on, that's for sure.

I knew I could do it with fancy photo editing software programs.  I also knew I could accomplish this with websites like Photobucket and costly image editing software.

What I wasn't so sure about though, was whether or not I could accomplish my goal of creating a smaller, linkable image by using Blogger, which is owned by Google .  I started out by taking a friend's Blogspot blog logo.  It was a jpeg image and it was originally 718x181 pixels and 51.93 KB (53,172 bytes) in size.  I needed to get it down to exactly 468x60 pixels exactly, no more and no less.

Herein lies my dilemma!  We can solve the problem quite simply with this simple Blogger tip and trick.

Here's what I did, step-by-step:
  1. I went to the blog's homepage.
  2. Then I right-clicked on the blog logo.
  3. I clicked on "View Image Info."
  4. The "Page Info." opened and I was able to view lots of information about the photograph, as you can see above in the screenshot.
  5. Using my mouse, I copied the image location.
  6. Next, I started my post in Blogger, clicked on the image icon at the top, next to where it says, "Link."
  7. The "Add Image" screen appeared, providing me the options of how I wanted to add the image.  I clicked "From a URL" and pasted the image location link from step 5 into the blank field.
  8. Then I clicked "Add Selected" and my image appeared in my post.  Viola!  Of course the image was way too large, so now the real work begins to resize it to 468x60 pixels from a whopping 718x181 pixels.
  9. Almost finished, I clicked "Edit HTML" at the top of the post editing toolbar in Blogger to edit the code and resize my image precisely to 468x60 pixels by adding the following:   width="468" height="60" to the image tag.
  10. Lastly, I clicked "Publish Post."
Here's my resized image:

Enspyre 1 American Pop Culture Blog

Please comment and let me know how this works out for you.  Try it out for size.  It won't hurt and it's lots of fun working with images!
    Thanks for visiting Google Image Blog. Please subscribe and visit often for more images.


    Leave comments on Google Image Blog and we will give you quality backlinks to your website or blog, improving your search engine optimization (SEO), traffic, and Google page rank.