Thursday, March 17, 2011

Tutorial Thursday: Low Quality Blogger Photo Fix



Some of you may have noticed that if you post pictures via the blogger image upload, that any photos larger than 400px in width come out fuzzy if you try to resize them. Blogger always returns images you upload to a maximum of 400x400. How do we post images that are bigger then?

This is what I mean:


Here's how to fix this:
When you upload an image you get a massive code if you view it under the "Edit Html" tab. Something like this:


<a href="http://3.bp.blogspot.com/-hU4wFkN6P1M/TXAMvJnIMAI/AAAAAAAAAG0/HTRwJCEZjY8/s1600/TutorialThursdays-lowrez.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5579973942485463042" src="http://3.bp.blogspot.com/-hU4wFkN6P1M/TXAMvJnIMAI/AAAAAAAAAG0/HTRwJCEZjY8/s300/TutorialThursdays-lowrez.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 287px"></a>


If you are looking to get the image to the size you've created it (or its true size) you will have to edit a few things. I've highlighted them below.

...img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 287px" src="http://3.bp.blogspot.com/-hU4wFkN6P1M/TXAMvJnIMAI/AAAAAAAAAG0/HTRwJCEZjY8/s400/TutorialThursdays-lowrez.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5579973942485463042" ...


My images are 570px in width, so I change the width to 570px and I delete the height portion (personal preference) -- you can put the image height as well, or delete them both if you want the image to be exact size you've created it as.

You probably knew all that already though right? We go ahead and publish the post and we end up with the fuzzy image seen above. How do we fix that?

We will also have to edit another part of the code:

...img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand; width: 570px;" src="http://3.bp.blogspot.com/-hU4wFkN6P1M/TXAMvJnIMAI/AAAAAAAAAG0/HTRwJCEZjY8/s400/TutorialThursdays-lowrez.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5579973942485463042" ...


You'll need to change the s400 to s800. Voila! No more fuzzy pictures.

*Note: This only works up to 800x800px pictures.

2 Comments:

Jenn said...

brilliant!!!! thank you!!! -jenn

Jen said...

Love this!!!! Love your blog design.

Related Posts Plugin for WordPress, Blogger...