<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>EM &#187; image resizing</title>
	<atom:link href="http://www.ericm.ca/tag/image-resizing/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ericm.ca</link>
	<description>Here lies random</description>
	<lastBuildDate>Tue, 07 Sep 2010 13:45:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Prevent Blogger from resizing images</title>
		<link>http://www.ericm.ca/2009/10/20/prevent-blogger-from-resizing-images/</link>
		<comments>http://www.ericm.ca/2009/10/20/prevent-blogger-from-resizing-images/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 05:55:31 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[Blogger]]></category>
		<category><![CDATA[image resizing]]></category>
		<category><![CDATA[Picasa]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://ericm.ca/?p=132</guid>
		<description><![CDATA[Images that are uploaded in Blogger are stored at Google&#8217;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! Interestingly enough, the image code that Blogger inserts into your blog post are modified. Instead of [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.ericm.ca%2F2009%2F10%2F20%2Fprevent-blogger-from-resizing-images%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.ericm.ca%2F2009%2F10%2F20%2Fprevent-blogger-from-resizing-images%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Images that are uploaded in <a href="http://www.blogger.com/">Blogger</a> are stored at Google&#8217;s <a href="http://picasaweb.google.com/">Picasa Web Albums</a> at its <em>original</em> file size and dimensions. If you login to Picasa with your Blogger account, then lo and behold, you shall see your original images!</p>
<p><img src="http://ericm.ca/wp-content/uploads/2009/10/blogger_images_picasa.png" alt="blogger_images_picasa" title="blogger_images_picasa" width="314" height="70" class="aligncenter size-full wp-image-152" /></p>
<p>Interestingly enough, the image code that Blogger inserts into your blog post are <em>modified</em>. 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. </p>
<p>Displaying/linking to full-sized images is pretty simple since we know that our original image files are stored on the server &#8211; we just need to access them! I have 2 solutions on how to <strong>display full-sized images in Blogger</strong>.<span id="more-132"></span><br />
<h2>Posting images in their original sizes with Blogger</h2>
<h3>Alternative 1 &#8211; Using Blogger</h3>
<p>The image code that Blogger returns to you when you upload and insert an image will look similar to this:</p>
<blockquote><p>
<strong class="code">&lt;a href=&#8221;http://1.bp.blogspot.com/a_bunch_of_random_characters/<strong class="location">s640</strong>/image.jpg&#8221; imageanchor=&#8221;1&#8243; style=&#8221;margin-left: 1em; margin-right: 1em;&#8221;&gt;<br />
&lt;img border=&#8221;0&#8243; src=&#8221;http://1.bp.blogspot.com/a_bunch_of_random_characters/<strong class="location">s640</strong>/image.jpg&#8221; /&gt;<br />
&lt;/a&gt;</strong></p>
<p>Note: In the above code, I removed a bunch of numbers and letters and replaced it with &#8216;a_bunch_of_random_characters&#8217; for simplicity. </p></blockquote>
<p>The important part of the code is the <strong class="location">s</strong> followed by the number. In this example, it is <strong class="location">s640</strong>. This variable may contain different numbers such as s400 and s800.</p>
<p>All you need to do is replace the original variable with <strong class="location">s1600-h</strong> in both the link and image tags. Although I am not 100% sure, I believe this should always link to your original file size.</p>
<h3>Alternative 2 &#8211; Using Picasa</h3>
<p>Login to <a href="http://picasaweb.google.com/"">Picasa</a> with your Blogger account. As mentioned above, all images uploaded in Blogger is actually hosted here.</p>
<p>At this point, you have <strong>two options</strong>. The first option doesn&#8217;t directly solve our problem <em>per se</em>, but it will still give users access to the full-sized image and it will give you some additional features. The second option <em>directly</em> solves our problem without the bells and whistles.</p>
<h4>Option 1</h4>
<p>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 <strong class="location">Link to this Photo</strong>.</p>
<div id="attachment_149" class="wp-caption aligncenter" style="width: 255px"><img src="http://ericm.ca/wp-content/uploads/2009/10/Picasa.png" alt="Picasa&#039;s image options" title="Picasa" width="245" height="185" class="size-full wp-image-149" /><p class="wp-caption-text">Picasa's image options</p></div>
<p>You can either use the <strong>Link</strong> or the <strong>Embed image</strong> code generated for you. Embed image gives you the added bonus of using thumbnails which saves you the hassle of creating them yourself. </p>
<p>Either way is fine, but you should note that both links and embedded images will <b>link to a scaled-down version of your image</b> and that <b>the image will be displayed within Picasa&#8217;s photo viewer</b>. Of course, users can still click on the <strong>Magnify Glass</strong> icon to view the original size.</p>
<h4>Option 2</h4>
<p>While viewing an image in Picasa, click on the <strong class="location">Magnify Glass</strong> icon at the top right until you are viewing the image at its original size. <strong>Right-click</strong> the image and select <strong class="location">Copy Image Location</strong> if you are using <strong>Firefox</strong>, or select <strong>Properties</strong> to find the image location.</p>
<p>This will give you the <strong>direct link to the full-sized image</strong>.</p>
<p>And that is all there is to it. Happy blogging!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ericm.ca/2009/10/20/prevent-blogger-from-resizing-images/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
