Thursday, July 14, 2011

Poor Image Quality on Blogger

I have been really frustrated lately at the image quality of the pictures I post.  I will post a crisp, clean image to my blog and it comes out looking flat, slightly pixelated and compressed on my post.

I wasn't sure if it was something I was doing wrong in the uploading, or if it was something that was happening to my images when they were posted.  I thought perhaps it was the method I used to reduce the image resolution before posting (I do this for two reasons: for people viewing my blog that may have a slower internet connection and have trouble viewing large files, and also so that I don't use up all my allotted space on Blogger!). 

So I did an experiment and uploaded the same image three times in one post...one that was the original, full size image, one at half the resolution, and one at 1/4 the resolution.  They all looked exactly the same when viewed in the post.  I had discovered my answer...this was not my problem!

So I googled around and found that others were having issues with the poor quality of their images on Blogger.  (Now I am slapping my forehead that I didn't just Google this sooner.  It was such an easy fix!)

I am sure there are other ways to address this issue, but I saw a noticeable difference when using this one.  Upload your image, then choose the Edit HTML tab.  Look for something in the code of your image that says something like "/s400" (the number might be different, in some mine said /s320). Delete that part of the code (including the back slash).  That is the step where Blogger compresses your image. 

This first image is before I removed the code:


And this is after I removed the code:


In this particular image, the only thing in sharp focus in his face and that is where you will see a noticeable difference in quality. 

One of the frustrating things about this approach is that you have to go in and delete it for every single
picture.  Which is kind of a beating if you utilize a lot of images in your posts, so if anyone happens to know a way to get around this please let me know!

Here is another example with an image from a recent post, just in case you couldn't see the difference in the first one...

Compressed, Pixelated, No Bueno

Much Cleaner and Crisp, especially in the faces

Last example, and then I am off to reclaim the photographic integrity of my images in my recent posts. I promise I am not as OCD as this post makes me sound... :-)

No Bueno

Bueno

Maybe this can help a fellow blogger, too!


6 comments:

Jen Price said...

That is frustrating! I use Flickr instead of uploading straight from Blogger. I wonder if it makes a difference.

Heather said...

Thank you, Courtney! I just read this and will applying your strategy to my blog as well. What a pain, though! Have you tried moving pictures around while posting also? Surely there IS a better way!

Juise said...

Thank you SO much for posting this! It has been driving me up the wall, being so happy with some of my especially clean, well lighted photos, and then being traumatized by what they look like in my posts. I tried for quite awhile to find a way to fix this, starting, like you, with trying to figure out of it was my resizing that was messing things up, even though the images were still clear on my hard drive *and* on my upload.

I had given up and become resigned to being saddened by it until I posted today what was a sweet picture of my daughters giving their Papa a goodbye hug before work, and was so angered by what I ended up getting that I decided to search for a fix again and found your site. I am so happy!

I am going to have to go back through my posts as well, ugh. I know this is probably obvious, but I didn't think of it until editing my second post, (containing a ridiculous amount of photos - 40!) but it goes much quicker if you use ctl-F (find) and search for /s, delete, and find next. It didn't exactly fly by, but it sure beat scanning through all the html. :)

Thanks again! I kind of love you right now. ;)

GlamourDollLottie said...

Hey I know this is a year old but I tried doing exactly as you did but to no avail, there's no difference what so ever but the pictures I'm posting are of high quality
I've tried posting straight onto blogger and aslo from photobucket but there's no difference
either I'm doing something wrong here, or it doesn't work for me

do you know if there are any other ways of improving the quality?
Thanks x

Juise said...

GlamourDollLottie,

Yes, they have changed it so that simply deleting no longer works. I found that now instead of removing the part of the code that says /s(number) you can instead change the number so that your image is compressed the least amount as possible.

When I experimented with it, the highest I could go was 2000, so now I go through the code and switch all of them from /s 600 (or whatever it is put as,) to /s 2000 and that seems to do the trick.

As an additional note, you will note that there are two links in the HTML for each image, the first of which is always compressed at /s 1600. You do not need to change this one. I use "find" on my browser and search for /s, then change every other one.

Rachel said...

Hooray, you are my favorite! I usually upload my photos to Flickr and then copy and paste the code from there (the image resolution is great), but sometimes I just want to quickly upload something from my computer without first going through Flickr - I usually avoid doing that, though, because the image quality always drives me insane! This was SO helpful, thank you!