How to Customize and Edit Blogger Images

Learn powerful and flexible ways to edit and customize images to uploaded on Blogger to improve the quality and visual appeal of your posts.

While many experts recommend a self-hosted WordPress platform, Google's Blogger platform is also a great option for many bloggers. The later blogging platform's lack of flexibility is frequently criticised. However, only part of this statement is true. A lot of Blogger features are hidden from the average user. One of the most powerful and adaptable features is how you can customize the images used in the blog posts. We're discussing several types of optimizations and effects that can be applied to the image that have been submitted in blogger. Thankfully, images uploaded to the Blogger platform are hosted internally on Google App Engine.

The latter platform has powerful image processing capabilities that Blogger users can easily access. That is exactly what we will learn today. Once you're familiar with these image processing options, you'll be able to improve your blog page SEO. Let's get started and learn how to use the Blogger platform's versatile image manipulation tools.

After learning the image processing techniques discussed below, you must update your post archive images to meet your specific needs. If your blog's archive is large, this can be a time-consuming task.

Before we begin, I strongly advise you to experiment with these image processing techniques using a demo post. Once you've mastered the techniques, feel free to apply them to actual blog posts. So, here we go!

How to Resizing and Cropping Image

The first section will cover the various image resizing and cropping options available to Blogger users. But first, let's take a look at the generic URL structure of an image uploaded to the Blogger platform. This is how it looks.

Old Format

"https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/ultimate-guide-customize-and-edit-blogger-image.png"

New Format

"https://blogger.googleusercontent.com/img/a/xxxxxxxx/xxxxxxxx/xxxxxxxx=s320"

• 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.

---

Conclusion

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.

This is all about How to Customize and Edit Blogger Images Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

You May Like These Posts:

Go to Link