Make Blog Post Images Responsive Without JavaScript

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.

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.