How to fix blurry images on Blogger

I had a couple of questions last night about images on Blogger appearing blurry and more pixelated than normal.

I then noticed tweets and comments on the Blogger forum saying the same thing. I don’t know if anything has changed or if it was just a glitch on Blogger this week but here’s how to fix it.

How to improve the quality of your Blogger images

Upload your image to Blogger as normal. Click over to HTML mode in the post editor and search for the image source code. You’ll see the image code within the code for a link. The size is typically on medium to begin with so this is what it will probably look like

<a href="//4.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_o/TNEsvz8Ey78/s1600/DSC_0003.JPG" imageanchor="1"> 
<img border="0" height="213" src="https://3.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_s/aTxsg4rR8W8/>s320/DSC_0003.JPG" width="320" /> </a> 

The s320 is your resolution and it determines the quality depending on the size of the image.

Notice how the link has a value of s1600, so when you click on the image it appears bigger and in better quality. An image with the width of 320px will look fine with s320. An image with the width of 800px will look awful with s320.

How to change the quality

The main options are s320, s640 and s1600 which is the highest quality. You can change that part of the code to be s1600 so it’s

<a href="//4.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_o/TNEsvz8Ey78/s1600/DSC_0003.JPG" imageanchor="1"> <img border="0" src="https://3.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_s/aTxsg4rR8W8/s1600/DSC_0003.JPG" width="800" /> </a> 

or you can remove s1600/ to set it to original so it’s

<a href="//4.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_o/TNEsvz8Ey78/DSC_0003.JPG" imageanchor="1">  <img border="0" src="https://3.bp.blogspot.com/-fS22mVu-urI/VGU2ItTTFII/AAAAAAAAA_s/aTxsg4rR8W8/DSC_0003.JPG" width="800" /> </a> 

How to ensure the best quality

Apart from above, there are a couple of other ways to ensure you’re images are showing in the best possible quality.

Resize your images

Always resize your images before uploading to Blogger and choose “Original Size”.

I know it’s tempting to upload them all and then resize them using Bloggers resize options or using code to manually or automatically alter the size but photo editing software does a way better job than browsers when resizing images.

Plus, allowing your browser to resize it will slow down your loading time. If you are manually or automatically resizing your image by adding the height and width values make sure you are using the correct method and that they are to scale.

If you aren’t sure of the scale just add a width value without the height. The height value will be set automatically. This will ensure that your images aren’t being stretched or squished to fit both constraints you set.

I have a huge list of Photoshop alternatives here and here that will do it for you. There’s loads of apps available in the Apple store for this too, including ResizeIt which is free. You can batch resize multiple images in certain programs to make the process quicker.

Turn off Auto-Enhance

Make sure Google Auto-Enhance is switched off. Even if you turned it off a few months ago, double check as it does sometimes switch back on. Instructions on how to turn it off can be found here.

Save file in correct format

Make sure you’re saving your images in the correct file format. If saving it for the web on Photoshop or a similar program, double check the compression and quality.

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

By signing up youโ€™ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

45 responses to “How to fix blurry images on Blogger”

  1. Michelle avatar

    Thank you so much for this post! I have been having this problem recently and this has worked! So thanks!

    1. Elaine M avatar

      No problem, hope it helps!

  2. Lori / Adventures of a Sick Chick avatar

    I have had an issue with “softened” photos and JPG/PNG graphics and images on my blog (and while viewing many other blogs) ever since I switched to a computer/monitor with retina display. After researching it a bit, I read that this is due to the fact that retina display reads images in lines, not pixels, so any images made up of pixels will appear slightly blurry (I’m not very technically savvy, so please forgive me if I’m not explaining it accurately). Being that a lot of people are now using retina display (it’s a feature of all the latest Apple computers/Macbooks), do you have any suggestions for how to address this issue? I create all my images and logos in Photoshop, and it seems that retina display has become a thorn in the side for lots of designers who work in Photoshop. I thought about recreating all my logos and graphics as vector files in Illustrator, but this is a whole new can of worms considering I’m not a trained designer and have never used Illustrator. Any suggestions? Thanks in advance…

    -Lori
    http://adventuresofasickchick.com

    1. Elaine M avatar

      Hey Lori. I’m not overly familiar with this myself as I don’t have a retina display monitor and use Illustrator for the majority of my images but I’ve had a look into it and asked around a little bit to get a proper answer for you. I had a look at a friends macbook with retina display and didn’t see any difference in web graphics, everything looked pixel perfect! I asked them about their display settings and they said they have it set to scaled best, this shows a smaller space and is probably why they aren’t having an issue with images. So I recommend having a play around with the display settings for your own screen. In terms of getting your images to be high quality for other users – images on retina displays are scaled up 2x, so you could take this into consideration when creating images and test out those options. It’s possible to show different images depending on the device. SVG are the best thing to work with going forward in my opinion, especially for your logo and website graphics. I hope that has somewhat helped?

      1. Lori / Adventures of a Sick Chick avatar

        Thanks so much for your reply! This is very helpful. I will double check my display settings and will see if increasing the size of my photos helps. It also looks like it’s time for me to start learning Illustrator. But it’s good to know that in the meanwhile, you don’t see a difference in image quality on your end. Thanks again…very helpful website! ๐Ÿ™‚

  3. omotola avatar

    Thank you for this post xomisse, but the problem I have with my own blog is the “What’s related section” the links are fine but the images attached are blurry. Can you please guide me on how I could fix this or how i can remove the what’s related post

    1. Elaine M avatar

      Hello. The same issues applies but the solution would depend on how the related posts were added – if they are custom coded or a third party gadget, if you have a Blogger template or custom template, etc.

  4. Talitha Haynes avatar

    How would resize the pin-it button after increasing image size

    1. Elaine M avatar

      Hello! You can add some CSS to stop the pin it button resizing, you’ll find that in the middle of this tutorial. Hope that helps! ๐Ÿ™‚

  5. Robin Kramer Writes avatar

    Perfect tutorial! I just edited one of my posts, and the picture quality has drastically improved. Thanks so much for these tips, Elaine.

    1. Elaine M avatar

      Glad it worked so well for you Robin!

  6. Amber Smith avatar

    1st post I’ve had the problem with. Genius – thankyou!

  7. Madylene avatar

    Thanks so much for this post! I have been having this problem with a few of my posts and have fixed it as per your suggestions and they worked!

    1. Elaine M avatar

      Awh that’s great, so glad it helped ๐Ÿ™‚

  8. Jessie nELSON avatar

    Thank you so so much for posting this! This is exactly the problem I’ve been having and could not figure out WHY.

  9. Andrea avatar

    OMG! Thank you so much! I have been going crazy trying to figure out why my photos look so fuzzy lately. So happy you posted this! Thank you!

    http://www.thefancyfashioncastle.blogspot.com

    1. Elaine M avatar

      Awh so glad this helped you Andrea! ๐Ÿ™‚

  10. Charlotte avatar

    Hi I was wondering if you could help me (so many of your posts already have, so thank you!) My popular post pictures are blurry. I used the popular post gadget on blogger and they’ve been fine for months, then suddenly became blurry. xxx

    1. Elaine M avatar

      Hello Charlotte. Try step 2 of this tutorial to reset the image quality ๐Ÿ™‚

  11. Ochi avatar

    OMG thank you for this! I’ve been having problems posting new articles as this problem has been bugging me for months now. Thank you so much!

  12. Sara Belleza avatar

    Hi Elaine,

    I’m just wondering how I change this to make this constant in all of my photos when I upload, instead of having to do it for each photo in every post I write.

    Thanks, Sara x

    1. Elaine M avatar

      Hey Sara. When you upload the photo via Blogger choose Original Size, that will ensure full quality each time. If you’re uploading an image and choose small / medium / large size and then resizing using CSS (or another method) then that is when you’ll face issues.

  13. MARIA avatar

    You’re a genius! I got really desperate seeing what Blogger has done with my photos ๐Ÿ˜€ your post helped a lot!

  14. Laura Curtin avatar

    Thanks so much! You just saved my bacon ๐Ÿ™‚

  15. mariah avatar

    This was so helpful! Thank you so much ๐Ÿ™‚

  16. Debi Martin avatar

    Thanks so much for this fix! So simple….but I couldn’t figure it out.

  17. Erin avatar

    I am so horribly lost when it comes to figuring out code.. I’ve never had any lessons in it and I’m trying to figure out why my images are coming out blurry when I post them to my blog. They’re appropriate sizes when I save them in photoshop and I haven’t had this blurry problem when I started my little blog. Any help would be amazing!!

    1. Elaine M avatar

      Hey Erin, they’re set to the smallest size. When you upload make sure to choose “original size”, see step 1 above for more details.

      1. Erin avatar

        That was embarrassingly simple.. Thank you though you saved so much confusion!

  18. Victoria Deliu avatar

    Thank you so much!!!!!!
    God bless you, guys!
    You helped me!!

  19. Alison Kinsey avatar

    Hi,

    Do you know how I can fix a blurry HEADER image (only showing up blurry on the mobile template), on my website alisonkinsey.com? It’s driving me bonkers! I tried adjusting your Javascript code for Popular Posts to match the name of the widget for my Header, but that doesn’t work. I confirmed in the URL of my header image that Google is saving it as an s1600. Any ideas or resources? Thank you!

  20. Sanniyah avatar
    Sanniyah

    What size would you recommend when it comes to resizing the photos in photoshop or using the app resizeit?

    1. Elaine Malone avatar

      Hi Sanniyah. It’s personal preference, but the max-width should ideally be the width of your blog post.

  21. Sara Nogueira avatar

    You saved my life! Thank you โค๏ธโค๏ธ

    1. Elaine Malone avatar

      Hope it helped Sara, love your style!

  22. Samuel Philip avatar

    Images with good quality are a nice fit for blog posts. Most especially when it gives an insight of what’s written in your blog post.

    I discovered this after a while though……

    I was always tempted to upload images just as they are, then resize them with using blogger resize option but later along the line, I discovered that those images though had good quality, were too large and it started affecting my blog load time.

    In the real sense even after uploading a good quality image having a size of 1MB, then resizing with blogger resize option. When users open your blog, the browser still loads that 1MB image. That’s data consuming!

    I check my blog on Google PageInsight, the result was horrible.

    I was advised to start making use of TinyPng.com to compress my images. Ever since I started doing that, my blog load time has improved.

    1. Elaine Malone avatar

      Yes, it’s advised to resize and compress your images before uploading them to your blog for the best result.

  23. Emskiex avatar

    Thank you soooooooo much this has literally saved my life!!!!!!!

  24. Lisa avatar

    Dear Elaine,

    Thank you so much for that fix! I was really, REALLY frustrated with my blog images recently and I couldn’t find a way around the problem. I am so relieved that all my images are now crystal clear…thank you so much ๐Ÿ™‚

    1. Elaine Malone avatar

      So glad to hear it Lisa, thank you for taking the time to comment!

  25. GC avatar

    Hi, I’ve always found your blog to be helpful whenever I needed to add gadgets, and extras to my html blogger code. The blog cover on my blog is set to be wide and for some reason the image looks blurry no matter what I do. I’m editing the image on Photoshop and doing everything right, at least I think so, and it’s always blurry. Could you please take a look and let me know what I could be doing wrong? Thanks.

  26. Kate avatar
    Kate

    Oh my goodness, thank you so much! I’ve been downloading and reloading onto my blog 10 years of pictures from Photobucket, who took them hostage in June for $400 bucks a year. Grrrrrrrrrr. When I reloaded them onto my blog they were slightly blurry and I was at a loss. This solved my problem! Thank you!! I was so not looking forward to fishing through hundreds of thousands of pictures on old hard drives to rebuild my blog!

  27. Manjeet Chhillar avatar

    Wow!
    Thanks a lot there! You just saved me!

  28. Aayush avatar

    Thanx helped me a lot.was able to fix some of important images

  29. Su Lee avatar

    Hello!
    Thanks for the post. It’s helped me a lot.
    I’ve just opened a new Blogger blog. Just getting my head around things now. ๐Ÿ™‚