How to Resize and Crop Blogger Photos Using its URL

When you we upload photos to blogger, its URL usually looks like this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0wApkob3-X729bDI23w_HauiU0oRJ65u2YQOMuL0CwORKUOZ3IKDFZY-FkEYwEmiYHpaL5LBd4-vVgF_eeXAlZ6vjnIhecGORaEhuQ2kILwfq1BHdahbhMOUU4qW8fdddr2L_dV8mLB8/s1600/blogger-re-size-crop-photo.jpg

That s1600 part is where the magic happens. It can be modified to re-size or crop the image to any size or proportion that you want.

In fact, Blogger uses this to present the Small, Medium, Large and X-Large options you see upon clicking a just uploaded photo.

Let’s start with this photo by Benjamin Combs from Unsplash:

Simple Re-size

Using s1600 means the photo will have its original size. Here’s the full resolution version of the above photo.

Change s1600 to s200 and it re-sizes the photo to 200 x 133 pixels. It’s the width that changed to 200 since that is longer than the photo’s height.



If you want to change the height to 200 pixels, change s1600 to h200. You can also use w200 for the width.

Crop to Square

Cropping is also supported by adding -c to the url. For example, changing s1600 to s200-c re-sizes the photo to 200 x 200 pixels.



The longer side (width) is re-sized to 200 pixels while the shorter one is cropped. The right or bottom part of the image gets cut.

Custom Re-size and Crop

It’s also possible to change the aspect ratio or proportion of the photo by specifying the width, height and which side should be cropped.

For example, here’s the photo with s1600 changed to w200-h100-c. The width is re-sized to 200 pixels while the height is cropped to 100 pixels.



Here's a more drastic example using w100-h500-c.

Application

I used these techniques to create custom sized thumbnail images for Pinoy Techno Guide based on the number of comments of each post.

Share how you used these in the comments :)