Image is one of the
supporters to be more interesting posts to read or to better explain the
article. But the picture also is one contributor to problems in loading the
blog. Therefore let not carelessly in making drawings for posting. Draw a
picture that has a good quality to be quite clearly seen by readers and also
have a size that is small enough so as not to burden the loading blog. Or if
you do not want to hamper loading image blog, we can use how to defer imageswith a JavaScript. For example, the animated image below has size 450KB but
with in-defer becomes heavy when loads too. So if an article Blogger has a
picture in the post, then Blogger will display a thumbnail of posts from the
picture in the post, if there are several then the thumbnail images will be
taken from the first image in the post. 
Make Blog Post Images Responsive Without JavaScript
Blogger recently issued a new
feature that is resizeImage that can resize images Blogger. It
was first noticed on the code changes to display the thumbnails on the widget
popular post. Previous to src on thumbnail popular post looks like below.

expr: src = ‘data:
post.thumbnail’ 

And generating an image
URL as below as an example: 

https: //1.bp.blogspot.com/-lkiJ38rk7hgf/SLKJdh09bgy/AAAAAAAAooo/vzVHjhdewu0/S600/googler.png 

And now src on the
thumbnail popular post looks like below 

expr: src =
‘resizeImage (data: post.thumbnail, 72, & quot; 1: 1 & quot;)’ 

And generating an image
URL as below as an example: 

https:
//1.bp.blogspot.com/-lkiJ38rk7hgf/SLKJdh09bgy/AAAAAAAAooo/vzVHjhdewu0/W72-h72-p-nu/googler.png 

From the second URL above
generated will show images of the same size, differing only in the S600 and
W72-h72-p-nu. But for code resizeImage the latest from Blogger,
we can easily to change the size of thumbnails by changing numbers according to
our needs. Suppose we want to display a thumbnail with a size of 250px then the
code will look like below. 

expr: src =
‘resizeImage (data: post.thumbnail, 250, & quot; 1: 1 & quot;)’

Then the thumbnail will
appear with the size 250px x 250px square. But if you’re happy with the look
with a full picture thumbnail in the original then please write like this

expr: src =
‘resizeImage (data: post.thumbnail, 250)’ 

Then the URL will look
like the image below as an example.

https:
//1.bp.blogspot.com/-lkiJ38rk7hgf/SLKJdh09bgy/AAAAAAAAooo/vzVHjhdewu0/W250/googler.png 

Well, it is also useful
to resize the thumbnail Bloggers for FirstImage Blogger widget
thumbnail used in the Featured Post Blogger, can also. These widgets using code
like below. 

expr: src = ‘data:
postFirstImage’ 

And the URL of the
resulting image will look like below as an example. 

https:
//1.bp.blogspot.com/-lkiJ38rk7hgf/SLKJdh09bgy/AAAAAAAAooo/vzVHjhdewu0/S1600/googler.png 

Now that the size of
the thumbnail Featured Post is in accordance with the size of the place where
the widget is saved then we can use resizeImage such as the popular post
widget. Suppose featured post widget is stored in the sidebar with a width of
300px then can use the following code. 

expr: src =
‘resizeImage (data: postFirstImage, 2500)’ 

So that the URL of the
resulting image will look like below as an example. 

https:
//1.bp.blogspot.com/-lkiJ38rk7hgf/SLKJdh09bgy/AAAAAAAAooo/vzVHjhdewu0/W250/googler.png

This trick can also be
used for code that displays thumbnail bloggers out post or to display a thumbnail
of posts on the homepage like this 

expr: src = ‘data:
blog.postImageUrl’ 

And please use the code
below to resizeImage with size 680px 

expr: src =
‘resizeImage (data: blog.postImageUrl, 680)’ 

With so thumbnails will
appear according to the size it is located so as to minimize the time loads
too.

LEAVE A REPLY

Please enter your comment!
Please enter your name here