Tuesday, April 14, 2015

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.

9 comments:

  1. For such thing I use my PC editing tools. In my case it can be aurorahdr http://aurorahdr.com/getstarted/how-to-use-crop-tool (macbook pro user) or iphoto or something online

    ReplyDelete
    Replies
    1. Yes, you can use any image editing program for that. But in this case its a simple hack that can be done in Blogger using the URL without having to edit and re-upload a photo.

      Delete
  2. Very nice i find these parameters:

    http://4.bp.blogspot.com/-byVtxeztjWU/VSfUWgLlzkI/AAAAAAACjO8/O_tp21BCk9I/s400-fSoften=1,60,4/landscape.jpg

    http://4.bp.blogspot.com/-byVtxeztjWU/VSfUWgLlzkI/AAAAAAACjO8/O_tp21BCk9I/s400-fPolaroid=1,8,ff8260/landscape.jpg

    but have you any tutorial to work with these parameters on my blogger template to reduce loading page because most of my thumbs they loading on /s1600/ only popular posts are /s72/

    ReplyDelete
    Replies
    1. Wow, those are amazing. Wonder how many more effects it might support!

      As for the template, unfortunately there's no easy way to change that. The only way is to ensure that each post is correctly using the size parameter (manually, by checking the html).

      Delete
  3. Thanks for the answer, i think this blog http://www.pinoytechnoguide.com/ use these techniques to create custom sized thumbnail images with some JavaScript Code!

    ReplyDelete
  4. This is an awesome hack! And would be a 10/10 if it wasn´t for just one detail... To still be compatible with blogger slideshow you have to modify the parameter both in the src url and the href url...

    But if you do that it affects the original image... the one that should show when you click the view image on the context menu (right button click)...

    It's me that am too greed for wanting the two possibilities?

    Anyway it's an amazing hack (9/10) thanks for sharing!

    Até mais ver
    mr. Poneis

    ReplyDelete
  5. Is there a way to crop from the corner of these pictures?

    ReplyDelete

Related Posts with Thumbnails

Amazon Store