Thursday, April 29, 2010

How to post an image in its original size on Blogger or "Blogger scales down my images"

In this post I will explain why Blogger scales your images down and how to post an image in it's original size in Blogger.

Why this happens? By using a Blogspot blog you receive an option to upload photos directly to your blog from the editing interface. The photos will be stored in your Picasa account. However, Blogger restriction for this is that it doesn't allow you to hotlink to your photos in full size - the maximum hotlink size of your image is 800x800.

Even more. By default, even if you choose "Large size" when you upload your photo, it will still return you a link to 400x400 images, and it especially hurts if you want to post some code snippets or precise pixel images.

What to do? There are some good news though. Most of the Blogger posts aren't more then 800 pixels wide (and even if they are, you should always think about how it's gonna look on a display of someone who doesn't have 1600x1200 resolution - you also have right and left columns that hog the display space, right?)

To make your images/pictures/photos look fullsize in your blogger posts you need to edit the link to this picture. Once you upload an image from the editor interface, the code for the image will look like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY/
ZZZZZZZZZZ/s1600-h/my-sample-image.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY
/ZZZZZZZZZZ/s400/my-sample-image.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_UUUUUUUUUUUUU" /></a>

Where UUUUUUUUUUU, V, WWWWWWWWWWWW, XXXXXXXXXXX, YYYYYYYYYYY and ZZZZZZZZZZ will be some mixed digits/letters.

See the text s400 that I've highlighted here in green? That's what you need to change. Change it to s800 and you are done.

Update: Blogger has recently started to add width and height into the tag, so now you also have to remove them. Just look for the text height="XX" and width="YY" and remove it before publishing the post.

This guide will help you to post full-sized images to your BlogSpot blog, if these images have less then 800x800 resolutions. If you need to post a bigger image — use services like imageshack. There is a great list of image hosting sites available on the Blogger templates blog. I wouldn't recommend to use Photobucket as it has some PhotoBucket image hosting issues though.

That's it. Enjoy.

No comments:

Post a Comment