Upload Pictures Without Changing their Size.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBY_Nyjs73Fd9Zjn6QoBztczlDNIXQDJOfbpqPII9n7UoZL0YwhnBfPF48AGaitujF0rNZy__I-pwNjW8gdLW-EDYSXMPaekgu4SFagRGYpZNcFIDHqlSQ-3qzRBhKD7ppnfThhMNOxE/s1600-h/bbdsnap450.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBY_Nyjs73Fd9Zjn6QoBztczlDNIXQDJOfbpqPII9n7UoZL0YwhnBfPF48AGaitujF0rNZy__I-pwNjW8gdLW-EDYSXMPaekgu4SFagRGYpZNcFIDHqlSQ-3qzRBhKD7ppnfThhMNOxE/s200/bbdsnap450.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5187491522199142866" /></a>

Within this code are the links for the smaller picture :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBY_Nyjs73Fd9Zjn6QoBztczlDNIXQDJOfbpqPII9n7UoZL0YwhnBfPF48AGaitujF0rNZy__I-pwNjW8gdLW-EDYSXMPaekgu4SFagRGYpZNcFIDHqlSQ-3qzRBhKD7ppnfThhMNOxE/s200/bbdsnap450.jpg

and the link to the original picture which appears on clicking the thumbnail :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBY_Nyjs73Fd9Zjn6QoBztczlDNIXQDJOfbpqPII9n7UoZL0YwhnBfPF48AGaitujF0rNZy__I-pwNjW8gdLW-EDYSXMPaekgu4SFagRGYpZNcFIDHqlSQ-3qzRBhKD7ppnfThhMNOxE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBY_Nyjs73Fd9Zjn6QoBztczlDNIXQDJOfbpqPII9n7UoZL0YwhnBfPF48AGaitujF0rNZy__I-pwNjW8gdLW-EDYSXMPaekgu4SFagRGYpZNcFIDHqlSQ-3qzRBhKD7ppnfThhMNOxE/"/>

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.