An alternative way to fix blurry popular post images on Blogger

I’ve had a couple of questions recently about why the popular post images on Blogger are suddenly appearing blurry. I previously posted a fix to this issue here by automatically changing the S value which controls the quality, but it seems that Blogger has changed how it hosts images and no longer uses the S value but a W and H value instead. This only seems to be happening on some blogs, so here are 2 alternative fixes to help you fix this problem depending on your template.

Are your post images on Blogger blurry? Find out why and how to fix them here.

1. Fix blurry popular post images on Blogger using a script

If your blog is using the older format of S Value such as s320 or s640 then follow the previous tutorial that is located here.

3 ways to easily fix blurry images on bloggers popular post gadget

2. New fix for blurry popular post images on Blogger using a script

If your blog is using the new format of w72-h72-p-nu then follow this tutorial

3 ways to easily fix blurry images on bloggers popular post gadget

1. Check if you are already calling a hosted jquery library. To do this go to Template > Edit HTML and search for jquery.min.js or jquery.js. It will look something like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

The version number 2.1.3 may be different. Having multiple jquery libraries in your template may cause issues and slow down your blogs loading time. If you do have this in your template already then skip to step 2.

If the jquery library is not in your template then you’ll need to install it first. Go to Template > Edit HTML and find </head>. Underneath it paste the following and save.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

2. Now we’re going to add a JavaScript to change the image quality used by the Popular Post gadget. Again go to Template > Edit HTML and find </head>. Underneath </head> paste the following and save.

<script type='text/javascript'>//<![CDATA[
/**
Written by XOMISSE. Do NOT remove credit!
**/
$(document).ready(function() {
  var dimension = 1600;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/w\B\d{2,4}/,'w' + dimension)});
image.attr({src : image.attr('src').replace(/h\B\d{2,4}/,'h' + dimension)});
    image.attr('width', "100%");
    image.attr('height', "auto");
  });
});
//]]>
</script>

This script first sets a size of 1600 which is a high quality image, then we are telling it to find the image within the DIV that has the PopularPosts1 ID. Once it finds that, we tell it to change the quality from what it is set at to the full 1600 quality. This is similar to what we did manually in this tutorial to fix blurry images on Blogger. Finally we set the width to 100% and height to auto so the images span the width of our sidebar and height adjusts to that proportionately.

NOTE The /w\B\d{2,4}/ and /h\B\d{2,4}/ means a string that starts with / followed by w and h, then a 2 or 4 digit value and finally another /.

3. Fix blurry popular post images on Blogger by editing Popular Post Gadget

If your blog is using the new format of w72-h72-p-nu you can also adjust the quality by following this tutorial

3 ways to easily fix blurry images on bloggers popular post gadget

1. Go to Template > Edit HTML > Jump to Widget > PopularPosts#

2. You’ll see the popular post code that will look similar to this

3 ways to easily fix blurry images on bloggers popular post gadget

3. A few lines down, find the following code

<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)'/>

4. Change 72 to 1600 to show the image in full quality so that the line now looks like the following

<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 1600, &quot;1:1&quot;)'/>

5. Save the template and you should see your images in better quality.

Post last updated:

13 responses to “An alternative way to fix blurry popular post images on Blogger”

  1. Hi I tried this, but it just made my popuylar post images full size, but didn’t adjust the quality, any ideas why that might happen?
    Thanks, Stephie x

    1. Hello Stephie, what method did you try? Your blog is using the new way for hosting photos so method 2 or 3 should work for you. I don’t see either currently active in your template.

      The height and width are currently set to a fixed size in your template (height: 180px !important; width: 300px; for .PopularPosts .item-thumbnail a), you may want to change this to height: auto; width: 100%; since the width is a little wider than your sidebar but the overflow is being hidden.

      1. Thank you so much! It took a bit of fiddling and I had to follow method 2 and your suggestions, but it works perfect now!

  2. I was looking online for this solution, I found the answer eventually but it wasn’t easy! Thanks for sharing.

  3. Paolo

    Hello , I’m using the code for the automatic resizing of photos for this page , http://www.domusdesignstore.it/, but the photo of the first post is not displayed correctly , as the part relating to the size is not in the right way . You can fix ? Excuse my English by automatic translator !

    1. Hello. This code should only be used for Bloggers Popular Post gadget images. The tutorial here would be better suited but you will need to edit it for your customised template.

  4. Revieswsok

    Third one is amazing and its works like a charm its very simple thank you very much

  5. Great job..last one is great…Thanks

    Nessa

  6. Thank you!! I spent all day looking for an answer to this problem and your post answered/explained it best!

    1. So glad it helped Hebah!

  7. Thankyouuuu so much 😀

  8. Thank you so much for posting these solutions. Can I ask though, how do I tell which one of the solutions will work for my blog as I’ve no idea which format my blog is using? Is there an easy way of finding out what the format is?

    Thanks again,
    Florence

    Ps. I’ve previously got around the blurry problem by uploading photos to Flickr, but I’d rather upload them directly.

    1. Hi Florence. If you right click on your blog and click view source code/page source, scroll down until you find an image in your blog post, you can see which format your images are. Yours (see here) are the older format so the link in step 1 will help you.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.