Prevent Blogger from resizing images

VN:F [1.7.2_963]
Rating: 5.0/5 (1 vote cast)

Images that are uploaded in Blogger are stored at Google’s Picasa Web Albums at its original file size and dimensions. If you login to Picasa with your Blogger account, then lo and behold, you shall see your original images!

blogger_images_picasa

Interestingly enough, the image code that Blogger inserts into your blog post are modified. Instead of linking (Blogger automatically links the images to itself) and displaying your original image file, Blogger links to a scaled-down, resized version instead. I believe only images wider than 800px are affected by this protocol.

Displaying/linking to full-sized images is pretty simple since we know that our original image files are stored on the server – we just need to access them! I have 2 solutions on how to display full-sized images in Blogger.

Posting images in their original sizes with Blogger

Alternative 1 – Using Blogger

The image code that Blogger returns to you when you upload and insert an image will look similar to this:

<a href=”http://1.bp.blogspot.com/a_bunch_of_random_characters/s640/image.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”>
<img border=”0″ src=”http://1.bp.blogspot.com/a_bunch_of_random_characters/s640/image.jpg” />
</a>

Note: In the above code, I removed a bunch of numbers and letters and replaced it with ‘a_bunch_of_random_characters’ for simplicity.

The important part of the code is the s followed by the number. In this example, it is s640. This variable may contain different numbers such as s400 and s800.

All you need to do is replace the original variable with s1600-h in both the link and image tags. Although I am not 100% sure, I believe this should always link to your original file size.

Alternative 2 – Using Picasa

Login to Picasa with your Blogger account. As mentioned above, all images uploaded in Blogger is actually hosted here.

At this point, you have two options. The first option doesn’t directly solve our problem per se, but it will still give users access to the full-sized image and it will give you some additional features. The second option directly solves our problem without the bells and whistles.

Option 1

First, click on the image you wish to insert into your blog post. Look to the right and you should see some image options. Click Link to this Photo.

Picasa's image options

Picasa's image options

You can either use the Link or the Embed image code generated for you. Embed image gives you the added bonus of using thumbnails which saves you the hassle of creating them yourself.

Either way is fine, but you should note that both links and embedded images will link to a scaled-down version of your image and that the image will be displayed within Picasa’s photo viewer. Of course, users can still click on the Magnify Glass icon to view the original size.

Option 2

While viewing an image in Picasa, click on the Magnify Glass icon at the top right until you are viewing the image at its original size. Right-click the image and select Copy Image Location if you are using Firefox, or select Properties to find the image location.

This will give you the direct link to the full-sized image.

And that is all there is to it. Happy blogging!

Bookmark and Share
There are currently no related posts
This entry was posted in Internet, Web Development and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>