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.
45 responses to “How to fix blurry images on Blogger”
Thank you so much for this post! I have been having this problem recently and this has worked! So thanks!
No problem, hope it helps!
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
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?
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! 🙂
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
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.
How would resize the pin-it button after increasing image size
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! 🙂
Perfect tutorial! I just edited one of my posts, and the picture quality has drastically improved. Thanks so much for these tips, Elaine.
Glad it worked so well for you Robin!
1st post I’ve had the problem with. Genius – thankyou!
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!
Awh that’s great, so glad it helped 🙂
Thank you so so much for posting this! This is exactly the problem I’ve been having and could not figure out WHY.
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
Awh so glad this helped you Andrea! 🙂
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
Hello Charlotte. Try step 2 of this tutorial to reset the image quality 🙂
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!
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
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.
You’re a genius! I got really desperate seeing what Blogger has done with my photos 😀 your post helped a lot!
Thanks so much! You just saved my bacon 🙂
This was so helpful! Thank you so much 🙂
Thanks so much for this fix! So simple….but I couldn’t figure it out.
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!!
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.
That was embarrassingly simple.. Thank you though you saved so much confusion!
Thank you so much!!!!!!
God bless you, guys!
You helped me!!
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!
What size would you recommend when it comes to resizing the photos in photoshop or using the app resizeit?
Hi Sanniyah. It’s personal preference, but the max-width should ideally be the width of your blog post.
You saved my life! Thank you ❤️❤️
Hope it helped Sara, love your style!
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.
Yes, it’s advised to resize and compress your images before uploading them to your blog for the best result.
Thank you soooooooo much this has literally saved my life!!!!!!!
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 🙂
So glad to hear it Lisa, thank you for taking the time to comment!
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.
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!
Wow!
Thanks a lot there! You just saved me!
Thanx helped me a lot.was able to fix some of important images
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. 🙂