My blogger blog related Post widget codes are given below.
I used webp image format in my post. But related Post's thumbnail image is converted to .jpg and size of image is also increased to nearly 10 times of same image
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{
float:left;
width:auto;
}
#related-posts h4{
margin-top: 10px;
padding:5px;
font-size: 22px;
}
#related-posts .related_img {
margin:1px 2px 1px 2px;
border:1px solid #f2f2f2;
object-fit: cover;
width:160;
height:100px;
border-radius: 18px;
border: 1px solid #464141;
}
#related-title {
text-align:center;
text-transform:capitalize;
font-size:18px;
width:160px;
margin: 3px 0px 0px 0px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json){
for(var i=0; i<json.feed.entry.length; i++)
{
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try {
thumburl[relatedTitlesNum] = entry.gform_foot.url
}
catch(error){
s=entry.content.$t;
a=s.indexOf("<img");
b=s.indexOf("src=\"",a);
c=s.indexOf("\"",b+5);
d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d
}
else thumburl[relatedTitlesNum]=' https://www.default_ thumbnail_image_url.com'
}
if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0,35)+"...";
for(var k=0;k<entry.link.length;k++){
if(entry.link[k].rel == 'alternate'){
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++
}
}
}
}
function removeRelatedDuplicates_thumbs(){
var tmp=new Array(0);
var tmp2=new Array(0);
var tmp3=new Array(0);
for(var i=0;i<relatedUrls.length;i++){
if(!contains_thumbs(tmp,relatedUrls[i])){
tmp.length+=1;tmp[tmp.length-1] = relatedUrls[i];
tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1] = relatedTitles[i];
tmp3[tmp3.length-1] = thumburl[i]
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl = tmp3
}function contains_thumbs(a,e){
for(var j=0;j<a.length;j++)if(a[j]==e)return true;
return false
}
function printRelatedLabels_thumbs(){
for(var i=0;i<relatedUrls.length;i++){
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);i--
}
}
var r = Math.floor((relatedTitles.length-1)*Math.random());
var i=0;
if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');
document.write('<div style="clear: both;"/>');
while(i<relatedTitles.length&&i<20&&i<maxresults){
document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');
if(i!=0)document.write('"');
else document.write('"');
document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');
if(r<relatedTitles.length-1){r++}else{r=0}i++
}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length)
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle= related posts;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
my original post image size is 3 to 5 kB in webp format and 560x315 dimensions.
But the related post's thumbnail image of same post is converted to .jpg format, and size increased to 32kB.
gtmetrix.com showing the report regarding related posts thumbnail image –
https://thumbnail-image-link-image-name.webp is resized in HTML or CSS from 560x315 to 160x100. Serving a scaled image could save 30.4KiB (90% reduction).
How to solve this issue.
