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

12/29 12:20:00 AM Wednesday, December 29 , ,

how-to-post-large-images-in-bloggerAs 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  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 : jpg is an 1920x1020px image that I uploaded to Picasa via Blogger. It automatically got resized to  1600x900px

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

Now lets try modifying the image URL

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.
will provide you a cropped 1600x1600 px image

will provide you with a cropped(Plus scaled) 1600x1600 px square image.
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.
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

large-images-on-blogger

Old Post Editor

large-images-on-blogger-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

28 comments :

  1. gmankaDecember 29 at 12:29 AM

    In my opinion. Images can be easily resized when blogging from Windows Live Writer.

  2. UnknownDecember 29 at 12:47 AM

    @Gouthaman Karunakaran - if you are using WLW or any other Blog Editing S/W, then it can be easily done. BTW WLW uploads multiple versions of the same image to your Picasa Account(under the album Windows Live Writer) if you adjust the size of the image and then link the image to its source.

  3. AnupDecember 29 at 7:57 AM

    Hi Aneesh,

    You've mentioned a great tricks but I think its quite old. I'm too using this trick to enlarge images in blogger. Just I have to copy the image link and paste it into image source URL. I posted about it: Post High Quality Image in Blogger by using Simple Trick

    Thank you for the update!

  4. WONDER OF THE WORLDDecember 29 at 9:40 AM

    Nice post. tnhx. I want to try it

  5. Wallpapers HDDecember 29 at 2:36 PM

    Wow. Thx

  6. Teemu TretjakovDecember 30 at 4:39 PM

    If you upload bigger images than 1600px wide to Picasa, just leave the ".../s1600/..." -part away from the first url (after href=") and the viewer can see images scaled to fill the entire browser window. Zooming works fine, too!

  7. TeknisyanDecember 30 at 6:48 PM

    Good tips, as I runnong low on my picasa space! :)

  8. UnknownDecember 30 at 10:18 PM

    @Teemu - even if you remove the /s1600/ part, the image won't get wider.1600px is the maximum width that a picasa image can have.

  9. Teemu TretjakovDecember 31 at 11:40 AM

    You can upload bigger images than 1600px wide using Picasa software (you can download it from Google for free). There is an option where you can set the size for uploaded images in" Web Albums" -tab. Choose "Original size" and uncheck "Use 1600 pixel size when sharing".

    At the moment I use customized lightbox image viewer in my blog but I'm considering to change it to full size images. I already tested it and it works. However, it's not just as simple as uploading images directly from Blogger because you have to edit the links as shown in this post. (Using Light Box is quite complicated, as well)

    Here is an example image in my Picasa Web Album (2400X1600px):


    Move your mouse pointer on the image and click to zoom in and out!

    My customized Lighbox Image Viewer

    BTW: I use Picasa Web Albums to backup my photos. 20 Gigabytes for a few bucks a year. Sounds good in my opinion.

  10. Beben KobenJanuary 1 at 7:26 PM

    happy new year my friend^^

  11. UnknownJanuary 1 at 8:38 PM

    @Beben - thanks and same to you :)
    @Teemu - 1600px X 1067px is the size of the image that you posted..So i guess that its not possible, even if you use Picasa's desktop app.

  12. WalidplusJanuary 2 at 2:37 AM

    thanks for sharing.

  13. Teemu TretjakovJanuary 4 at 4:12 PM

    @Aneesh - You are absolutely right. Somehow I thought that images are shown as big as they are uploaded but I was wrong. My mistake. I'm sorry for the hassle. Thanks for all the great tips, anyway!

  14. PhototweetJanuary 6 at 2:28 PM

    Interesting info, I'll try it ....

  15. FacemotJanuary 8 at 5:52 PM

    wow, that's veru good information about this, i can't show the real size images at my post and this article very helpfull

  16. yahayaFebruary 6 at 7:54 AM

    anyway thanks for great info

  17. Paul santoshFebruary 11 at 8:34 PM

    it's awesome.........

  18. islamicwazaifFebruary 13 at 10:49 PM

    Well Done dear Brother you have blessed me to solve my big problem.
    thanks a lot such nice blog of value able information.

  19. Saiful MubinFebruary 18 at 10:01 PM

    thank's for all

  20. Bang IwanMarch 12 at 7:47 AM

    Thanks for sharing.

  21. MangudinMarch 15 at 2:38 PM

    thanks for information..

  22. Alex christMarch 18 at 6:35 PM

    thanks

  23. Mohammed AliMarch 28 at 3:12 PM

    thank you so much, i have used this techniques in my blog. i like to know how to screenshow in a blog post. awaiting for your reply

  24. recunhaJune 13 at 7:16 AM

    Thanks for this post. Very useful for me.

  25. mikeJune 25 at 6:22 AM

    Hello, i'm having some trouble with auto image resize. I do all my blog editing in firefox, and all my images are 1600px wide, then in the post i set "image width" to 100%. All works perfectly, but then when I check the blog in ie or chrome, the images apear smaller (in chrome) or out of bounds (in ie). Has anyone experienced teh same problem? any suggestions? thx

  26. RealAsianBeautySeptember 23 at 6:33 PM

    Wow this was really helpful! Pictures are really important when having a tutorial! This was really helpful. Thank you. :)

  27. Elizabeth A MichaelsSeptember 30 at 1:58 AM

    Can this be used in a widget too?

  28. xuonginOctober 7 at 9:48 PM

    helpful to me thank you, i can't seo for my blog, create it long time but searching isn't data