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

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 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/AVvXsEikRYtLlFBE1YvvmFsY-ZNrG5l5Om3twy0FOyvU_KxIFyqGBIQ_pPUNpkREEkQWBaGvTp0Uc0htf8osJeUYb_w-cHMnNAH8kbL7e4RYVvMFK_v7MSPmbFZp_NlfMq7nFIyXgD99sWGHpQI/ is an 1920x1020px image that I uploaded to Picasa via Blogger. It automatically got resized to  1600x900px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikRYtLlFBE1YvvmFsY-ZNrG5l5Om3twy0FOyvU_KxIFyqGBIQ_pPUNpkREEkQWBaGvTp0Uc0htf8osJeUYb_w-cHMnNAH8kbL7e4RYVvMFK_v7MSPmbFZp_NlfMq7nFIyXgD99sWGHpQI/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/AVvXsEikRYtLlFBE1YvvmFsY-ZNrG5l5Om3twy0FOyvU_KxIFyqGBIQ_pPUNpkREEkQWBaGvTp0Uc0htf8osJeUYb_w-cHMnNAH8kbL7e4RYVvMFK_v7MSPmbFZp_NlfMq7nFIyXgD99sWGHpQI/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/AVvXsEgt-3QNnjOtNvUstMeVakjeLiCgfpbTqB3bqzH10ZHnLltLSRQgVTCdfsufb73jmy_VeZWMGKIC_AxUX8q4tScmC7XIrDs6vKB3-9tf4my2R0_0-q11oovfP9i9_YrFKmONnftCZdm35DM/  (actual size 126x131px)

Now lets try modifying the image URL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-3QNnjOtNvUstMeVakjeLiCgfpbTqB3bqzH10ZHnLltLSRQgVTCdfsufb73jmy_VeZWMGKIC_AxUX8q4tScmC7XIrDs6vKB3-9tf4my2R0_0-q11oovfP9i9_YrFKmONnftCZdm35DM/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/AVvXsEgt-3QNnjOtNvUstMeVakjeLiCgfpbTqB3bqzH10ZHnLltLSRQgVTCdfsufb73jmy_VeZWMGKIC_AxUX8q4tScmC7XIrDs6vKB3-9tf4my2R0_0-q11oovfP9i9_YrFKmONnftCZdm35DM/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/AVvXsEikRYtLlFBE1YvvmFsY-ZNrG5l5Om3twy0FOyvU_KxIFyqGBIQ_pPUNpkREEkQWBaGvTp0Uc0htf8osJeUYb_w-cHMnNAH8kbL7e4RYVvMFK_v7MSPmbFZp_NlfMq7nFIyXgD99sWGHpQI/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

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

26 comments :

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

    ReplyDelete
  2. @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.

    ReplyDelete
  3. 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!

    ReplyDelete
  4. 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!

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

    http://www.teknisyan.net

    ReplyDelete
  6. @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.

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

    http://lh6.ggpht.com/_Ig3cpy2QmOQ/TLa8rD4XhsI/AAAAAAAAbKE/xuSnPo0ptEk/20090722-111504.jpg

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

    My customized Lighbox Image Viewer is here: http://www.tretjakovgallery.com

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

    ReplyDelete
  8. @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.

    ReplyDelete
  9. @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!

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

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

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

    ReplyDelete
  13. Thanks for this post. Very useful for me.

    ReplyDelete
  14. 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

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

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

    ReplyDelete