When you upload pictures in Blogger you are given three options : Small, Medium and Large for the Image Size. Your original image is resized and shown on the blog according to the option you choose here. When viewers click on the image then it is shown in the original size. For example the original size of the image below is 450 by 341 pixels. When uploading I chose the Small size :
After the image is uploaded click Done button in the popup window and shift to Edit Html tab in upper right corner of the Post Editor. This is the code for the picture I see at the top of the post editor window :
<a href="http://1.bp.blogspot.com/_2bUrQZe30ng/R_2sDhAHwdI/AAAAAAAAAEs/k5YorC-P8u0/s1600-h/bbdsnap450.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_2bUrQZe30ng/R_2sDhAHwdI/AAAAAAAAAEs/k5YorC-P8u0/s200/bbdsnap450.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5187491522199142866" /></a>
Within this code are the links for the smaller picture :
http://1.bp.blogspot.com/_2bUrQZe30ng/R_2sDhAHwdI/AAAAAAAAAEs/k5YorC-P8u0/s200/bbdsnap450.jpg
and the link to the original picture which appears on clicking the thumbnail :
http://1.bp.blogspot.com/_2bUrQZe30ng/R_2sDhAHwdI/AAAAAAAAAEs/k5YorC-P8u0/s1600-h/bbdsnap450.jpg
Notice the difference in the two links : "s200" directory stores the thumbnail while "s1600-h" directory stores the original picture. Otherwise the two links are the same. Even the picture name is not changed.
Now if you want to show the original sized picture in your post paste the second link in code as shown below AND REMOVE THE 's1600-h/' in the LINK :
<img src="http://1.bp.blogspot.com/_2bUrQZe30ng/R_2sDhAHwdI/AAAAAAAAAEs/k5YorC-P8u0/bbdsnap450.jpg"/>
This will then show the picture in the original size like this :
Publish Post. Check it out by clicking on the small picture at the top. You will see the same sized picture as the one at the bottom. Note that the bottom picture cannot be clicked on.
IMPORTANT NOTE : If you want to put pictures in original sizes in your blog make sure that the width of the picture is smaller than the width of your posts column. If the width is more this can cause your sidebar to fall down below your posts column.
26 comments:
Hi,
Thanks for the tip. This was really helpful for people like me who don't know how to use html.
I've just one question though. When I upload pictures onto my blog using the picture uploader, I can't seem to be able to click on the pictures to make them expand to their original size. How do I fix this?
Anonymous,
If you drag and drop pictures after uploading it may break the link to the bigger picture. To prevent this appening use cut and paste on the picture code. See Tips on Pictures in Blogger.
Dear Vin,
You're a lifesaver! Keep up the good work!
Nice.
and I'm using s640 to show the picture 640p wide.
If I upload picture with large setting it will set to s400, but you can change this s320 for medium and s200 for small and s640 for extra large! and as you posted 1600-h for original size.
This is particularly useful for photoblogs, that show really large original to show when click the small to relatively large image.
This is great information but I was wondering, as a storyteller I use a lot of images in my posts. Is there a faster way to edit the html? I shudder to think about doing this with the amount of images I use.
Gayl,
If there was an easier method there would be no occasion for the above post. :-)
That was really useful tip. Keep posting such tips in future. I have had real issues for me regarding this.
this is very very useful to me. I always wanted to know about this. I always used to hate pictures in blogs just for this matter.
This is so helpful! Thank you. Is there a way to make a photo post at a specific size? For instance, I want it to post as 500px wide (s640 is too large, s400 is too small). Is there a way to do that???
THANKS FOR THE HELP!!!
I started using this method thanks. I used to upload to external host for the images. Can you make a post recommending a free host for images? I need one that offers free bandwidth and will not let me down.. EVER
Sexy game babes,
With per MB storage costs showing downward trends many such sites come up every day. Just Google for them. Googlepages works fine for me.
Jennifer,
Upload it to a free host which does not change it's size on uploading like Googlepages.
Copy down the link to it and paste it in code as below :
<img src="LINK_OF_IMAGE"/>
Then paste the above modified code in Edit Html tab of Post Editor. Publish post.
Your post column should be 500px or more in width or your sidebar may fall down below the posts column.
Wow Vin! I just got here via
MaxBlogPress...and I've been reading for a while... I saved you to favorites and will be back.
Thanks
Fran
Wow! Thanks for the tips!
I loved Blogger!
I'm coming from the wordpress world and I created a new blogger blog today.
But I was so disappointed by the resize of images.
You saved my life and make me smile!
Thanks a lot!
Now I used your tips to make my pictures bigger on a post that only had one image on it and it worked BEAUTIFULLY....however when I tried to edit past posts that had quite a number of pictures it did not work at all. It said that the pictures were already s1600-h. Does that mean that they are displaying as large as they are going to? Because I know that my original images are bigger than they are showing on my blog. HMMM. Maybe you can help? Thanks.
Hi, for me it doesnt seem to work perfectly
at first the images come out all right
but then later, the images arent showing at all
help please!
HX,
Another method is to upload to Photobucket.com and get the link of the picture. Then paste the link in code in Edit Html tab of Post Editor like this :
<img src="LINK_OF_PICTURE"/>
Replave the CAPS and Publish.
HI! I think blogger has made a change since your last comments on this method to change the size of your photos. Could you tell me what the new way of doing this (posting larger photos)?
Thanks, Apryl
apryl deeter,
First you will need to increase blog width to accomodate large photos or else they may break the layout.
Second resize the photo to the exact width you want in an image editor.
Third upload image to Photobucket.com and copy the Image Link.
Lastly paste the code below in Edit Html tab of Post Editor :
<img src="IMAGE_LINK"/>
Replace CAPS with image link from Photobucket and publish post.
Hi, love your blog - has helped a lot. I use photobucket for storage. I upload my photos, copy and paste the html code to my blog and the right edge is cut off. I have to keep resizing them...seems to get smaller and smaller. What gives here? Thanks in advance.
Nema,
Try increasing blog width.
Thank you, thank you. I am totally new to this and understand very little regarding HTML. You were able to help me somehow get my image on my blog just as I wanted it.
Chris
I have tryed it at least 20 to 30 times, differently, and it does NOT work for me. Could you PLEASE demonstrate, in your answer, what should I paste and where, and what should I remove? I would be very grateful.
I'm interested how does the HTML look like, after you have done all the pasting/removing. Cause, I'm just not GETTING it, and it makes me feel depressed and just plain stupid.
Dan-Sognatore,
Try it on a test blog first. Also try this easy method :
1. Resize pict in Paint program on PC to the size you want.
2. Upload to Photobucket.com
3. Copy Direct Link of image at Photobucket.com
4. In Edit HTML tab of Post Editor paste following code :
<img src="DIRECT_LINK_OF_IMAGE"/>
5. Replace CAPS with actual Direct Link copied in 3 above.
6. Publish Post.
Note : Width of picture should be less than width of posts column.
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.