Awesome Tips To Resize And Edit Images On Blogger & Picasa

October 2, 2012   /   Posted by in Blogger Tips, Blogger Tricks 34 Comments
Awesome Tips To Resize And Edit Images On Blogger & Picasa

I already wrote a tutorial on Hosting Images Freely on Blogger with unlimited bandwidth. If you are using Blogger then all images you upload on your blog will be storeed in Picasa. Picasa is a Free Google Service. What does this mean ? when you create a blog, Picasa automatically create an Album for your blog.This album will have the same name as your blog. And all your hosted images are served with Google CDN.

Well, You have uploaded an Image to your Blog, Now you want to Resize it Down (Scale it Down). What should you do? You could :

  • Edit the Local Image in an Image Editor
  • Resize the Image and Save in your Computer
  • Upload again to Blogger

But You are doing a lenthy process and you will have to upload the image to your blog again.

You could use the inbuilt Image Resizing feature in Blogger (Picasa) ?.

In this article you will learn utilizing the In-built Image Resizing Feature with some Additional tips.

Here, I have a sample Image with the dimensions 2000px x 2000px Here is the Direct link which is hosted on my Server.

Here I uploaded the image to Blogger and the Blogger Hosted image URL is

http://3.bp.blogspot.com/-z6tcpujc084/UGiN4JhMg_I/AAAAAAAABl0/qpn09SGfF0g/s1600/sample-2000x2000.jpg

In the this url, observe the path before file name. which is Image size s1600 and it is the default blogger dimension.

What does this means, the image dimensions is 1600 on largest side.

What if the Image Widths and Heights are various ?

The first sample image is 2000 pxiels wide on both sides. If i uploaded the image to blogger which is resized to 1600 pixels on both sides. Check the Below Image.

http://3.bp.blogspot.com/-z6tcpujc084/UGiN4JhMg_I/AAAAAAAABl0/qpn09SGfF0g/s1600/sample-2000x2000.jpg

Here another Sample image which dimensions are 2000px x 1200px Here is the Direct Link and is hosted on my Server.

The Blogger Hosted Image is

http://1.bp.blogspot.com/-JiPk2mOJm6E/UGiN2_s3udI/AAAAAAAABls/ohXq3drcikQ/s1600/sample-2000x1200.jpg

the above image width is 1600 and height is adjusted to corresponding to Original Image size ratio.

Another Example of Sample image which dimensions are 1200px x 2000px Here is the Direct Link and is hosted on my Server.

The Blogger Hosted Image is

http://2.bp.blogspot.com/-8yn11ez_82Y/UGiN1IV3ENI/AAAAAAAABlk/Hnw_iYR6s5A/s1600/sample-1200x2000.jpg

the above image height is 1600 and width is adjusted to corresponding to Original Image size ratio.

How to Resize my own Images?

Upload the image to Blogger and get the Direct image link. If you want 250px width image, change s1600 to s250 (leading s is important and use any width you want.)

http://1.bp.blogspot.com/-JiPk2mOJm6E/UGiN2_s3udI/AAAAAAAABls/ohXq3drcikQ/s250/sample-2000x1200.jpg

And now the image size is 250px width and hight is corresponding ratio to original image.

What about Image Cropping ?

Picasa is also offering Image Cropping. which means, if you give a definitive image size, it will automatically cut the extra image on either sides and produce a perfect square image.

How to Crop image?

After changing the Image size just add the -c at end of image size. s200-c like so. take a look at image preview.

http://1.bp.blogspot.com/-JiPk2mOJm6E/UGiN2_s3udI/AAAAAAAABls/ohXq3drcikQ/s100-c/sample-2000x1200.jpg

Is it Great? Where should i use this?

I use this tricks all the time.

For example the image is very large. if you want to place the image in your post. but your site loads very slow.
so use the crop trick. take a crop image and place in your post and link the image to Original Image.

<a href="http://1.bp.blogspot.com/-JiPk2mOJm6E/UGiN2_s3udI/AAAAAAAABls/ohXq3drcikQ/s1600/sample-2000x1200.jpg">
    <img src="" alt="http://1.bp.blogspot.com/-JiPk2mOJm6E/UGiN2_s3udI/AAAAAAAABls/ohXq3drcikQ/s100-c/sample-2000x1200.jpg"/>
</a>

Here is the Preview:-

image

Another Example: i use this trick to show my template page layout preview. check it here.

Additional Tips

Tip 1

If you paste the Normal image link in your browser, it will show the image.

http://3.bp.blogspot.com/-z6tcpujc084/UGiN4JhMg_I/AAAAAAAABl0/qpn09SGfF0g/s1600/sample-2000x2000.jpg

But add the -d at end of image size. s1600-d like so, what will happens? (Click Here!!!!)

http://3.bp.blogspot.com/-z6tcpujc084/UGiN4JhMg_I/AAAAAAAABl0/qpn09SGfF0g/s1600-d/sample-2000x2000.jpg

Instad of showing Image on browser, It show’s a download prompt box to download the image. which is cool to image galleries site, and you can give the downloadable image link to your visitors. :)

Tip 2

Here i found another picasa tip. Which is Video Embed Symbol. which add’s a Video Play Button Symbol to the image.
To get this, simple add the -o at end of image size. s420-o like so.

http://1.bp.blogspot.com/-JiPk2mOJm6E/UGiN2_s3udI/AAAAAAAABls/ohXq3drcikQ/s420-o/sample-2000x1200.jpg

Here is the Preview:-

image

These are very useful tips and save lot of time on image resizing. i use them all the time when ever i need. Hope you enjoyed this tips. and PLEASE SHARE! Thanks! :D

Final Example : I used the resizing tip on below Do you like this article? box. The Flag social icons actual dimensions are 128 x 128 px in size.
but, i need 48 x 48 px size. see how i use the trick? ;)

A Big thanks to Paul Crowe from SpiceUpYourBlog for his Help and Kind of support

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

34 Comments on “Awesome Tips To Resize And Edit Images On Blogger & PicasaAdd Comment

  1. avatar

    Janmejaya October 2, 2012 7:28 pm #

    Great post bro. The blogger is the best place to hosting unlimited images. Thanks for the resizing tips. This is helping me much more to manually resizing my images.

  2. avatar

    MUXLIMO October 2, 2012 9:05 pm #

    Whoaa!! this is helpfull for meh! Shukriya!

  3. avatar

    Niyas October 2, 2012 11:58 pm #

    Woow Nice Tip

    Thanks Bro

  4. avatar

    Jason Santoro October 3, 2012 1:11 am #

    These tricks are good but we need a way to style the images on blogger. The images on Blogger just go up and down. You can’t put them side to side or anything. We need a styling tool for the images.

  5. avatar

    Tien Nguyen October 3, 2012 9:27 am #

    Whoa! Now I know about -d and -o option. Love your post. Thank you so much.

  6. avatar

    Jasmine October 3, 2012 11:45 am #

    wow! very nice and useful post.
    thanks
    http://premium-area.blogspot.com

  7. avatar

    Hammad Baig October 5, 2012 1:20 pm #

    OMG Harish Really Great post bro. The blogger is the best place to hosting unlimited images. Thanks for the resizing tips. This is helping me much more to manually resizing my images.

  8. avatar

    Abu Shaleh October 5, 2012 3:32 pm #

    Really a great trick for Blogger.com Users. This image resizing trick very usefull.

  9. avatar

    soumen October 8, 2012 9:35 pm #

    I am regular reader of your blog. you have introduced in this post is once again excellent review.
    thanks..

  10. avatar

    Jude C October 10, 2012 2:27 pm #

    Excellent article Harish. I never know that it is possible to resize and crop in this way. Thanks for this useful tip.

  11. avatar

    Ronny Dee October 16, 2012 7:33 pm #

    I want to try in my blog, thanks for sharing

  12. avatar

    Pawan October 20, 2012 6:41 pm #

    Nice post thanks for sharing this.

  13. avatar

    Akhil Abraham October 20, 2012 11:47 pm #

    that’s really a good one…i am searching for these kind of tips and i am also trying this in my blog…

    At last thanks for a great post..

  14. avatar

    NOUSHAD VADAKKEL October 28, 2012 8:37 am #

    very interesting for bloggers who managing a nice image with their blog posts …thanks @harish :)

  15. avatar

    Vinay October 30, 2012 7:10 pm #

    Bro, may i know the font you used in the image that is for “Blogger and Picasa” .Nice tips Thank You

  16. avatar

    Ansh November 5, 2012 12:08 am #

    thanks……… nice sharing I never know that think

  17. avatar

    Sheldon Cooper November 9, 2012 4:17 pm #

    The play button overlay “-o” is not working !!!

    • avatar

      Harish November 9, 2012 10:41 pm #

      yea! ;)
      They removed !

  18. avatar

    Mark November 9, 2012 6:40 pm #

    Great post! .. learn something new every day, I’m off to give it a go!

  19. avatar

    mAYUR sOJITRA November 10, 2012 1:05 pm #

    Picasa is bst for image hosting this feature of picasa web album is aswsome…
    all bloggers have must like it
    http://theandroid-mania.blogspot.in
    http://cutehearthacker.blogspot.in

  20. avatar

    rahul sethi November 18, 2012 1:26 am #

    thank you for this new information……

  21. avatar

    John Will November 18, 2012 10:44 pm #

    Hi Friend!
    It’s a Great post. The blogger is the best place to hosting unlimited images. Thanks for the resizing tips.

  22. avatar

    rahul sethi November 21, 2012 12:18 am #

    okay …thanks…There is One Question…..
    Actually I have a blog on blogger, Simple and Well n Good…
    but the problem is that when I tried to add a big HD Image (infographic ) by Blogger upload option it reduces its pixels and when I host that Image at other web blog like word-press and then add… the Google Page limit reduces to about 6-10 points (below 80)…

    Is there any Solution…..?

    • avatar

      Harish December 5, 2012 11:24 pm #

      yes, it is limit on blogger. we can show maximum 1600 in height or width.
      you should use an alternative image host like Imgur

  23. avatar

    Sooraj Bagal November 23, 2012 10:07 pm #

    How to watermark multiple images at a single time in picasaweb ?

    • avatar

      Harish December 5, 2012 10:52 pm #

      not supports.

  24. avatar

    Yogiraj mishra November 23, 2012 11:54 pm #

    Really great and useful post!

  25. avatar

    Kishore kumar November 30, 2012 3:26 pm #

    Nice and useful post

  26. avatar

    HardyTwardy December 5, 2012 7:47 pm #

    Now i dont need gimp to resize my pictires :-0

  27. avatar

    MyTrickWays December 8, 2012 10:12 pm #

    thanks for sharing this tips..

  28. avatar

    sid December 10, 2012 10:32 am #

    AWesome post !!! i gonna try this on my blog

  29. avatar

    umesh tarsariya December 22, 2012 9:38 am #

    hhm…. great post

    A great source of information

  30. avatar

    sri December 26, 2012 5:22 pm #

    thanks for writing wonderful article and its very informative,i will try this for my blog in future.

  1. Pingback: Editing Images in Picasa and Blogger

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress