Blogger has an annoying habit of turning images fuzzy. In my experience, the problem is most noticeable with larger images of text.
I found a solution in a comment on a post about the problem: to remove the fuzz, find /s400/ in the code for the image and change it to /s1600/. Smaller images appear to load with two instances of /s1600/; larger images, with one /s1600/ and one /s400/. Look at the difference. First, with /s400/, notice the fuzziness of the letter forms:
With /s1600/ twice, everything’s clear:
It’s disappointing that Google would set a default that degrades images. But I’m happy to have found a way around the problem.
Something odd: the fuzz is much worse when previewing a post:
Odder still: if you click to enlarge a fuzzy image, you get a clear one. Go figure.
A related post
Google, auto-enhancing images
[Clicking to enlarge won’t sharpen the image of Yeats’s name: that’s a screenshot from Preview, permanently fuzzed. Clicking will sharpen the first image of the poem.]
Friday, February 14, 2014
Blogger’s fuzzy-image problem
Subscribe to:
Post Comments (Atom)
comments: 11
Hi Michael. I copied your post and posted it into my test blog so I could look at it.
(In my Blogger post editor I have two buttons: HTML and COMPOSE. I pasted it into the COMPOSE editor, then switched to the HTML editor so I could read the HTML.) (If I just pasted it into the HTML editor I wouldn't get your images, just your text.)
I see that you set the size of both images to 400x452.
I'm surprised that the s1600 image came out so clear! I have to look into that.
Meanwhile, here's what I think: When you upload an image, Blogger saves I think four versions of it, in four different sizes. Multiple versions in different sizes, anyway.
In COMPOSE mode I can select the image size I want. I'm pretty sure when I select a different size I'm switching between s400 and s1600 and the other sizes blogger created from my original image.
I also think the s1600 image is the original size, same as the one uploaded.
I think the fuzziness comes from resizing an image that Blogger "fitted" to one of its standard sizes. (That's why the clarity of your reduced-size s1600 image surprises me.)
On my blog I can use images 520 pixels wide. I do mostly graphs. So I make the original graph image 520 pixels wide, or just a bit less. This way I can display the original size image on the blog.
Scattered thoughts. Perhaps you can find something useful in them.
ps, "if you click to enlarge a fuzzy image, you get a clear one" because the image you get after clicking is the s1600 image.
Sometimes people copy images in the blog, instead of clicking to get the un-resized image. Their results are not so good.
Forgive me, I'm not concentrating on my grammar and stuff in this comment :)
In goldfishy's comment, the s1600 version is contained in the HTML statement that starts with href="http...".
The s400 version is contained in the HTML statement that starts with img border="0"
The img statement is the one that displays the image. The href statement (really, a href) is the one that handles the link.
The fuzzy image in your blog is displayed by the IMG statement, which has been given the s400 version. The clear image you get (when you click on the fuzzy one) is displayed by the A HREF statement, which has been given the larger s1600 version.
People that know more than I do will be pulling their hair out because I call these things "statements". bye-bye.
It’s all pretty puzzling, isn’t it? I often resize by hand: I’ll open an image in Preview (Mac), find the height to go with a width of 400 pixels, and type those values into the code. Those images seem to come out just fine. I also resize to get small images to fit alongside a few lines of text.
Your explanation of what the two sections of the code do is helpful. Thanks.
Grammar? What’s that? :)
I don't want to be a wet blanket on this, but there are some problems with posting text as images. It doesn't play well with mobile devices, it uses up unnecessary bandwidth and it's completely inaccessible to screen readers, so that blind people can't get any of the content. It's much better to post text as text. Of course, a picture can be worth a thousand words, but pictures OF a thousand words are just not good.
When I post poetry, I use PNGs to preserve lineation in any browser. You’re right that the text is not available to a screen reader — which is also the case with images of advertisements and cartoons and musical notation. I regret that. This image weighs in at 58KB: I’m willing to take up that much bandwidth.
What problem do you notice on a mobile device?
In February, when you wrote this post, I was not having fuzzy-picture problems. But those problems did develop soon after. Also, the source of most of my images (the St. Louis Fed) changed their ways in March, and I am no longer able to get original images in the size I want.
I solved these problems by using the method you describe in the post: use the "s1600" version of the image, and enter by hand the image-height and image-width values that I want.
It works every time, and it works great. Thank you, thank you, thank you.
You’re welcome. And thanks again to EPBOT (“Geekery, Girliness, & Goofing Off”), where I found the fix.
Thank you so much for sharing this. I've struggled with the sharpness on blogger for years. I was beginning to think I was just a bad photographer.
You’re welcome, Barbara. It’s telling that after all this time, Google still hasn’t fixed the problem.
Finally! Eureka! Thank you so much!
You’re welcome, Cristina!
Post a Comment