Using Blogger / Blogspot Image URL Structure for Cropping and Resizing

To day, I am honor to introduce to all Blogger template developers about the best way to crop and resize your Blogger / Blogspot images using image URL Structure.

Original Image

After you upload image to your post, and choose to display it as original, your image URL will be like below:

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

The text /s1600/ in the URL will tell with Blogger / Blogspot image hosting that you want the original size version of the image.

** NOTICE: However, in some special cases, Blogger will only show a small version at s1600 for very long / big images (example: infographic images). In that case, you must increase the size to equal your image height to access the real original version, example: s5000 if your image height is 5000 pixels.

Specific Max Width

If you want to load image which is NOT LARGER than 200px in width (height is auto), you will replace s1600 to w200 like below:

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

If the width you set in the URL is larger than the original width, Blogger / Blogspot image hosting will return the original size version. That’s why we call it “Max Width”.

Specific Max Height

Similar with the max width parameter, if you want to load the image which is NOT LARGER than 30px in height, you will replace s1600 to h30
https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/h30/sneeit-logo.png
If you set a height value that is larger then original height, the original size version will be returned.

Specific Max Width and Max Height

If you want to load a version with specific for both max width and max height, example:NOT LARGER than 200px  in width and NOT LARGER than 30px in height, you will replace s1600 to w200-h30:
https://lh5.googleusercontent.com/-IBDLtqPDdE4/VaDvj4_9T0I/AAAAAAAAK54/6P2S800iWJE/w200-h30/sneeit-logo.png

The return version will have width no larger than 200px and height no larger than 30px and also keeping scale ratio of original version.

Cropping Image

If you want to load image with EXACTLY width and height, example 300px in width and 100px in height, you must replace s1600 to w300-h100-c. The -c text at the end is “crop”. The final URL will be:

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

If you want to crop image as SQUARE, example, loading size 300px in both width and height, you can replace s1600 to s300-c:

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

Savable Version

If you want to provide a download link for image, you can add -d at the end of size:

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

XML Object

If you want to provide a XML object for image, you can add -g at the end of size:

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

Hope those tips will help you optimizing your thumbnails better for your templates.

YOU WILL ALSO LIKE:

COMMENTS

  • comment-avatar

    This is such great knowledge, Tien. barely I was knowing that s1600 is original and s640 is another version of the same image, but smaller. Now I get to know we can set even the width and height. Good work. It will help to cut-off the page size.

  • comment-avatar

    Yes. I just discovered it this morning. Hope will help for site speed of all Blogger users.

  • comment-avatar

    Devendra we don't observe it much being a developer people like Tien will observe and know about how the work is done. Its time to re shape the images with the trick

  • comment-avatar

    Hi bro, can u help me pls. First time i have a very diff problem on blogger. My post is copyed all.
    For ex this post : http://1deliningunlukleri.blogspot.com.tr/2015/08/windows-10a-bi-turlu-gecemeyenler-icin.html

    But if post is have img it is copyed all post again.
    İf post is doesnt have img everything is ok.

    i am waiting your reply. see u

  • comment-avatar

    That's a template bug, please contact template author for support service. Or you can hire me here: http://creativebuynow.com/buynow?id=27

  • comment-avatar

    i am sending message to u from feedback pls read

  • comment-avatar

    Hi Tien! I am also designing my own custom Blogger template. A particular widget tag, that is , is not removable. I see this when I edit some tags inside 'Blog' widget, and 'Header' widget. According to this page (https://support.google.com/blogger/answer/46995?hl=en&ref_topic=12449), I should be able to do that. Do you have any solution regarding this? Thanks!

  • comment-avatar

    Sorry but I can not understand your explanation clearly. You want to remove a tag of a widget but you can't?

  • comment-avatar

    Thanks! This is the explanation:
    I made a with id 'my-description' in my header widget, which contains data:description. I then link it in (). I save it and It succeeds. But, when I refresh the html page, the default appeared (which I had deleted), while I did not call with id description at all. I tried not to use blog description at all. But it failed. The default tag appeared.

    I also see this behavior in some b:includable inside 'Blog' widget. While some custom blogger template do not necessarily use these tags (some of them that I do not need I mean).

  • comment-avatar

    It's better if you can share your code (put it some where an share the link here) or escape HTMl before paste the code here.

  • comment-avatar

    I understood. Those Includable tags are default tags of Blogger. Blogger will restore to full list of default and custom tags in its template HTML editor. You can remove in your file, but in editor, Blogger will always display as full even you did not call those tags in your template file. It's annoy but we must accept.

  • comment-avatar

    Oh, that goes so (:. I have noticed it just now. Thanks for your nice discussion, Tien. So glad to talk with you.

  • comment-avatar

    You are welcome, Fernando.

  • comment-avatar

    Thanks! This is the explanation:
    I made a with id 'my-description' in my header widget, which contains data:description. I then link it in (). I save it and It succeeds. But, when I refresh the html page, the default appeared (which I had deleted), while I did not call with id description at all. I tried not to use blog description at all. But it failed. The default tag appeared.

    I also see this behavior in some b:includable inside 'Blog' widget. While some custom blogger template do not necessarily use these tags (some of them that I do not need I mean).

  • comment-avatar

    Very nice ^_^
    This post was help me to make auto-image-resize in blogger related post..
    Thanks so much…

  • comment-avatar

    Thanks for sharing.

  • comment-avatar

    how to automatically call these sizes ?

  • Leave a Reply