How To Post Tall Pictures On Blogger

Posting large images (taller or wider than 1600px) is a bit of a challenge on Blogger. This is because Blogger decides to shrink them to 1600px. In practice, I do think there isn't much need in posting images wider than 1600px. However the same can't be said for images taller than 1600px. Infographics for example are almost always taller than 1600px.

As you may know you can choose the size for each image you post from five size options: Small (200px), Medium (320px), Large (400px), X-large (640px) and Original Size (full size with the cap of 1600px).

resize tall image

To post a tall/wide image your only option is to choose "Original Size". But "original size" here holds true only  for images no larger than 1600px. For larger images, they will be resized down to 1600px! No kidding.

Does that mean you might as well give up on posting your awesome 4000px tall infographic? No, that's not necessary because there is still hope. Checkout this post:

How Safe Is Your Website?

Notice how tall the infographic is? (It measures 466px x 2560px. Click on it to view an even larger image, which is the original size of 700px × 3,843px).

Here is how you can post your own tall image or infographic on Blogger:

  1. Upload the image and set it to "Original Size".
  2. Switch the post editor to HTML and locate the code for the image. The code should look something like this:

    <a href="http://1.bp.blogspot.com/-qZOKTEIcGIc/UgeZFJYJkjI/AAAAAAAAEnU/-q7m6mt1dXY/s1600/How+Safe+is+Your+Website1.jpg"><img border="0" src="http://1.bp.blogspot.com/-qZOKTEIcGIc/UgeZFJYJkjI/AAAAAAAAEnU/-q7m6mt1dXY/s1600/How+Safe+is+Your+Website1.jpg"></a>

    The second URL is the source URL for the in-post image ie. the image that appears in your post. The first URL is the hyperlink to another version of the same image, which is viewable separately upon clicking on the in-post image. 

    Notice that both URLs are exactly the same, and they are resized to 1600px tall, indicated by the size variable "s1600" (highlighted in red) in the URLs.

  3. Modify the hyperlink (first URL) so that it links to the original (full) size image. This can be done by replacing "s1600" with "s0". Setting the size variable to "s0" will get you the full size, no matter how big it is. This will let your readers see the full size version when they click on the in-post image.
  4. Next, let's fix the in-post image. To increase the height (thus making the image larger), you simply replace the size variable with a larger value. I know many blogs say that you can only resize up to 1600px, but they are wrong. You can actually resize it up to 2560px (s2560)! Say you want to resize the in-post image to 2000px, then simply replace "s1600" in the second URL with "s2000".

    (You don't usually use "s0" for in-post image because most of the time a full size infographic is wider than your post area.  Besides a  full size infographic takes longer to load due to it's large file size).

    So in the end your image code will look like this:
    (this is the actual code used for the infographic in the demo post)

    <a href="http://1.bp.blogspot.com/-qZOKTEIcGIc/UgeZFJYJkjI/AAAAAAAAEnU/-q7m6mt1dXY/s0/How+Safe+is+Your+Website1.jpg"><img border="0" src="http://1.bp.blogspot.com/-qZOKTEIcGIc/UgeZFJYJkjI/AAAAAAAAEnU/-q7m6mt1dXY/s2560/How+Safe+is+Your+Website1.jpg"></a>

  5. Preview your post before hitting the Publish button.

Enjoy!

17 comments to "How To Post Tall Pictures On Blogger"

Anonymous,  September 26, 2013 at 8:05 PM    

u never cease to amaze me...

Mc Dewey September 26, 2013 at 11:06 PM    

Nice info Lava, simple but useful to those who wants to show image original sizes.

kates oliverio September 27, 2013 at 9:47 AM    

wow, what a nice tutorial sir. i love this blog . thank you

Angry Birds Online September 27, 2013 at 7:02 PM    

Very informative. Thanks for sharing. :)

titan September 28, 2013 at 4:12 AM    

haha, sakit hati gak nak mengedit kalau gambar panjang-panjang nih..

Online MBA Programs September 28, 2013 at 10:01 AM    

Hello Greenlava, how are you? That was a brief but distinct tutorial. Thanks for sharing

Arham Sukardi September 28, 2013 at 1:45 PM    

Nice tips from this post

theblogarticles September 30, 2013 at 8:38 PM    

Excellent Article!!!!

protechlover.com October 1, 2013 at 2:21 AM    

Nice post buddy!

Mc Dewey October 1, 2013 at 11:28 AM    

hi lava, may i ask if it will slowdown the pageload if the link is in fullview/size?

blogger lelaki October 1, 2013 at 1:25 PM    

nice info..i dont know abour it before

Greenlava October 1, 2013 at 7:21 PM    

@Mc Dewey
No it won't affect pageload. The fullsize image only loads if/when you click the in-post image.

Ghost Rider October 1, 2013 at 8:12 PM    

your site is very 'contentful'. I have learnt alot here. Thanks for this tutorial. Few days back i search same thing on google but unfortunately nothing found. This really help me alot.

Kulwant October 3, 2013 at 1:06 AM    

Interesting information

Haris October 6, 2013 at 5:20 AM    

I enjoyed this Post. This tutorial very interesting for me. I think picture optimazion is very important for SEO

sandeep October 18, 2013 at 12:55 PM    

This tutorial helped me a lot....thanks for the information.

Shabana Feroze November 26, 2014 at 5:21 PM    

It's not working! My image is still the same size as s1600!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment