The Ultimate Guide to Customize and Edit Blogger (BlogSpot) Images

Though seasoned players advice for a self-hosted WordPress platform, Google's Blogger platform is also an excellent choice for a huge number of bloggers. People often complain about the limited flexibility available on the latter blogging platform. But, this statement is partially correct. There are a lot of hidden Blogger features a general user is unaware of. And, one of such powerful and extremely flexible features is how you can customize the images used in the blog posts. Here we are talking about different kinds of optimizations and effects we can apply to the uploaded images. Fortunately, images uploaded on Blogger platform are internally hosted on Google App Engine. The latter platform has powerful image processing capabilities which can be used by Blogger users—quite easily. And, that's what we're going to learn today. Once you get familiar with these image processing options, you can make your blog posts, much better than before. Let's get started and master the Blogger platform's flexible image manipulation techniques.

After learning the image processing techniques discussed below, you must update your post archives images as per your exact needs. If your blog's archive is huge, this can be a time-consuming task.

To reduce the burden, update a fixed number of posts—every day.

Before we start, I'll strongly recommend trying these image processing techniques through a demo post. Once you're familiar with the techniques, feel free to apply them on the real blog posts. So, here we go!

Image Resizing and Cropping

We'll start the first section with various image resizing and cropping options available to the Blogger users. But before that, we'll take a look at the generic URL structure of an image uploaded to the Blogger platform. Here's how it looks.


https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/baby.png

Here, the value s320 is where all the magic happens. In your case, the numeric value can be bigger or smaller. We just have to manipulate this part of the URL to customize the images. Let's start!

s0 (original image dimensions) - We often just need to display the uploaded image with its original dimensions within a blog post. To do so, just add zero to the s parameter. For example, s0 will fetch the uploaded image with its original size.
s000 (000 pixels image on largest dimension) - If you're using a number with the s parameter, for example, s350, you get an image with 350-pixel dimension.
w000 (image with custom pixel width) - To get an image with a fixed pixel width, use this parameter. For example, w500 gives you an image 500 pixels wide.
h000 (image with custom pixel height) - And, for a fixed height image (in pixels), use this parameter. For example, h250 fetches an image 250 pixels in height.

If you're specifying both width and height, for example w500-h150, then, to preserve the aspect ratio of the image, height parameter takes precedence and overrides the width parameter.

Note how multiple parameters are joined using a hyphen.
c (crop image to specified dimensions) - This is a simple image cropping parameter and is used in conjunction with the width and height parameters.

For example, w500-h150-c will crop the upper part of the image to the provided dimensions.
n (crop image from the center) - This one is similar to the c parameter with only one difference. Instead of cropping from the top, this parameter crops an image (for example w500-h150-n) from the center.
p (smart square cropping) - This parameter attempts to crop the important part of the image starting from the center. Aspect ratio is not preserved. An example is, w500-h150-p.
pp (alternate way to smart square crop) - It's exactly similar to the previous parameter. Despite vigorous testing, I couldn't find a noticeable cropping difference with this parameter.
pa (retain image's aspect ratio) - This smart cropping parameter (for example w500-h150-pa) is similar to the p parameter. The only difference is that it preserves the aspect ratio. Naturally, height parameter takes precedence in this case too.
pf (smart cropping with face recognition) - This one too attempts smart cropping with face detection. Aspect ratio is not preserved and cropping starts from the center. An example is w500-h150-pf.
cc (circular image crop) - And, if you're interested in circular cropping (see image below), use this parameter. If width and height parameters are also provided, latter one takes precedence when it comes to the cropped part.

The area outside the cropped part is returned as a transparent background. An example of the same is w500-h150-cc.
ci (simple square image crop) - This parameter (for example w700-h150-ci) returns a perfectly square cropped image with the smallest dimension possible near the lowest specified width or height parameters.
lf (loose face cropping) - After extensive testing, this parameter (for example w700-h150-lf) simply returns an image with the specified height keeping the aspect ratio—intact.
nu (prevents resizing beyond original dimensions) - This useful parameter can be used to disable resizing of an image larger than its original dimensions.

For example, if the original image width is 600 pixels, then despite specifying a larger width w1600-nu, the image won't scale larger than the original width due to the presence of the nu parameter.

So, this finishes all the common and useful parameters available for image resizing and cropping. Feel free to test these parameters through a demo post.

Miscellaneous Effects, Filters, and Edits

After getting familiar with the basics, let's move on to the advanced image customization techniques to further edit or pimp up the uploaded images. Some of these options are rarely or never used while others may be used on a daily basis.

Let's get familiar with these options—one by one.

Flip image—vertically - To flip an image, vertically, use the fv option. For example, s0-fv will flip the image with the original dimensions—vertically.
Flip image—horizontally - For a horizontal flip, use the fh option. A simple example once again is s0-fh.
Rotate image - If you're looking to rotate the image, use the r option. Three rotation angles are available viz., 90, 180, and 270 degrees. For example, s0-r180 is essentially a vertical flip.
Fetch JPG format - Use the rj option to get the image in a JPG format. For example, a PNG image with the parameters s0-rj will give you the same image in a JPG format.
Fetch PNG format - For retrieving the image in a PNG format, use the rp option.
Fetch WebP format - To get an image in Google's WebP format, use the rw option.
Fetch GIF format - To convert the image in a GIF format, use the rg option.
Apply format options - Generally, JPEG images are of 3 types viz., Baseline Standard, Baseline Optimized, and Progressive. We can use these types through the v option with the numbers 0, 1, 2, and 3.

For example, s0-v0 or s0-v1. As we increase the number to 2 and 3, the quality degradation is substantial and is not recommended for website use.
Get MP4 from an animated GIF - If you want to embed an animated GIF in the form of an MP4 video file, use the rh option. Here's an example.
```
<video width="480" controls>
<source src="https://xxxx/s0-rh/image.gif" type="video/mp4">
</video>
```
Width can be changed as per your requirements. As you may have noticed that we've used the HTML5 <video> tag instead of using the regular <img> tag.
Kill GIF animation - And, if you want to kill the GIF image's animation and want the static version of the same, use the k option. For example, s0-k returns the static form of an animated GIF image.
Set custom border/frame - Generally, to apply a custom border or a frame around an image, we use CSS rules. But, what if we can do that without using any CSS code?

Fortunately, one can easily get a custom border (example shown above) through a combination of two parameters. The first parameter b adds a specified pixels thick border to the image.

The second parameter c is used to specify the border color in a hexadecimal format. The example above uses s320-b10-c0xffeeeeee parameters. Here, border thickness is 10 pixels and the color is in the 0xAARRGGBB format.
Compress JPEG image - If you care for site speed, serving bulky images to the visitors is not recommended at all. Image compression can reduce the file size which in turn reduces the overall size of the webpage.

An image compression parameter l is available that reduces the size of the file but affects the image quality at the same time. An example of the same is s0-rj-l85 which compresses the file by 15 percent.
Cache image - Browser caching of assets at the visitor's end is one of the important features to give a fast browsing experience to the readers. To do that, one has to specify the asset's expiration time.

To do that, use the e parameter. For example, s0-e30 will cache the image at the site visitor's end for 30 days.
Blur image - Generally, we do not blur images when using them for the web content. But, in select cases, we may need to do so. Thankfully, there's a parameter for blurring images too.

Use the fSoften option which takes 3 numeric parameters to add the blurring effect. For the sample image shown above, I've used fSoften=1,5,0 to add the desired blurring effect. Here, the middle number can be changed from 0 to 100 to tweak and adjust the intensity of the blur effect.
Add gradient and border shadow - And now comes the gradient effect combined with a custom border shadow color. Yes, you can do that too!

Use the fVignette option to add both these effects to the image. For the demo image, I've used fVignette=1,100,1.5,0,aaaaaa to add the gradient and the border shadow.

Here the floating-point number (3rd parameter) can be used to tweak the gradient coverage area and the hexadecimal color code (last parameter) can be used to specify the border shadow color.

So, these are the handpicked 29 image manipulation parameters available for the Blogger platform users. Take advantage of these options to serve better images to your blog readers.