How to Post Large High Quality Images


By default, Blogger decreases the size and quality of an image in the post. We can make some modifications in the uploaded image code to retain the quality.

Upload an Image as usual


I've uploaded an image from my computer with width 515px and height 402px. When the image was uploaded, the width and height both have decreased resulting in a smaller image. This is how the image looks like:

How to Post Large High Quality Images

And this is the code:



<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 312px;" src="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s400/add+recent+comments+widget+for+blogger+2.PNG" alt="" id="BLOGGER_PHOTO_ID_5352758256344287250" border="0" /></a>


Note: You can see the code only in Edit HTML mode of the post editor. You can find this mode at the top right of the editor.



As you can see from the image code that width is now 400px (original 515px) and height is 312px (original 402px). To fix this problem, take a closer look at the image code. There are two URLs in this code, one is for larger size (s1600-h) and the other is for smaller size (s400). That's why when you click on an image, the same image opens up in full size.

Let's do some good changes in the code


The trick you'll apply here is to replace the smaller image URL with the larger image URL which means replacing the address of smaller image:



http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s400/add+recent+comments+widget+for+blogger+2.PNG


with the address of larger image:



http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG


After these changes, the image code should look like this:



<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 312px;" src="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG" alt="" id="BLOGGER_PHOTO_ID_5352758256344287250" border="0" /></a>


You need to do two more things here to make image original size. Delete s1600-h from image source URL. If s1600-h is not present, proceed with tutorial. The code should now look like this:



<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 312px;" src="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/add+recent+comments+widget+for+blogger+2.PNG" alt="" id="BLOGGER_PHOTO_ID_5352758256344287250" border="0" /></a>


Last thing you need to do is to change width and height to that of original image.



<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 515px; height: 402px;" src="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG" alt="" id="BLOGGER_PHOTO_ID_5352758256344287250" border="0" /></a>


Now, our image looks like this:



Just to clarify the difference, here is the originally uploaded image:


Be careful when posting large images


You can't use image of any width in your template because a template has specific width allowed for posting area. An image with too much width can be problematic and without proper CSS definitions, the image might overlap sidebar.

To avoid this, you can create a scroll bar around your image which will make sure that the image will never be cut off or overlap due to size. The format of this property is like this:



<div style="overflow:auto;">
YOUR IMAGE CODE COMES HERE
</div>


For example, I can use the code of my uploaded image here like this:



<div style="overflow:auto;">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 515px; height: 402px;" src="http://1.bp.blogspot.com/_wa6zL1GRiOs/SkjRRiXwyBI/AAAAAAAADHc/wDJmUdqohMU/s1600-h/add+recent+comments+widget+for+blogger+2.PNG" alt="" id="BLOGGER_PHOTO_ID_5352758256344287250" border="0" /></a>
</div>


Tip: Whenever you use a large image (width above 550px), you should use the overflow property. Don't worry if the image is small in width, it will not create a scroll bar.



Although, the best method to post large images is to increase the width of the template posting area. You can ask for that if you want to.

7 comments:

  1. this works because I have already figured this out, the thing is this. When u are a photog and you want to post hundreds of images this is way to time consuming. Look at this site.

    http://www.hassasphotography.blogspot.com/

    If you look at the bottom he has a SCRIPT for auto resizing images. I tried copying it from the source code and I cant get it to work. What am I doing wrong?

    ReplyDelete
  2. @ Jerry Gomez, I didn't found any photo resizing script on the blog you've provided. That guy is uploading pics by simple Blogger upload method. However, he's uploading his Flickr photos and almost all of them have width=700px and height around 500px.

    ReplyDelete
  3. Above you mention that you did an article about "how to post clear images" but when I click the link it says the article doesn't exist. I would love to read that article because I am having trouble getting clear images on my blog. Would you please let me know how I can view that article? Thank you!

    ReplyDelete
  4. stick to www.betatemplates.com, i'll post that article there very soon!

    ReplyDelete
  5. That was really helpful thank you. I am currently just using a test blog on Blogger to practice things like this and it worked perfectly for me.

    My images already had the /s1600/ and then /400/ in the image code.

    By deleting the /400/ my images were their original high quality.

    ReplyDelete
  6. @ ElleBaily, glad to hear that!

    ReplyDelete

Note: All comments will be moderated.