Resize and crop Blogger photos using an URL hack

Google's own Blogger platform may not be one of its most cherished products, nor the most advanced blogging platform out there, but it does the trick and you can tune it up to make sure your blog is as efficient as it can be. Today I bring you a "cheat sheet" to put your blogger (and Google+) images under your control.

Check most web pages sizes, and you'll see that the biggest culprit of their sizes are images. People still use absurdly huge images even if they're showing it in a thumbnail size. But the thing is, using a simple URL hack, you don't need to manually resize each of your photos to make your web page lighter... Google can do that for you by simply changing a number on the image URL.

When you upload an image on Blogger (or Google+ or Picasa) you end up with an URL looking like this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/s1600/landscape.jpg

The part that interests us is the one preceding the actual image name, the one that shows "s1600".


Changing an image size (s/w-h)

The s1600 part is actually stating you want an image scaled to a maximum width/height of 1600 pixels. If you change that number to s400 you'll get a scaled down image with 400px, like this one:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/s400/landscape.jpg


Keep in mind this is very different than simply loading up the original image and showing it at a small 400px width size. In that case, the browser will still have to load the potentially huge original photo, even though most people won't ever need to see it in its full size. In this case, the original image has nearly 800KB, but the the resized "s400" version has just 44KB. You do the math!

This is a mandatory hack for blogger users, as there's a bug that makes the image load the original size even though you may select to show it in a small size. So, be sure to head up to the HTML editing of you post, and correcting the image URL appropriately.


Instead of the "s" parameter, you can also use a width and height parameter by using the forma "w400-h200" (where you can change the values as you wish.)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/w400-h200/landscape.jpg


Crop the image (-c / -p)

What about if you want to crop an image? There's an URL hack for that as well, "-c":

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/s200-c/landscape.jpg


You can even add an extra dimension parameter in front of the crop parameter, to crop to non-square formats:

•  s400-c-w50 (scaled to 400px, cropped to a 50 pixel width)
•  s400-c-h50 (scaled to 400px, cropped to a 50 pixel height)

I'm sure there's also a way to specify a crop offset value... but unfortunately I wasn't able to find it our (all these parameters were based on trial and error.)


Using -p seems to have a slightly different crop format:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/s200-p/landscape.jpg



Change quality/compression level (-l / -v)

If you want you can also tweak the image size and quality directly. The - l allows you to select a quality level from 1 to 100:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/s400-c-l1/landscape.jpg (level 1 - 3KB)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdiUOCdL1W1_T4HGpRBHPxlYO9ynD2U8NnTG9QPMUUnnO8MzWqQ-XJ_L7idAk1awG2SrAIHQzEJLSgZsUO5T_d6pxH5oUCKI6vp2O5igiFJoJP-cCxHqXXqFUR_3MBf0FMpANO43CgjQ/s400-c-l100/landscape.jpg (level 100- 140KB)


The -v parameter also affects compression, but in the opposite way: -v1 for best quality, -v100 for higher compression.


Other parameters

Unfortunately I wasn't able to find any official Google page where we could see everything that can possibly be done using these URL parameters, but here are some more that I could find out by trying different letters and by searching the web:

• -d (makes the image download immediately - great for image download pages, like wallpapers or so)
• -m0 (returns and alert icon)
• -o (some say it should overlay a "play icon" - but couldn't get it to work)

Anyway, the resizing, cropping and compression parameters are the ones most people will be interested in. And if you do find out more parameters, do let me know.