big size images takes time to load and slows your blogs, so here is the best way to crop and resize your blogger/blogspot images using image URL structure.
** 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.
Original Image
After you upload image to your post, and choose to display it as original, your image URL will be like below:The text /s1600/ in the URL will tell with Blogger / Blogspot image hosting that you want the original size version of the image.[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/s1600/rahul_kundu_blog_logo.jpg]
** 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: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”.[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/w200/rahul_kundu_blog_logo.jpg]
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:If you set a height value that is larger then original height, the original size version will be returned.[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/h30/rahul_kundu_blog_logo.jpg]
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:The return version will have width no larger than 200px and height no larger than 30px and also keeping scale ratio of original version.[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/w200-h30/rahul_kundu_blog_logo.jpg]
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: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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/w300-h100-c/rahul_kundu_blog_logo.jpg]
[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/s300-c/rahul_kundu_blog_logo.jpg]
Savable Version
If you want to provide a download link for image, you can add -d at the end of size:[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/s1600-d/rahul_kundu_blog_logo.jpg]
XML Object
If you want to provide a XML object for image, you can add -g at the end of size:Hope those tips will help you optimizing your thumbnails better for your templates. Please Like, Comment, & Share.[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_iowfSfoUw-8eVA8odxqq1ufNwfX7jvXLSHHt2JoFIS-082-FozYJ6H6TbSb4hT29Qap1sr5Qb1KaHbr8505zGarDjj65PlfoescdrtEGlj-Hu9THrRhhnwZxRIpQ_c3bXxwta92xAA/s1600-g/rahul_kundu_blog_logo.jpg]
I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
ReplyDeleteWe use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)
Crop any image like png , jpg , PNG ,JPEG , with free tool online circle shape. Crop any JPG , PNG , JPEG image in circle in free
ReplyDelete