15 Hacks for Blogger Images, I Bet You Don’t Know About It

Sharing Blogger image hacks and tricks to automatically resize, fit, scale, crop, align and adding border to any image using only URL parameters.. Continue reading...

Adsterra Advertising Network Solutions for Publishers



Ezoic Review Automatic Ad Earnings Growth Adsense Certified Tool
Ezoic Review
Join Adsense Certified Ad Partner
"Ezoic is a must have automatic testing tool for serious publishers."
300% Increase
in earnings after using auto ad tester...
Read The Case Study

Images are the most important part of publishing a post on the web. An image speaks 100 words. Image defines any concept in less time than it is required for a paragraph. And every publisher takes the advantage of adding images to every blog page.
Blogger image hacks
Blogger users used to search about how to set the width and height of an image using HTML? How do I change the width of an image in a URL? How do I change the size of an image in HTML URL? How do you specify the width and height of the image? How can I get the image width and height from the URL?

Today here, I am going to talk about the new ways of adding images to your Blogger Blogspot. Most bloggers specially those who use “Blogspot” as their blogging platform and used to use HTML and CSS (Cascade Style Sheet) to set the height, width of the images added to posts. But have no idea that they can set their image height, width, border, crop, etc only by changing the blogger image permalink.

To control layout shifts and improve performance, PageSpeed scores, you require to always assign width and height attributes to your images. You can resize the image by defining the width and height of the image by URL. If height and width are specified, the space needed for the image is preserved while the page is loaded. When you select both height and width, the image is forced to fit the requested proportions. It could change the original aspect ratio. Check new tricks and hacks you can use with the image URL to assign new height, width, border, and much more.
Blogger Image Hacks
Blogger Image Hacks
{tocify} $title={Table of Contents}

How to Automatically Resize, Fit, Scale, Crop, Align & Assign Border to Any Image Using Only URL Parameters

If you're using the BlogSpot by blogger, you can programmatically load the image from the web and call its dimensions. Using dynamic image resizing, You can easily resize images via URL.

Blogger Image Hacks:

1. Default Image

First check URL Structure of Blogger Image. If you upload an image to blogger, by default it automatically add s1600 to its permalink, it look like this:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s1600/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Blogger Image Hacks
Blogger default image URL link



2. Set Custom Size

You can replace s1600 from default image URL and try to set any size as you like; for example s480, s720 or s1080 as your wish.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s480/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Set Custom Size of The Image Using Url
Set Custom Size of The Image Using Url



3. Set Max Resolution of the Image

You can edit the image URL to set the max resolution of an image up to s2650 in blogger.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s2650/Blogger%20Image%20Hacks.webp



4. Crop the Image Using URL

Replace s1600 to s500-c in image url, you will get image as square; that means its height and width will be exactly 500px. You can also use s300-p to crop the image.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s500-c/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Crop the image using URL
Crop the image using URL



5. Add Border to The Image.

Replace s1600 to s1600-b8 in image url, you will get 8px black color border with the image. I have tried maximum to b30 but you can try more.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s1600-b8/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Add Border to The Image Using URL
Add Border to The Image Using URL



6. Download Link for the Image

Replace s1600 to s1600-d in image url, you will get provide a download link for image.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s1600-d/Blogger%20Image%20Hacks.webp
You can use such a link to provide downloading option for any perticular image or photo from your blog page for your readers. This hack is mostly helpful for photography bloggers.


7. Original Image

Replace s1600 to s0 in image URL, you will get original version of an image that you have uploaded.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s0/Blogger%20Image%20Hacks.webp



8. XML Image Object

Replace s1600 to s1600-g in image URL, you will get XML object code of an image.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s1600-g/Blogger%20Image%20Hacks.webp
This trick is mostly useful for developing people, looking to know code working structure.


9. Set Custom Width

Replace s1600 to w320 in image URL and image width didn't go beyond 320px. Yes you can also try any other size as your need.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/w320/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Set custom width of an image using URL
Set custom width of an image using URL



10. set Custom Height

Replace s1600 to h320 in image and image height didn't go beyond 320px.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/h320/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Set custom height of an image using URL
Set custom height of an image using URL



11. Set Custom Width and Height

Replace s1600 to w320-h240 in image URL, it give size in frame of width of 320px and height of 240px.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/w320-h240/Blogger%20Image%20Hacks.webp
So the image will looks alike:
Set custom width and height of an image using URL
Set custom width and height of an image using URL



12. Set Custom Size and Width

Replace s1600 to s500-w320 in image URL, it give maximum width of 320px.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s500-w320/Blogger%20Image%20Hacks.webp



13. Set Custom Size and Height

Replace s1600 to s500-h240 in image URL, it give maximum height of 240px.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s500-h240/Blogger%20Image%20Hacks.webp



14. Set Custom Size, Height and Width

Replace s1600 to s600-w310-h240 in image URL and just check it out.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s600-w310-h240/Blogger%20Image%20Hacks.webp



15. No Thumbnail Appear

Replace s1600 to s1600-m1 in image url, you will get thumbnail of error image sample.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4yRjUPyxf88OqEoOFejTAVanijZVMeC31l1ov24N8fhndyGDyZrmzaKey2atX-Gjg24SNWuGlUCLIYg-qVB9PbuS79UYrircMVn-72uEglr9OnRDKA3VeEs7QM_JJx_gpbC51DETNJCjrMUqR7xI5UHkSyO8-Wh_yxML3E-udQMjvTxIQ6UHcl8kKQ/s1600-m1/Blogger%20Image%20Hacks.webp
So the image will looks alike:
No thumbnail image preview using URL
No thumbnail image preview using URL



As far as I know, if you like to change the image according to the query string, I recommend you could try to use these techniques to set the image width or height in the image URL itself.

Enjoyed these hacks, let me know what you think. And comment below if you have other tricks regarding bloggers. You can also use these tricks in Google Plus, Picasa, or any other Google service.

Also dont forget to check; Enable Lazy-Loading Images on Blogger Website To Speed up Loading By 2X


Vinayak SP

Vinayak is a web geek, digital columnist, and solo entrepreneur working on ProBlogBooster. You can follow PBB on social media or subscribe to our email newsletter and never miss an update. twitter instagram amazon linkedin external-link


Disclaimer


We are one of the type of a professional review site that operate like any other website on the internet. We respect & trust our readers. And we are confident & would like to mention that the above post contains some affiliate/referral links. And if you make a purchase; we receive commission from the links/apps/products we refer. We are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Copyrights


All of the ProBlogBooster ideas are free for any type of personal or commercial use. All I ask is to keep the footer links intact which provides due credit to its authors. From time to time, we may use visitors/readers, information for distinct & upcoming, unanticipated uses not earlier disclosed in our privacy notice. If collected data or information practices changed or improved at some time in the future, we would post all the policy changes to our website to notify you of these changes, and we will use for these new purposes only data collected from the time of the policy change forward. If you are concerned about how your information is used, you should check back our website policy pages periodically. For more about this just read out; Privacy Policy