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.

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

2. Typically websites like Flickr and Photobucket are better than Blogger when it comes to hosting images in terms of quality and using cleaner code. Simply upload the image there, get the URL and paste it into your post on Blogger. Your images will usually load quicker when hosted by Blogger though.

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

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

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

33 comments

  1. Lori / Adventures of a Sick Chick on

    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

    Reply
    • Elaine M on

      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?

      Reply
      • Lori / Adventures of a Sick Chick on

        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! ๐Ÿ™‚

        Reply
  2. omotola on

    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

    Reply
    • Elaine M on

      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.

      Reply
  3. Charlotte on

    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

    Reply
  4. Ochi on

    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!

    Reply
  5. Sara Belleza on

    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

    Reply
    • Elaine M on

      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.

      Reply
  6. Erin on

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

    Reply
  7. Alison Kinsey on

    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!

    Reply