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 Comments

  1. Perfection – thank you – this was such an easy fix!!!!

  2. So happy to find the HTML to fix the blurry profile picture! Thanks so much. It fixed the problem. <3

  3. Amazing thank you so much for this info. xoxo

  4. A million times, thank you!! This fix worked perfectly.

  5. This isn’t working for me! :( this is the 3rd one I’ve tried now! It was like this before and I’ve recently changed my layout, sorted the blurriness, and then yesterday it came back…

  6. It also isn’t working for me – I tried the original code and also changing to img-circle but unfortunately is not working…

  7. Ell

    It’s not working for me either. :/ The profile pic on blogger seems to rescale to a tiny pic when I upload it.

  8. Thank you so much, nice not be blurry anymore!

  9. Hi! This isn’t working for me :( . I’ve also tried with the img-circle code and it didn’t work.

  10. 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

  11. Maddi

    hi, I tried this but still ca’t seem to stop it from being blurry on the new blog I’m trying to set up

  12. 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!

  13. Thank you so much for this!!

  14. Thanks so much, this was driving me insane!!!

  15. Thank you! This worked for me

  16. Chesson

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

  17. AFK

    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.

  18. Thank you so much, so simple!

  19. Thank you so much, what I thought was going to be a nightmare to fix, turned out to be such an easy fix!
    Caitie x
    http://www.what-caitie-did.blogspot.com.au

  20. Cam

    Thanks for this tip, but sadly it doesn’t seem to work for me… could you help me out? This blurriness is driving me crazy

  21. admin

    Hi Cam,

    The original code with “profile-img” will work on your blog. Don’t use the “img-circle”.

  22. 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!

  23. 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.
    Blessings,
    Joanna

  24. Seriously!! THANK YOU SO MUCH!! such an easy fix!

  25. Kairi

    Hi! I did everything according to the instructions but unfortunately it doesn’t work… I’ve also tried with the img-circle code. Do you have other recommendations? Thanks a bunch!
    http://www.amsterdamiseerunud.blogspot.com

    • admin

      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.

      • 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…

        • admin

          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.

  26. 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!

    • admin

      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 :(

  27. I tried with both the profile & image circle codes– I know I am using a different template though. Which code should I be using?

    • admin

      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.

  28. Thanks so much for this!

  29. Thanks for this! My blurry picture has been bothering me for ages!

  30. Thank you so much for this! I’ve tried everything and it was as simple as this code? lol You are heaven sent my friend :)

  31. Same problem! I added the gadget with HTML code box below the ABOUT ME gadget. No change. Help?

  32. Never mind! Finally fixed my problem AND enlarged my profile photo as well. :-)

  33. Thank you so much! Such an easy fix! :)

  34. Cool .. This works on my blog.
    Thanks a lot.

    Jace | LaagPaMore.blogspot.com

  35. 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!!

  36. Tested it but now working any tips to do this ?

    • admin

      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(/s\B\d{2,4}/,'s' + '256-c'));

  37. Where i will put this code ?

    • admin

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

  38. 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.

  39. 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.

  40. Thank you sooo much!! My photo was so blurry for so long and i couldn’t work out why but this worked!! :D Xxxxx

  41. Thank you, Thank you, Thank you!!! I finally was able to fix my blurry profile picture!

  42. Please help! I barely know how to work the internets. I tried this and it didn’t work. Did I do it wrong?

  43. i’ve been popping my eyes out for this code , thank you very much!

  44. Thank you very much for the simple solution!

  45. Perfect!! Thank you so much!

  46. I fixed the about me picture using the code on my web version but the mobile version is still blurry?

  47. Thank you so much for posting this, such a quick & easy tutorial to help out with an annoying bug.

  48. Thank you for an EASY fix!

  49. hi! i tried both profile img and img circle but it isnt working for me. kindly help i added the html in the side bar.
    http://desipakvan.blogspot.com/