We put together all the Image URL structure tips and parameter, using them you can modify your blogger/Blogspot image or Add effects to them, adding Blur and Fog effects will be easy for you, reading this article. This will improve cognition of how you can modify blogger/Picasa images – by tweaking just the Image URL.
Blogger has always been the first choice, despite blogger’s limitation you can tweak custom robots header tags to make blogger blog SEO optimized. Its flexibility allows your to choose from 12 Comments system for blogger blogs. If you’re starting out with blogger, do not hesitate to write longer content with use of Power words.
Here are a few things I wanted to clear, This tip is published first time as a blog post. if you are sharing or recreating this articles on your blog or anywhere, we request you to credit us.
So here are everything you need to tweak your uploaded blogger/BlogSpot/Picasa image – such as crop and resizing and Adding some hidden effects by using image URL Structure.
Once you upload Image in your post’s by blogger’s upload option. Your image will be auto resized, if you choose to display its original size, you image URL will look like this ( there will be 2 variants of URL of same images, an example is below.)
OR (Same image)
OR (same image, resized to 512px)
The text /s1600/ in the URL will tell with Blogger / Blogspot image hosting that you want the original size version of the image.
Remove /s1600 and replacing the Image name 9anything) will auto resize the image to 512px.
Resizing – keeping aspects ratio sizing
just Replace /s1600 with any number i.e. /s300, /s500. Here numerical are pixels and specify only Width so height will be auto here. It doesn’t crop the image in any manner.
or Add this tag at last of the image ” ?imgmax=500 ” this will override /s Value, if ?imgmax= value is lesser than.
But blogger images are not limit here, it’s URL can go more complex to generate effects to the image. (without editing the image itself.)
In addition, I have found a few new codes to modify the image, like adding blur in an image. So here are all the details.
So we are picking this Code as Default for all the effects, and a specific effect can happen by changing its values. So let’s jump into.
Default Code -fcrop64=1,004b0000ffb3ffff:Soften=1,30,0
Recommanded – 1000+ Free Resources for Bloggers
Adding Blur Effects to Image
Adding a blur effect in photos are easier, you can do it with both blogger and Picasa images. they are same in the backend, to add Blur effect you need to add the basic code.
To add a Blur effact you need to add ” -fcrop64=1,004b0000ffb3ffff:Soften=1,30,0 ” after images’s /s-x code.
→ Soften=1,30,0 | Change the middle digit to change blur Density.
The high value is “100”, to decrease blur effect change the value to a less value. But if you set it very high i.e. 9999, Image will be blurred out.
Demo – this is the image link.
In Demo: Blur 1 / blur 25 / blur 50 / blur 100 |OR| Soften=1,1,0 / Soften=1,25,0 / Soften=1,50,0 / Soften=1,100,0
Adding Fog/ Dotted-Blur like Effect.
You need to see its demo understand this effect, we’ve to put a name of this image, so we did,
You need middle digits value at least 10 to let this work. (if middle digit set to 0 this won’t work.)
To add the Fog like effect add the default code in images URL. just like this example.
→ Soften=1,30,10 | Change the last digits to increase or decrease density. remember the highest value of fog effect can be set by value “1”, if you increase this value fog effect will be decreased.
🙂 Now you know how to modify your uploaded blogger Images, this will work as well as Picasa images links. As both are same images just URL is different.
Some of the basic parameters information are covered by Tien (developer) and here is the post. It has all code tweaks to crop or resizing images. Here is the summary,
Specific Max Width and Max Height
Keeping 4:4 aspects ratio with Cropping.
If you want to crop image as SQUARE, example, loading size 300px in both width and height, you can replace s1600 to s300-c:
If you want to provide a download link for image, you can add -d at the end of size:
XML Object (knowing Image info)
If you want to provide an XML object for image, you can add -g at the end of size:
Now you know how to use it for making a good image for your blog post. Additionally, you can add HTML sitemap page to blogger blog and add Ads between blogger posts automatically are easier using this guide.
Blogger’s official Featured Post Widget Launched
Add adsense Ads Middle of Blogger | Each Post Automatically