How to post large images in Blogger(Multiple Image Sizes in Blogger)

As you might already know, Blogger is integrated with Picasa and  all the images that you upload to Blogger automatically becomes a part of your Picasa account.Picasa has got 1 GB free Storage.So if your Picasa Account exceeds this 1 GB limit, you wont be able to post more images to your blog.(In that case you will have to buy additional Storage).

Each of your Blogs will be having a separate album in your Picasa Account. You can check it out at http://picasaweb.google.com  The visibility of these albums will be set to “Anyone With Link” and hence these albums won’t be publically visible to anyone.If you delete any of these images from Picasa, they will disappear from your blog as well. 

Images uploaded to Picasa have some special properties which might come in handy for you. You can resize or crop these images so easily. This post talks specifically about landscape images.

Resizing Images in Blogger / Picasa

The maximum width of a Picasa image is 1600px. If you upload images which have a bigger width, then picas a will automatically scale them to a width of 1600px maintaining the aspect ratio. Once you have uploaded an image to Picasa/blogger, you can have multiple sizes of the image by altering the image URL.

Example : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm_cg3rd2NOHEZeyhO2ks_l952A6t5lPhR5k7ip9gWRky_7KaEs2jkkv7hRZSeGVpamP8o6ZXd4os9iyBbuqtuUq9cwofnpbg7r75B7zLs3HIE6lXjrDhtz6tbafKIv8wXkUN3smjbbI/ is an 1920x1020px image that I uploaded to Picasa via Blogger. It automatically got resized to  1600x900px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm_cg3rd2NOHEZeyhO2ks_l952A6t5lPhR5k7ip9gWRky_7KaEs2jkkv7hRZSeGVpamP8o6ZXd4os9iyBbuqtuUq9cwofnpbg7r75B7zLs3HIE6lXjrDhtz6tbafKIv8wXkUN3smjbbI/s1600/1920.1080.jpg

This is the image URL that I got in my blogger post Editor. You can get multiple sizes of the image by varying this bolded parameter. An image URL with s1600 will have a maximum width of 1600px. Similarly an image URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm_cg3rd2NOHEZeyhO2ks_l952A6t5lPhR5k7ip9gWRky_7KaEs2jkkv7hRZSeGVpamP8o6ZXd4os9iyBbuqtuUq9cwofnpbg7r75B7zLs3HIE6lXjrDhtz6tbafKIv8wXkUN3smjbbI/s777/1920.1080.jpg will have  a maximum width of 777px. (Here as the actual image is larger than 777px, it will show a scaled pic with width 777px)

Here is another image that I uploaded

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzswD9Zp0f_-u12nsfotPc580-SPIrnd2bK4-9AoPwrR8aA3xk5ocgEi5YmZbpCuLTOJeeYkN1MvWtOkQcQNYCPOpOHVSI1lqqCFddLTglLHJw-Nx4fLkzyfDCTAPdcrFiN1-62B9ZJN4/  (actual size 126x131px)

Now lets try modifying the image URL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzswD9Zp0f_-u12nsfotPc580-SPIrnd2bK4-9AoPwrR8aA3xk5ocgEi5YmZbpCuLTOJeeYkN1MvWtOkQcQNYCPOpOHVSI1lqqCFddLTglLHJw-Nx4fLkzyfDCTAPdcrFiN1-62B9ZJN4/s777/christmas-bells-icon.png

Here the actual size of the image is less than 777 px and hence the original image will be shown without any scaling

Cropping images in Blogger / Picasa

Picasa can also provide you with Cropped images. You have to add a -c to the modifiable parameter to crop the image.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/s1600-c/zqjhDdXbITk/1920.1080.jpg
will provide you a cropped 1600x1600 px image
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzswD9Zp0f_-u12nsfotPc580-SPIrnd2bK4-9AoPwrR8aA3xk5ocgEi5YmZbpCuLTOJeeYkN1MvWtOkQcQNYCPOpOHVSI1lqqCFddLTglLHJw-Nx4fLkzyfDCTAPdcrFiN1-62B9ZJN4/s1600-c/christmas-bells-icon.png
will provide you with a cropped(Plus scaled) 1600x1600 px square image.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/s111-c/zqjhDdXbITk/1920.1080.jpg
will provide a  111x111px cropped version of the image
Remember 1600 is the maximum pixel size that you can use when modifying the image urls for cropping or resizing purposes.

-h parameter.
When adding images using the old Blogger Post Editor, you might have come across urls containing /s1600-h/ . These links will actually generate an HTML page where the image is embedded.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm_cg3rd2NOHEZeyhO2ks_l952A6t5lPhR5k7ip9gWRky_7KaEs2jkkv7hRZSeGVpamP8o6ZXd4os9iyBbuqtuUq9cwofnpbg7r75B7zLs3HIE6lXjrDhtz6tbafKIv8wXkUN3smjbbI/s200-h/1920.1080.jpg
is a link to an HTML page where the image is embedded(maximum width of the image is 200px)

Posting Big Images in Blogger

If you read everything posted above, then you should be able to manipulate the image links so that you get an image of an appropriate size. Refer These Screenshots  for posting large images onto Blogger. Click the image for a larger view.

New Post Editor

Old Post Editor

If you feel that you need to post a big image, but your post area is too small to accommodate it, then you can try using the Light Box Overlay Viewer for Blogger

Source: http://www.bloggerplugins.org/2010/12/how-to-post-large-images-in-blogger.html

Light Box Image Viewer For Blogger

Light box is a really elegant image viewer addon using javascript and the prototype framework. First of all i would like to give the credits to the original maker of Light box,Lokesh Dhakar

I have also added some demos of Lightbox to this page.So if you are not sure,what lightbox is,then take a look at the two demos in this Post.This will really help you in building a well styled gallery like blog.

Installation Steps

1.Login to your Blogger Dashboard

2.Go to Design > Edit HTML

3.Find this piece of code

</head>

and replace it with

<!--Light Box Code Starts  Bloggerplugins.ORG-->

<style>

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }



#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }



#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer&gt;#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgERBKuRZHPBUR917LLzyubCgVN_v37C_PR3KzDClEJ5v07ZEfDVVX8Bwq9uxvyBR0HFyAtfE-XdLnKqzeR8JWjm-XWdLVVil8CN8eSV-KOqNeECQZd2tXiCCBSG0ppoh1R7IBmHnOBoa8/) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY51vuYn_dafJ7b2CvpFBNdF7zKFyxtgTsB9mg7Jxx384QFgP0ufoK5wxfIxWspgjaxLyThRBu9p3nTBXFfdx4VijOMx_vuu0kQPSb45ce0QHsfbTX-fiIbfM3kOwN2vzIOojeDPNzjzg/) right 15% no-repeat; }



#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }



#imageData{    padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 

#imageData #caption{ font-weight: bold;    }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      



#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

</style>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>

<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>

<!--Light Box Code Ends Bloggerplugins.ORG-->

</head>

Adding Images for the Lightbox Viewer

Now you have added the scripts and styles needed for the lightbox.Next part is to add our images..

You can also add captions to your images and also group multiple images into albums. First upload your photo using the blogger photo upload tool.Now switch to the edit html view from the post editor

See the instructions in these images. (Click to view a bigger version.. :))

Make sure that you delete the -h from s1600-h .Now you should be able to see the image(which you uploaded) in an overlay LightBox

Options Explained...

adding rel="lightbox" title="Your image Caption" will create a lightbox viewer for the single image.

Demo of a Single Image

Creating an album with light box

If you are making an album out of multiple images, then add rel="lightbox[albumname]" title="Your Image Caption"  to each of the images present in that album. Images with the same albumname will constitute a single Light box overlay, and you can traverse through the album using the Next and Previous Buttons. Images in an album can obviously have different captions, but a common albumname. You can make multiple albums in a single post by choosing different album names.

Demo of a Light Box Album

Did you notice that your keyboard arrow keys can be used to navigate through the album? :) I hope this would be very useful for those who own a photography blog.If you have any troubles in implementing this,you can surely contact me via comments or @ Blogger Forums. If you are reading this in a feed reader,the Demos won’t be displayed. To see the demos, visit the actual post page

Source: http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html