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
You may also like to know;
- [Fixed] Blogger Not Showing Images For Blog Posts [Working]
- [Fixed] Blurry images on Blogger Homepage/Popular Post/Featured Images/Gallery Thumbnails
[Table of Contents](javascript:
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:
So the image will looks alike:
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.
So the image will looks alike:
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.
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.
So the image will looks alike:
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.
So the image will looks alike:
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.
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.
8. XML Image Object
Replace s1600 to s1600-g in image URL, you will get XML object code of an image.
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.
So the image will looks alike:
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.
So the image will looks alike:
Set custom height of an image using URL
Ezoic Review
Join Adsense Certified Ad Partner
“Ezoic is a must have automatic testing tool for serious publishers.”
300% Rise in
AdSense Earnings
Get results from Day 1
It’s FREE
READ THE CASE STUDY
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.
So the image will looks alike:
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.
13. Set Custom Size and Height
Replace s1600 to s500-h240 in image URL, it give maximum height of 240px.
14. Set Custom Size, Height and Width
Replace s1600 to s600-w310-h240 in image URL and just check it out.
15. No Thumbnail Appear
Replace s1600 to s1600-m1 in image url, you will get thumbnail of error image sample.
So the image will looks alike:
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.
Source: 15 Hacks for Blogger Images, I Bet You Don’t Know About It