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).

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7x5-Yh1RzMcO61ToWr6Nn0HTwKdl04FOUCtpeoKG62L41tne4DBw3yWEVCafIa0ahv0NvrGLbj7PONRMTS6jPjFUlz1phWqTBjtcHZzxexmDK2fa3FFi5qMlxMMZQzQNvfE-rSAkSeFNz/s1600/How+Safe+is+Your+Website1.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7x5-Yh1RzMcO61ToWr6Nn0HTwKdl04FOUCtpeoKG62L41tne4DBw3yWEVCafIa0ahv0NvrGLbj7PONRMTS6jPjFUlz1phWqTBjtcHZzxexmDK2fa3FFi5qMlxMMZQzQNvfE-rSAkSeFNz/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7x5-Yh1RzMcO61ToWr6Nn0HTwKdl04FOUCtpeoKG62L41tne4DBw3yWEVCafIa0ahv0NvrGLbj7PONRMTS6jPjFUlz1phWqTBjtcHZzxexmDK2fa3FFi5qMlxMMZQzQNvfE-rSAkSeFNz/s0/How+Safe+is+Your+Website1.jpg"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7x5-Yh1RzMcO61ToWr6Nn0HTwKdl04FOUCtpeoKG62L41tne4DBw3yWEVCafIa0ahv0NvrGLbj7PONRMTS6jPjFUlz1phWqTBjtcHZzxexmDK2fa3FFi5qMlxMMZQzQNvfE-rSAkSeFNz/s2560/How+Safe+is+Your+Website1.jpg"></a>

5. Preview your post before hitting the Publish button.

Enjoy!