Blogger Ever

A native approach to resize images in Blogger

In detail of how we can make sure optimum performance of blog by loading the properly sized images, by native or javascript means.

Right now Blogger developers are not getting their hands dirty into something that is not necessary for them right now, when it makes a great importance in making premium theme. Images are greatest factor of turning the theme down due to effected loading speed. Till now I've never found a single document provided by Blogger which clearly displays the information about all the aspects of loading images in Blogger. Anyways have a look of what I've collected so far.

What are we taking about exactly?

Blogger host the user images and let them access through its XHTML tags. The access to those images is far better which are uploaded directly instead of those which are third party or accessed via other servers than Google/Blogger itself. The reason behind is the structure difference of URL. Here is an example of what exactly I am taking about.
https://1.bp.blogspot.com/-q8QF7ka3g0I/V0SurY1WjCI/AAAAAAAAJlA/bdhhZMb1ytQhbmdcNayRJa-wLtgVd0igwCLcB/s1600/object.jpg
Above is the link of image from my last post. The image URL contain a portion defining the size of the image. Well, that's where we play with sizes.

I can see many bloggers posting crazily about resizing with CSS which is totally mad idea of doing so because you are resizing the image just to display and not to load it, that is simply not functional.

Where is native actually?

The native API that I am taking about is rarely found on web due to poorly documented Blogger docs, yes poorly. Blogger provide a native method to resize the images just like Wordpress. 

There are two different operators provided by Blogger to work with image URL, first is resizeImage() and second is sourceSet(). These two have a slightly different functions.

resizeImage()

resizeImage() is the real solution of what we are taking right here. It takes the image URL as input and returns the resized image URL. The basic syntax is like:
resizeImage(image_URL,new_size,ratio);
  • image_URL: It is the input URL that can be added with XHTML Blogger tags.
  • new_size: It is an integer, the new width of image eg:300.
  • ratio (optional): It is an integer and will decide width into height ratio. It will keep the image aspect ratio the same but crop it into the exact ratio which will be provided. Eg: "2:3" or "1:1" which is perfect square.

Example

<img expr:src='resizeImage(data:post.firstImageUrl, 500, 2:3)'/>

notes

  • image_size and ratio are integers.
  • expr is necessary while using Blogger's native operators and data tags, they are not added while rendering.
  • data:post.firstImageUrl returns the first image in the post.
  • As I wrote above, the third party images do not have a good support therefore if image_URL cannot be resized then the original image URL will be returned.

sourceSet()

sourceSet() is also a lesser known but useful operator, it is basically the one which helps in making the images more better in different screen sizes.

A little background of srcset

There is an attribute in HTML5 for img tag: srcset. It determines the best image to be displayed in the different devices. Chris Coyer in his blog post quoted it the better way than using <picture> tag. It is because, in srcset you let the browser select which is better option instead of <picture>'s <source> tags in which browser have to do exactly what you tell him to do.

Basic syntax

sourceSet(image_URL, new_sizes, ratio)
  • image_URL: It is the input URL of the image.
  • new_sizes: Different sizes for image and let the browser select which one to render. Eg: [200,500,800]
  • ratio (optional): The ratio in which image has to be cropped.

Example

<img expr:src=’data:post.firstImageUrl’ expr:srcset=’sourceSet(data:post.firstImageUrl, [128, 256, 512])’ />

Notes

  • If image_URL can not be resized due to third party image or some other problem then it will return empty string.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.