Sunday 16 December 2012

Here Some Awesome Tips To Resize And Edit Images On Blogger & Picasa

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 Re-size 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 I uploaded the image to Blogger and the Blogger Hosted image URL is

http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhkVo83rjTOe0JEGVtaghMtlKT8aw5cCAt0DGUV0D-v1AiyyDaOOzcFH0AZ_wWQDLCWiN-c7JpEpR4npzKY6dZBzR7qy9dOpWUvx8gWf3x5zYeGu3ImxS46dglgnOxscDbU7gEjgmbU4b/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB5opYf7FZYrW0CFQsgqvD1gsRwoIkD8dH1sdHTfX2MhvjUb8BBpeiw6nSOvZpiJrLSaaqOTVcnyu0LH6zt5-QEhJvkOiVkhOsQlsTLxIhKezIg1GG5mZOsqr3QtX2Mo_FuvJzsjqsOE7/s1600/sample-2000x1200.jpg



Here another Sample image which dimensions are 2000px x 1200px

The Blogger Hosted Image is

http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21NltisNeFGdyAnvR6uiwS_mxGBRhiO9OjhCBphVPSjxM9qowdIQ558ofnM8RygOldkjbgcJNPvBEeL8cTPy_gXjarKxCRawgkzKTky_0Tfbb2CZWQfi57nxnVHdhFR7wlBfJPWDO3mx1/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB5opYf7FZYrW0CFQsgqvD1gsRwoIkD8dH1sdHTfX2MhvjUb8BBpeiw6nSOvZpiJrLSaaqOTVcnyu0LH6zt5-QEhJvkOiVkhOsQlsTLxIhKezIg1GG5mZOsqr3QtX2Mo_FuvJzsjqsOE7/s250/sample-2000x1200.jpg

And now the image size is 250px width and height 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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB5opYf7FZYrW0CFQsgqvD1gsRwoIkD8dH1sdHTfX2MhvjUb8BBpeiw6nSOvZpiJrLSaaqOTVcnyu0LH6zt5-QEhJvkOiVkhOsQlsTLxIhKezIg1GG5mZOsqr3QtX2Mo_FuvJzsjqsOE7/s100-c/sample-2000x1200.jpg

Is it Great?

If 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB5opYf7FZYrW0CFQsgqvD1gsRwoIkD8dH1sdHTfX2MhvjUb8BBpeiw6nSOvZpiJrLSaaqOTVcnyu0LH6zt5-QEhJvkOiVkhOsQlsTLxIhKezIg1GG5mZOsqr3QtX2Mo_FuvJzsjqsOE7/s1600/sample-2000x1200.jpg">
    <img src="" alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB5opYf7FZYrW0CFQsgqvD1gsRwoIkD8dH1sdHTfX2MhvjUb8BBpeiw6nSOvZpiJrLSaaqOTVcnyu0LH6zt5-QEhJvkOiVkhOsQlsTLxIhKezIg1GG5mZOsqr3QtX2Mo_FuvJzsjqsOE7/s100-c/sample-2000x1200.jpg"/>
</a>


Here is the Preview:-
image

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...