Monday, August 1, 2011

Blogger's Fuzzy Photo Problem

I've spent most of my afternoon today trying to figure out why my uploaded photos on Blogger have been looking so awful lately. If you have a Blogger blog, you may have noticed the same issue: increased pixelation, blurriness, etc. The maddening part is that if you click to enlarge the photo, it looks fine. However, the scaled version in the blog itself? Crapsville.

John and I did some digging, and discovered we're not the only ones to notice this issue, but so far we've seen no official comment or explanation from Blogger. From what we've read, the problem began within the past month or two, so it's possible a lot of bloggers simply haven't noticed yet.

Just to show you how bad it is, take a look at this photo I uploaded today:


Now look at the exact same photo, in the same size, only hosted on Flickr:

IMG_0216

It's like seeing through a new pair of glasses, huh?

Unfortunately, this is just the latest in a growing pile of problems with Blogger of late, and I'm sad to say I can no longer recommend the platform in good conscience. It's been one frustration after another here the past several months, and we've been working hard to find a long term solution (news on that coming soon, I hope).

In the meantime, I'll probably be hosting all of my Epbot photos on Flickr from now on. It's an additional step and a real pain (I just spent two hours re-uploading an entire photo post - arrrgg), but when you've worked so hard at making your pictures look pretty, dang it, you want it to show!

Now I can only hope that you all can see Flickr photos, since I know some workplaces have those servers blocked. Let me know in the comments if you can't see the second photo, won't you?

[UPDATE] - Sarah in the comments just offered an excellent suggestion: if you convert all of your photos to .pngs before uploading them, the loss in quality is reduced. We just tested it out ourselves, and did see an improvement - although nothing nearly as impressive as the Flickr-hosted photo. Still, it's a good option for anyone still wanting to use Blogger's hosting. Thanks, Sarah!

41 comments:

  1. I can see both photos just fine. And, wow, that's a big difference in photo quality! Although, I, too, have a Blogger blog but haven't noticed such an issue. Of course, my photos tend to be blurry anyway so maybe that's why :-)

    ReplyDelete
  2. I can see both photos (but I'm also at home). I always host my photos on flickr- mostly because I just use my crappy iphone camera and can upload them straight to flickr then grab them, for me, that's really easy. Are you using blogger or blogger in draft? I'm using the second and about a month ago, my dashboard view changed, the slide bar on the side no longer has arrows, so it's more difficult to use. I think they're working though some things. Who knows.

    ReplyDelete
  3. My workplace must be the opposite of most people's - the blogger photos are blocked, and the flickr ones come through!

    Very frustrating about the picture quality, though. I hadn't noticed it, now I'm going to have to inspect my blog and possibly start hosting on flickr as well :/

    ReplyDelete
  4. Flicker is blocked at work, so I can't see the second photo. :(

    ReplyDelete
  5. bother--I have not had much trouble with blogger, but then I only do one or two a month. My friend in the UAE used it and then switched to Word Press cuz the UAE had issues that blogger couldn't avoid (politics and such..). good luck with whatever solution you come up with! I'll still follow you!

    ReplyDelete
  6. There seems to have been a bit of an exodus from Blogger lately. I left due to their lack of flexibility/functionality on the free end of things. Another friend just migrated to Wordpress.

    ReplyDelete
  7. Looks like they run another .jpg pass on the photos for display on the official post. For what it's worth, clicking through the link on each of them gets you to the nice, pretty high res version in both cases.

    ReplyDelete
  8. That first photo looks worse than what facebook does to photos. . . and that is sad. :o( So sorry you have to deal with blogger murdering your photos. They are so gorgeous, so I'm glad that you'll be moving to Flickr, but I am really sorry for the hassle that is for you.

    ReplyDelete
  9. Hi Jen, I had a similar problem with my photoblog and when I did a bit of poking around I found a help thread (not that I can find it now) which implied that blogger was using a low res image instead of the full res image in the blog post. If you look at the html tab, once you've inserted your photo, you should see something like this:

    href="http://2.bp.blogspot.com/_9ltIAs-ZwqI/TSJQj81m5FI/AAAAAAAAHkw/PMDKLEccFjc/s1600/DSC_0380.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="265" src="http://2.bp.blogspot.com/_9ltIAs-ZwqI/TSJQj81m5FI/AAAAAAAAHkw/PMDKLEccFjc/s400/DSC_0380.JPG" width="400"

    I know - it looks a mess, but if you look closely you should see 2 paths to your picture and in the first there is a section that says /s1600/ and in the second this is replaced with /s400/ - this refers to the quality of the image used and if you swap the s400 for s1600 in the html the pictures suddenly look soooooooo much better. It was such a relief when I figured it out. Hope this helps you too! -- Rachel

    ReplyDelete
  10. FTR - as a Wordpress user, similar issues have been cropping up over there too. :o( I've found that *other* people see my images fine, but through my home computer, everything is pixilated and weird looking. I hear the frustration.

    ReplyDelete
  11. I can't see the second one :(

    ReplyDelete
  12. The irony is that the blogger photo doesn't show up in my reader, but of course the flickr photo displays fine. Grr, blogger.

    ReplyDelete
  13. Oh, Blogger... why must you be such a pain? I'm a graphic designer and several of my clients use this platform, so I'm constantly having to jerry-rig my creation process to make up for what Blogger lacks. I've found one solution that circumvents the need to externally host photos, and thankfully it's pretty simple: save your images as PNGs instead of JPGs — it's a lossless format, which means that images can be compressed without losing quality. (That blurriness that you're seeing in your photos is artifacting from compression.) Thus far Blogger hasn't found a way to destroy my PNG uploads.

    There are some minor drawbacks to the PNG format, the main arguments against them being that the file size is bigger (though often not by a whole lot), and PNGs are "meant" for line art, text-heavy images, and images with few colors, rather than for photos. You can Google for full lineup of pros/cons.

    Ultimately, I've found that the cons aren't remotely "bad" enough to warrant all the extra work messing with external hosting, changing blog platforms, etc. PNGs are the best way to easily beat the Blogger fuzzies. So, maybe give that a shot? In Photoshop, the optimal way to do it is Save for Web > Preset > PNG-24.

    Keep us posted!

    ReplyDelete
  14. Annnd back for another round of thoughts, which actually touch on a whole 'nother issue that's happening here.

    The first image of your post is actually only 267x400 pixels, though it's blowing it up to display at 400x600 pixels — that alone will royally screw up your display quality. (The Flickr one isn't being scaled at all — it's 400x600 straight through.) As another commenter noted, when you click on the first image, it takes you to the sexy bigger version (1000x1500px), but the hidden fact in all this is that the smaller image is actually pretty nice quality, too, when you view it at its native size... it's just getting blown up and distorted. (That link will take you to the image on its own; you can also do this by right-clicking your image and selecting "open image in new tab" or whatever your browser's equivalent is.)

    Now, the question is: where does the up-scaling of the smaller image happen, with Blogger or the blogger? :)

    ReplyDelete
  15. Flickr is blocked at work for me, but so is blogger and most of wordpress.com (meaning all the design elements and photos), so unless you're planning to host independently, I probably wouldn't be able to see the photos at work anyhow.

    I just plan to read the posts at home. :)

    ReplyDelete
  16. whisper in the cornfields:
    If you move, they will follow.

    ;)

    -Barbara Anne

    ReplyDelete
  17. The only difference I see is the flikr one looks brighter... Of course, I also don't have my glasses on...

    ReplyDelete
  18. Hmmmm. A few (MANY) years ago I was trying to show a friend a photo of which I was particularly proud (here, if you're interested, though you'll have to click on the photo to see it full-sized), a blurred photo of a friend's band taken without a flash. But when he clicked on it, what he got was a blocky, pixellated mess, instead of a smooth, blurry mess. It turned out it was a setting on his laptop that was failing to display images in full resolution, apparently as a way of saving...something.

    I guess it's possible that Blogger/Google has reduced the resolution of displayed images in an effort to save server space, or something.

    ReplyDelete
  19. @Sarah - We just gave the .png trick a shot, and saw a slight improvement. It took us a minute staring and comparing, but it's definitely there! However, put in the same post with the Flickr-hosted one, the Flickr pic still blows the .png out of the water for clarity and vibrance. Since it's just as much of a pain for me to convert all my pics to .pngs as it is to upload them to Flickr, I think Flickr still wins that fight.

    (Thanks for the tip, though - I think I'll amend the post to include that!)


    And you're right on your second point: Blogger's largest upload size is 400 pixels, so if you want it larger than that you have to drag the corner & upsize the pic that way. (Or change the size in the html, which does the same thing.) On Epbot I've always upsized everything to 500, because 400 seems too small. For this post I went up to 600 to make the comparison easier - and I upsized the Flickr pic the same way, by dragging the corner. The interesting thing is that the Flickr pic has apparently not been scaled by the upsizing, where the Blogger one has. (EEEnteresting...)

    So, bottom line, even if the Blogger pic looks better smaller, I don't *want* it smaller - and if larger pics will always be blurry by design, then I'm still stuck with my original problem. What's the point of uploading a big beautiful picture if Blogger won't allow you to *show* a big(ger) beautiful picture in your post? :/

    ReplyDelete
  20. I feel so vindicated! I've been thinking the same thing on my blogger acct (paid) and sheesh! I just thought I was "seeing things."

    ReplyDelete
  21. The Blogger image is physically smaller, so it is fuzzy because your browser is making it larger. However you're creating the images, you're taking a thumbnail and telling the browsers to display it larger than it is.

    http://4.bp.blogspot.com/-T7lN0A3870s/TjcRQfCxKSI/AAAAAAAAXBs/LCe7daKFegM/s400/IMG_0216.jpg

    http://farm6.static.flickr.com/5069/5888366384_039f9d6f27.jpg

    ReplyDelete
  22. If you click on the blogger image link, the photo looks perfect.

    What it is is a thumbnail issues. You can probably tweak the html for the blogger picture to make sure it is displaying the following url:
    http://4.bp.blogspot.com/-T7lN0A3870s/TjcRQfCxKSI/AAAAAAAAXBs/LCe7daKFegM/s1600/IMG_0216.jpg

    ...and not some other thumbnail created image. I've done this a couple times and it has worked. I just made sure the img src went directly to the location on your blogger server. Then re-size it afterwards. It will save you the step of having to go through flickr.

    ReplyDelete
  23. I suspect the PNG trick works because PNG is lossless, so a PNG image which is 400 pixels high has more information than a compressed JPG image of the same physical size. You're taking a large original, converting it to a PNG which has more detail than a JPG, and when you tell the browser to display it larger then there is more detail to start from.

    But don't tell our browsers to display at a size larger than the image, you're just going to have people seeing different poor quality images (depending upon how their browsers decide to add missing detail).

    ReplyDelete
  24. I don't know if this helps but on my iPhone both photos are identical.

    Mary

    ReplyDelete
  25. I feel your pain. I've been quite frustrated with blogger as of late. Thanks for the tip with flickr, although I do hate the hassle. Thanks for sharing so much awesomeness on your blog!

    ReplyDelete
  26. Hey Jen,
    My work is one of the places that blocks Flickr, but I get around it with a 3G iPad :) It still irritates me, though, because I also have a Blogger photoblog and I'd prefer to host on Flickr - though this is the first I've heard that the Blogger photos look worse.

    Thanks for pointing that out. I have been frustrated by Blogger as well at times.

    However, one thing that I think is worth mentioning is that apparently there is a major renovation of Blogger going on, to make it more functional and integrated better with the rest of the Googleverse. Might be worth sticking around to see how that turns out...

    ReplyDelete
  27. I don't know if you write your posts in Blogger or use something else, but a while ago someone told me that I should give Windows Live Writer a shot. It's free and has all sorts of neat things you can do with the images. ^_^

    The reason I bring it up is because it also has a feature for adding pics from flickr, so it might speed up the process a little bit.

    ReplyDelete
  28. I hosted my 365 blogger project on Flickr. Best quality for sharing. It's a couple of extra steps, but worth it. ;-)

    ReplyDelete
  29. I've noticed this, too, so frustrating! All the times blogger has been down, eaten people's comments, screwing around with people's photos... where's the results of whatever you've been doing, Blogger?! Blargh.

    ReplyDelete
  30. I can't see both because flickr is blocked on my computer, and I can't unblock it because my mom won't let me. ):

    ReplyDelete
  31. Flicker blocked here.

    Wow, I hadn't paid attention to the crappiness of the photos...even on my own blog! What's really annoying to me is I have picasa set up to post at 400x600. So why's it reducing to 200x300??

    ReplyDelete
  32. My 16 yr. old son (a completely genius computer geek) says:

    "It probably converts everything into .JPEG images to save space/ However, jpegs also lose quality over time. Every time they're viewed, they compress a little more, until there's a noticeable difference."

    He says every time a viewer looks at it, it compresses a little bit more in order to send it to the viewer. With a large volume of viewers (which this blog has) it would blurrier and blurrier. He says blogger probably automatically converts to JPEG, but try the .PNG format for images if possible.

    ReplyDelete
  33. I'm seeing an issue on both image, which others have touched upon. Both images are set to be shown at a different size than the image file is. This means the viewer's web browser will resize the image (often poorly, with bad results) to fit into the resize.

    The results aren't as bad when comparing both images (Blogger and Flickr) at 333x500:

    http://farm6.static.flickr.com/5069/5888366384_039f9d6f27.jpg

    http://4.bp.blogspot.com/-T7lN0A3870s/TjcRQfCxKSI/AAAAAAAAXBs/LCe7daKFegM/s500/IMG_0216.jpg

    The reason I picked this size is because that's what size the linked Flickr image is, although it's being forcibly resized on the blog post. I set the Blogspot image in this comment ot the same height by setting the height to 500 in the "s500" part of the address.

    The Flickr image is still better, but they're much more similar when compared at the same size, and not resized by a web browser. (Flickr's is sharper, and Blogger's is more saturated.)


    unseelieme: Your son is almost right. Viewing a JPG image doesn't change the quality of the image. What your son is thinking of is the quality loss when you re-save a JPG image. JPG is a lossy format, so every time you save an image in JPG format, data (quality) is lost. (Being myself a computer geek who once had a misconception about the lossiness of JPG, I recommend pointing this out to your son.)

    ReplyDelete
  34. I can't see Flikr-hosted photos when on my work network. But as of last week my work network also blocks Google Reader, so problem solved, I supposed. I have to do all my blog reading in my free time. That is MADNESS!

    ReplyDelete
  35. I saw one thing that hadn't been explicitly mentioned in the comments: there's no 'maybe,' Blogger is DEFINITELY resampling the photo that it shows in the thread.

    Right click on the Blogger photo and choose 'Properties' - the image size is 28kB. Very small.

    Click on it, see the big pretty version, and check its properties the same way - 227kB

    Right-click on the small version from Flickr - 160kb, this gives a much prettier JPG!

    Check out the 'original photo' in Flickr and you see that the original file size is actually over 2MB - a very big, clear photo.

    Blogger is downsampling twice: Once at the full-size upload, and again to generate the 'thumbnail' that it displays in the post. And this *has* been mentioned - when you downsample a JPG twice in a row, bad things happen. Odds are very good that Blogger is doing this to both save space on their servers while improving page load.

    .. and the result looks awful. Flickr uses a much gentler hand with the downsampling to create the thumbnail view, and doesn't touch the original photo.

    ReplyDelete
  36. I've noticed the same thing! I'm glad I'm not the only one!

    ReplyDelete
  37. I can't see the second photo...boo! But I think the first photo looks good :)

    ReplyDelete
  38. i'm having issues posting to blogger, let alone adding images... Think there is an issue with javascript and blogger

    ReplyDelete
  39. This problem is absolutely nonsensical. I cannot believe I am 2hrs into trying to display and simple image with its original quality. Good grief!

    ReplyDelete
  40. I am so unbelievably frustrated right now. I have a 702px wide image of text + artwork that is crisp and clean, exported as a PNG, then uploaded to Photobucket, and it STILL looks blurry in Blogger. To make matters worse...the image looks crisp only down the center in spots...the further out you go the fuzzier it gets. I am so angry right now, as I've taken so many steps to ensure it looks crisp(my Design page). On my sidebar, however, that problem doesn't happen.

    ReplyDelete
  41. I have been noticing this fuzzy picture with blogger for a couple of months and it has been driving me crazy. I use a pretty good compact digital camera to take all of my photos and they are really clear. Once I upload them they turn out incredibly fuzzy. Its making me really mad. I wasn't sure if it was my computer's editing program or blogger.

    www.thefancyfashioncastle.blogspot.com

    ReplyDelete

Please be respectful when commenting; dissenting opinions are great, but personal attacks or hateful remarks will be removed. Also, including a link? Then here's your html cheat sheet: <a href="LINK ADDRESS">YOUR TEXT</a>