Search Box by All Blogger Tricks

Tuesday 1 January 2013

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


Freelance Jobs
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 : http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/zqjhDdXbITk/1920.1080.jpg is an 1920x1020px image that I uploaded to Picasa via Blogger. It automatically got resized to  1600x900px
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/zqjhDdXbITk/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 http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/zqjhDdXbITk/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
http://lh6.ggpht.com/_u4gySN2ZgqE/TRmb0Y7TZ4I/AAAAAAAABwg/A2Tjc2GZrt4/christmas-bells-icon.png  (actual size 126x131px)
Now lets try modifying the image URL
http://lh6.ggpht.com/_u4gySN2ZgqE/TRmb0Y7TZ4I/AAAAAAAABwg/A2Tjc2GZrt4/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
http://lh6.ggpht.com/_u4gySN2ZgqE/TRmb0Y7TZ4I/AAAAAAAABwg/A2Tjc2GZrt4/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.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/zqjhDdXbITk/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

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved