Fix a blurry Blogger Profile Image

Since a few days ago profile pictures on some blogs have started to look blurry. This happened as Blogger changed the default size of the Profile image and now shows a very small 80×80 picture that is later scaled to fit the sidebar and that’s why it’s blurry.

To fix it, we need to change the size of the image taken from Blogger servers. Here’s a simple code, that you need to add to your blog as an HTML/JavaScript gadget (preferably in the sidebar or footer), but wherever you place it, do it BELOW the profile image for it to work. Thank you Shelley for noticing that.

<script type="text/javascript"> var img = document.getElementsByClassName("profile-img"); img[0].setAttribute("src", img[0].getAttribute("src").replace(/s\B\d{2,4}/,'s' + '256-c')); </script>

Copy the code and paste it to a new HTML gadget and you should be all set! Leave the title field empty as you don’t want to have it visible on the blog, do you?



74 thoughts on “Fix a blurry Blogger Profile Image

    1. Hi, I seem to not know exactly where to put it on the HTML “list”. Does it have to go on a specific line? #Help

    1. Hi Nicole,

      I see that in your case you just need to change “profile-img” to “img-circle” and it will work. Your new template is just tagged a bit differently.

  1. I applied the HTML and my pic is still blurry. I don’t know where to find the profile.img to see if that needs to be changed? Can you tell me where to look for that? The blurry pic is not very appealing! :-) TYIA

  2. You are a genius! Just wanted to let others know that first I added the new HTML gadget above my “welcome” gadget and it didn’t fix the blurry photo. Then I dragged the new gadget with the HTML text you gave us BELOW my “welcome” gadget and it fixed it! Yay! Thank you so much!

  3. The blurry picture thing has been driving me crazy! But I still can’t seem to get this fix to work. Any other suggestions??

  4. Hi! For some reason the comment avatars got blurred in my blog, does that have to do with this? I tried this either way but it didn’t work, do you have an idea about the possible problem?

    Thanks so much.

  5. Hello to whoever you are, THANK YOU SO MUCH!!! <3 This has been such a great help for me as I was having a hard time trying to figure out what was wrong and it took me hours to do all sorts of things to my photo before I came across this. You're really nice and helpful!

  6. Hi :)
    I recently changed my blog template and am now starting to upload images again. I notice when I upload them they look clear and look like I can resize them; however, when I publish the images they appear large and blurry. Not pretty at all. How can I fix this. I do a lot of floral work and I would like them to be clear and not so big. Hope you can help me with this and thanks for your help.

    1. Hi Kairi, this depends on the template you’re using. I’ve visited your website but it looks like you’re using a small profile picture, so I can’t see the blurriness.

      1. Thanks! If I click on the profile, the picture is blurry already, and if i click on the picture specifically, it shows up very small. Is there a way to change the small profile picture? I would like it to be the same size on the main page but larger on the profile page…

        1. Try to upload the picture to your profile again. I can see that it’s bigger, but for some reason Blogger uses the smaller version and that’s why it’s blurry.

  7. I restarted my computer and uploaded the photo again but it doesn’t seem to change anything… Thanks for looking into it though, I really appreciate it!

    1. Well it looks like on the profile page Blogger shows images with a 113px limit and there’s not much you can do about it :(

    1. Well that depends on the template. You need to edit the template file to see what class is assigned to the img tag in your Profile1 widget.
      But in your case, the original code should work just fine – it’s profile-img.

  8. I’m having the same problem as well. No matter what pixel size I change my google profile pic to it’s still blurry. I’ve also tried the new html code and that doesn’t seem to work either. Help! Thanks!!

    1. It’s a completely different thing with your template, but this code will work:

      var img = document.getElementsByClassName("avatar-image-container");
      for(i = 0; i < img.length; i++) img[i].childNodes[0].setAttribute("src", img[i].childNodes[0].getAttribute("src").replace(/sBd{2,4}/,'s' + '256-c'));

    1. Place the code between the script tags (as showed in the post) and place it somewhere in the footer of your website.

  9. Works Perfect Thank you very much there is another problem happened from yesterday that anonymous comment avatar become the default blogger one even i there is a code for changing that with a picture that i have designed.

  10. i HAVE FIX THE PROBLEM i just want to ask another question please about adsence as they did not approve my blog because of Insufficient content as my blog was having only one static page so can i make lets say 40 posts in one day with original content and every post and apply for adsence also i have created my blog from more than 3 years.

    1. Hi Alice, It’s hard to say judging from your current blog template, as the picture is just small and not blurry.

Leave a Reply