How To Use Blogger Image URL Structure Parameters

Using Blogger Image URL Structure Parameters

Expose all Blogger template developers to the finest method for cropping and resizing Blogger / Blogspot photos using image URL Structure parameters.

Original Photo

When you submit a picture to your article and select to display it as the original, your image URL will look something like this:

 

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s1600/sneeit-logo.png

With Blogger / Blogspot image hosting, the word /s1600/ in the URL indicates that you want the original size version of the image.

NOTE: 

In certain circumstances, Blogger will only display a tiny version at s1600 for particularly long / large photos (example: infographic images). In that situation, raise the size to equal your picture height in order to access the true original version, for example: s5000 if your image height is 5000 pixels.

Version Webp

With the "-rw" argument, you may serve photos in.webp (lighter than png or jpg) format on your Blogspot blog.

Here's the original URL:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s1600/sneeit-logo.png

And here is the Webp version

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s1600-rw/sneeit-logo.webp

Maximum Width Specification

If you wish to load an image that is NOT LARGER THAN 200px in width (height is auto), change s1600 to w200 as seen below:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/w200/sneeit-logo.png

Blogger / Blogspot image hosting will return the original size version if the width you provide in the URL is greater than the original width. That's why it's called "Max Width."

Maximum Height Specification

Similarly to the max width option, if you wish to load an image that is NOT LARGER THAN 30px in height, replace s1600 with h30:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/h30/sneeit-logo.png

If you specify a height greater than the original height, the original size version will be returned.

Maximum Width and Maximum Height

If you wish to load a version that specifies the maximum width and height, for example: NOT LARGER THAN 200px in width and NOT LARGER THAN 30px in height, change s1600 to w200-h30:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/w200-h30/sneeit-logo.png

The return version will have a width of no more than 200px and a height of no more than 30px, while maintaining the original version's scale ratio.

Image Cropping in the Center

If you wish to load an image with EXACTLY 300px width and 100px height, for example, change s1600 to w300-h100-c. The -c phrase at the end stands for "crop." The final URL will be as follows:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/w300-h100-c/sneeit-logo.png

If you want to crop an image as SQUARE, for example, with a loading size of 300px in both width and height, change s1600 to s300-c:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s300-c/sneeit-logo.png

The -c argument always returns a cropped version of the picture from the center.

Cropping in the Center Using a Circular Mask

When you use -cc instead of just -c, the image is cropped using a circular mask.

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/w300-cc/sneeit-logo.png

Choose a Cropping Image

If your image includes a major content that is not in the center of the image, such as a face on the top or right side, and you don't want to crop the image from the center since it will chop the face in half, you may use -p instead of -c.

When you add -p to the end of the size option, Google Photos' sophisticated algorithm will evaluate the image and select the most useful portion to return as a crop version.

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s300-p/sneeit-logo.png

Background Color Specification

If your picture contains a transparent background (often PNG images), and you wish to fill that transparency background with a certain color, you must append the argument -rj-c0xHEX COLOR at the end of size. If you wish to fill with white, for example, you must add -rj-c0xffffff to the URL parameter. The final URL will be as follows:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s300-rj-c0xffffff/sneeit-logo.png

If you just use -rj without -c0xHEX COLOR, the background color will default to black.

Version Saveable

If you wish to include a download link for the image, add -d at the end of size:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s1600-d/sneeit-logo.png

XML Data Object

If you want to supply an XML object for the picture, append -g to size:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s1600-g/sneeit-logo.png

Parameters should be combined.

You may combine many parameters in a single URL; for example, if you can crop the center of a picture using a circular mask and a white backdrop, your URL will look like this:

https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/s300-cc-rj-c0xffffff/sneeit-logo.png