How to resize And Edit Images On Blogger

Here is a very beautiful trick "How to resize And Edit Images On Blogger".

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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpB6kj2bCyXaOzDcxXl923OUXFkOcWqjmsHSmeldM_4LKf5_DVSOUvEb6AYCTC-pYPynXLT3VuGKNaI7iZ5PrMkiwvHwnYTJfrR7-ZJy_051pQvcdYk26ESKmNfu6VxgT_k4GRiGKl7BrZ/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/AVvXsEgpB6kj2bCyXaOzDcxXl923OUXFkOcWqjmsHSmeldM_4LKf5_DVSOUvEb6AYCTC-pYPynXLT3VuGKNaI7iZ5PrMkiwvHwnYTJfrR7-ZJy_051pQvcdYk26ESKmNfu6VxgT_k4GRiGKl7BrZ/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNw7SfiTTKOhAFM4r6zWjGcVQRpe5lcRqCJXno6h4vjkCK4JIgD1AyTb-sschUHxBS7Y3sfFw2xGiN9jGsQIy-SguAG2nyPJo_yB8HO08gC3MQYJq3sR1BgTXlzv9i-sdMxjFKtjv-1VF/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 Linkand is hosted on my Server.

The Blogger Hosted Image is

http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbfwqguiDQXlcdVMaSF83AxcB3alYvlMIklgxxAmTmH8sVOxt3-AgXwsmR2NpMp2I9RvNEjMuGv4_T3ozohJlkft3PXi373GE0HxzKg3ET6UExBV2Y_4KKG7LKRk_dK_VuD1S5QggZzIp0/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, changes1600 to s250 (leading s is important and use any width you want.)

http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNw7SfiTTKOhAFM4r6zWjGcVQRpe5lcRqCJXno6h4vjkCK4JIgD1AyTb-sschUHxBS7Y3sfFw2xGiN9jGsQIy-SguAG2nyPJo_yB8HO08gC3MQYJq3sR1BgTXlzv9i-sdMxjFKtjv-1VF/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNw7SfiTTKOhAFM4r6zWjGcVQRpe5lcRqCJXno6h4vjkCK4JIgD1AyTb-sschUHxBS7Y3sfFw2xGiN9jGsQIy-SguAG2nyPJo_yB8HO08gC3MQYJq3sR1BgTXlzv9i-sdMxjFKtjv-1VF/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNw7SfiTTKOhAFM4r6zWjGcVQRpe5lcRqCJXno6h4vjkCK4JIgD1AyTb-sschUHxBS7Y3sfFw2xGiN9jGsQIy-SguAG2nyPJo_yB8HO08gC3MQYJq3sR1BgTXlzv9i-sdMxjFKtjv-1VF/s1600/sample-2000x1200.jpg">
    <img src="" alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNw7SfiTTKOhAFM4r6zWjGcVQRpe5lcRqCJXno6h4vjkCK4JIgD1AyTb-sschUHxBS7Y3sfFw2xGiN9jGsQIy-SguAG2nyPJo_yB8HO08gC3MQYJq3sR1BgTXlzv9i-sdMxjFKtjv-1VF/s100-c/sample-2000x1200.jpg"/>
</a>

Here is the Preview:-

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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpB6kj2bCyXaOzDcxXl923OUXFkOcWqjmsHSmeldM_4LKf5_DVSOUvEb6AYCTC-pYPynXLT3VuGKNaI7iZ5PrMkiwvHwnYTJfrR7-ZJy_051pQvcdYk26ESKmNfu6VxgT_k4GRiGKl7BrZ/s1600/sample-2000x2000.jpg

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

http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpB6kj2bCyXaOzDcxXl923OUXFkOcWqjmsHSmeldM_4LKf5_DVSOUvEb6AYCTC-pYPynXLT3VuGKNaI7iZ5PrMkiwvHwnYTJfrR7-ZJy_051pQvcdYk26ESKmNfu6VxgT_k4GRiGKl7BrZ/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNw7SfiTTKOhAFM4r6zWjGcVQRpe5lcRqCJXno6h4vjkCK4JIgD1AyTb-sschUHxBS7Y3sfFw2xGiN9jGsQIy-SguAG2nyPJo_yB8HO08gC3MQYJq3sR1BgTXlzv9i-sdMxjFKtjv-1VF/s420-o/sample-2000x1200.jpg

Here is the Preview:-

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! 

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?