
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 examplew500-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 examplew500-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 thep
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 widthw1600-nu
, the image won't scale larger than the original width due to the presence of thenu
parameter.
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 iss0-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 parameterss0-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
ors0-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.
Width can be changed as per your requirements. As you may have noticed that we've used the HTML5<video width="480" controls> <source src="https://xxxx/s0-rh/image.gif" type="video/mp4"> </video>
<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 parameterc
is used to specify the border color in a hexadecimal format. The example above usess320-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 parameterl
is available that reduces the size of the file but affects the image quality at the same time. An example of the same iss0-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 thee
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 usedfSoften=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 usedfVignette=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.