javascript - 如何防止博主增加缩略图图像大小？

Question

我的博主博客相关的帖子小部件代码如下所示。

我在帖子中使用了webp 图像格式。但是相关帖子的缩略图被转换为.jpg，并且图像的大小也增加了近10倍。

<!--Related Posts with thumbnails Scripts and Styles Start-->


<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <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 == &quot;item&quot;'>
                <div id='related-posts'>
                <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast != &quot;true&quot;'>
                </b:if>
                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
                <script type='text/javascript'>
                var currentposturl=&quot;<data:post.url/>&quot;;
                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-->

我的原始帖子图像大小为 3 到 5 kB，采用webp格式，尺寸为 560x315。

但是相关帖子的同一帖子的缩略图被转换为.jpg格式，大小增加到32kB。

gtmetrix.com显示有关相关帖子缩略图的报告 –</p>

https://thumbnail-image-link-image-name.webp 在 HTML 或 CSS 中从 560x315 调整为 160x100。提供缩放图像可以节省 30.4KiB（减少 90%）。

如何解决这个问题。

标签： javascripthtmlcssbloggerwebp