RESIZE / CROP Google Photos & Blogger images Without an editor

Google photos, Blogger images and other Google Cloud images services can be edited on the fly without an editor, simply by changing some image link parameters.

 Today we will talk about most used parameters to Resize and Crop all images hosted by Google the easy way .

We use the image URL , so all what you have to do is right click the image and select open image in new tab or copy image address.

Example:

https://1.bp.blogspot.com/-6iwRlK0D7mM/YBqvg2pqK2I/AAAAAAAAUyI/VhHr-4OYWKkqpcKt1xp0t4LzhbJMdqLkACLcBGAsYHQ/w640-h548-ba2/s400-c-cc/crop-resize-google-images.webp

The parameters in bold red are the parameters that we are going to change according to our needs

 Now start tweaking the URL to change the image size as follow

RESIZE / CROP

1. sn parameter :

"s420": this will resample the (larger ) image width or height to the specified number of pixel which is 420 in our case , the other parameter will proportionally change .

E.G. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s420/resize-crop.webp

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s0/resize-crop.webp

2. (wn-...) parameter

"w300": in this case image will always be resampled according to it's defined width ( w= width , n = no. of width pixels) which will be 300px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/w100/resize-crop.webp

3. (hn-...) parameter

"h200": in this case image would be resampled according to it's defined height  ( h= weight , n = no. of height pixels) which will be 200px.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/h100/resize-crop.webp

4.  (...-c) , (...-p) & (...-n) Parameter

c — crops image to provided dimensions

the mission of "...-c" parameter is to crop the image to the specified width and height, so this parameter needs to state width and height e.g.

w300-h200-c will crop image to 300px width and 200px height

s300-c will crop both width and height to 300px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-c/resize-crop.webp

p — smart square cropping, attempts cropping to faces

"...-p", eg: "w800-h400-p": this gets the image so it is exactly this size. The source image is first resampled so the image is fitting for the limiting dimension, then the other dimension is cropped so the image is the exact size asked. 

When cropping, some algorithm searches the most interesting part of the image, so the result of the cropping doesn't always keep the center of the picture.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-p/resize-crop.webp

n — same as c, but crops from the center

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-n/resize-crop.webp

pp — alternate smart square crop, does not cut off faces (?)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-pp/resize-crop.webp

cc — generates a circularly cropped image

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-cc/resize-crop.webp

ci — square crop to smallest of: width, height, or specified =s parameter

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-ci/resize-crop.webp

nu — no-upscaling. Disables resizing an image to larger than its original resolution.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/s400-nu/resize-crop.webp

5. s (without a value) 

— stretches image to fit the provided dimensions

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikweSCYuqyY0wThVuWXuC47hAyS6QJMZ4fyL635AQX6B__9vjJdR9YlG9SaGn1b_rjP3PfHv4VGziFO_OmZPe2eCXWEFdsnnxidrFCht7x4AD7bOdkx2SpFHXnsXvpHUDPi7VnHzsv60k/w200-h200-s/resize-crop.webp

6. "s0", "w0", "h0", "w0-h0":

 this will get the image in it's original size, without any resampling nor cropping.