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?
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?
- 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.
<img expr:src='resizeImage(data:post.firstImageUrl, 500, 2:3)'/>
- 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.
A little background of srcset
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.
firstImageUrl’ expr:srcset=’sourceSet(data: post.firstImageUrl, [128, 256, 512])’ />
- If image_URL can not be resized due to third party image or some other problem then it will return empty string.