Search code examples
javascripthtmlcssblogger

How to serve scaled images in blogger

When I check my blog in Gtmetrix it shows 0 value for "serve scaled images". I don't know how to show scaled images in blogger. I tried many codes from fellow bloggers but still, it shows 0 value in "serve scaled images". My link is here. Should I keep the same thumbnail size for homepage and post pages or anything else? I don't know how to solve this matter.

The code used for resizing the images is as follows -

<script type='text/javascript'>
//<![CDATA[
  function snippetimage(a,e){var g=416,i=312;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>

Please help!

Solution

  • This issue is happening because a larger than required image is being loaded by the template. You will have to change the resolution of the image (from the current 416x312 px to 183x200 px, as mentioned by the GTmetrix report shown in the screenshot below ). You will have to change the above code as follows - 

    <script type='text/javascript'>
//<![CDATA[
  function snippetimage(a,e){var g=183,i=200;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>

    gtmetrix report