Thursday, June 5, 2008

How to post an image in its original size on Blogger or "Blogger scales down my images"

In this tutorial I will explain why Blogger scales your images down and how to post an image in it's original size in Blogger.

Why this happens? By using a Blogspot blog you receive an option to upload photos directly to your blog from the editing interface. The photos will be stored in your Picasa account. However, Blogger restriction for this is that it doesn't allow you to hotlink to your photos in full size - the maximum hotlink size of your image is 800x800.
Even more. By default, even if you choose "Large size" when you upload your photo, it will still return you a link to 400x400 images, and it especially hurts if you want to post some code snippets or precise pixel images.


What to do? There are some good news though. Most of the Blogger posts aren't more then 800 pixels wide (and even if they are, you should always think about how it's gonna look on a display of someone who doesn't have 1600x1200 resolution - you also have right and left columns that hog the display space, right?)
To make your images/pictures/photos look fullsize in your blogger posts you need to edit the link to this picture. Once you upload an image from the editor interface, the code for the image will look like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY/
ZZZZZZZZZZ/s1600-h/my-sample-image.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY
/ZZZZZZZZZZ/s400/my-sample-image.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_UUUUUUUUUUUUU" /></a>
Where UUUUUUUUUUU, V, WWWWWWWWWWWW, XXXXXXXXXXX, YYYYYYYYYYY and ZZZZZZZZZZ will be some mixed digits/letters.

See the text s400 that I've highlighted here in green? That's what you need to change. Change it to s800 and you are done.
Update: Blogger has recently started to add width and height into the <img> tag, so now you also have to remove them. Just look for the text height="XX" and width="YY" and remove it before publishing the post.
This guide will help you to post full-sized images to your BlogSpot blog, if these images have less then 800x800 resolutions. If you need to post a bigger image — use services like imageshack. There is a great list of image hosting sites available on the Blogger templates blog. I wouldn't recommend to use Photobucket as it has some PhotoBucket image hosting issues though.
That's it. Enjoy.
0
said thank you for this page

Liked this article? Bookmark/share it with others: Didn't like the article, found a mistake or just want to express your own opinion? Post a comment!

80 comments:

Anonymous said...

Thank you. Thank you. Thank you. It worked!

Anonymous said...

wonderful, thank you.

Bombchell said...

um by putting s800 if the file was less then 800 like for instance 700 then the tutorial is not right. or does it automatically adjust?

Anonymous said...

It does automatically adjust.

It shrinks the image to 800px wide if the image is bigger than that, and leaves the image at it's original size of the image is 800px wide or less.

Unknown said...

Thank you. It works.

Min said...

I've been doing that for ages. Suddenly, when I try to upload it now, it just doesnt work anymore. Arghh!!

Happy Happy Club said...

Soooo useful!! tnx
also my code came with w/h so i also give the adecuate proportions there (just in case)
It have this line now:

(normal code
cursor:hand;width: 450px; height: 650px;

is workin and lookin good TNX!!!

flip9 said...

thnx!
finally i manage to do it!

Anonymous said...

Hmmm… I'm not an HTML wiz, but your instructions were great and easy to follow. However, I'm completely unsuccessful at getting this work. The images aren't changing size at all. Any suggestions?
Thank you!!!

World Geography said...

Yeah I have changed it many times and now it's not doing it

Cranked said...

One popular mistake is to try to modify the href=".../s1600-h/my-sample-image.jpg" attribute in <a> tag (it goes first), and not in <img> tag. Try ensuring you modify the href= attribute in the <img> tag and let me know if it worked ;)

Weekend Players said...

What if i want my picture to be 700px width? I am successful in changing to 800 and 400, but i want my picture width to be 700 or a specific size. What can i do?

like this Blog -
http://thesartorialist.blogspot.com/

my blog -
http://AlmondShapedEyes.com

Cranked said...

Add the width attribute to your <img> tag. Like this:<img width="700" src="http://bpV.blogger.com/
WWWWWWWWWWWW/XXXXXXXXXXX/YYYYYYYYYYY
/ZZZZZZZZZZ/s400/my-sample-image.jpg" />

Merche said...

Where is that long URL that you found? I uploaded a picture from my computer so there's no HTML to fix?

Cranked said...

You are probably in Compose mode of Blogger post editor. Click Edit HTML button in the top right corner of your edit window, and you should see the URL in plain HTML.

Anonymous said...

I'd like to try this, thanks.

Anonymous said...

Ya it works and i was unaware of that. But i just wondered that this was not working for a moment by just chaging that 4 to 8. But also you need to define the exact size to be displayed.
Thanks...

STOP IT RIGHT NOW said...

my Edit Html code looks more like this

WIDTH: 400px; CURSOR: hand; HEIGHT: 369px;

when I try to double the width and height sizes, the image DOES double, but is comes out pixelated. Is there any way to make it bigger but keep the image quality in tact?

Cranked said...

Yes, it is possible to make images bigger without pixelating them - you just need to link to bigger resolution version (800 pixels wide, not 400). Try performing exactly the steps described in this article, and you will get what you want :)

ZX said...

tq very very much:D

Lavern said...

I've been doing it but I am not satisfied with the pictures especially the labels appear blurred even though the original picture have high pixels. Is there a way to customized the size of large photo instead? So that everytime you post you dont need to go to edit html?

baodad said...

Thank you so much for this tip!!

Rahman Bashri said...

thank you so much...

Unknown said...

I couldn't make it...Is it because my picture is 1600x1200 in size? I hate my image being shrunk all the time. I tried to adjust the
width and height and it seems work. What shall I do?

Anonymous said...

hi, i have a problem, my image is 600x800 but even if i modify the stuff you say i have to, once i publish the post only half my image is visible...

heres the post

http://helltodaynotomorrow.blogspot.com/

thanks

Cranked said...

This is because you have your content field width less than your image width.

Change style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" attribute in image tag to style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;max-width:100%" and everything will be fine :)

Sulistiono said...

thank you...
it's very useful..

Horsy said...

Sorry.I have a question to ask.Isn't this one of the way that considered a bit troublesome as we have to change every single post.Is there any way that we can set it as default so we don't have to change the setting of images every time?thanks ya :)

Cranked said...

Sorry, Horsy, as for now there is no way to do it with "one swipe". Hopefully in future we will have Blogger support more resolutions (it's quite easy to implement, just need to bug the developers enough).

Rahul Rathore said...

Very usefull information.
Thanks

erin said...

I'm uploading some images that are very large (1000 x 1400px). When I upload them through the normal blogger route they look fine, but when I try to enlarge them using your method, they are distorted, not terribly distorted, but a bit distorted. Is this because the original images are so large. Is there anyway to fix this, other than resizing all the images beforehand? I've tried changing to s1600 and that doesn't seem to work, either. Thanks!

Cranked said...

Erin,

Blogger hosts your images in predefined formats - 320, 400, 800 pixels wide.

You can only get 800px max wide images if you choose hosting with blogger.

If you need images with bigger resolution, you should use other image hosting sites (like flickr, imageshack or picasa) and then link to them from your blogger posts using IMG tag.

erin said...

That worked perfectly. Thanks!!

Anonymous said...

Any advice if you're having the opposite problem? I'm applied a custom template to my Blogger blog and now all my images are scaled up to 600pixels regardless what size they are originally or whether I upload via Picasa or link from my Photobucket account. My images are all distorted.

Cranked said...

Cosette, that's because the custom template that you applied sets the width of image to 100% of post width, thus making them 630px wide in total.

Find the line
.post img { padding: 0; width: 100%; text-align:left; display: block; padding: 3px; border: solid 1px #f2f2f2; }

in your template and replace it with

.post img { padding: 0; text-align:left; display: block; padding: 3px; border: solid 1px #f2f2f2; }

Remember to save your template to apply changes :)

Anonymous said...

Thank you! That did the trick.

erin said...

Since you were so helpful, can I ask you another question? Is there a way to add the followers gadget without adding the list of followers? I just want the "follow" button. That's all. Thanks

Cranked said...

Hello erin,

This is quite simple. Add a line
#Followers1 { height:80px; overflow:hidden;}

somewhere into the beginning of your template, where you have style descriptions.

Or
#Followers1 { height:100px; overflow:hidden;}
If you also want a line "With Google friend connect" in your gadget.

erin said...

Thanks! You're awesome!

thinkflex said...

The s800 tip is just what I have been looking for. It did the trick, although I had to set the actual width and height of the image as well. Very cool :)

Calgary Street Fashion said...

Hi I got my images to the size I like, but the border to the image cuts off---how do I fix this?
Thanks

Cranked said...

Calgary Stree Fashion, please show me your post where you have borders cut off, so I can see the reason and help you.

saltvinegar said...

I have the same problem too.. after resizing to s800 i have beautiful big pictures but the right side of the frame and picture is cut off. Pls help! Thnks!

Cranked said...

Saltvinegar, this is because your content area is 760px wide (less than enough to fit 800px wide image + borders).

saltvinegar said...

Thanks so much!! it worked.. ur a Godsend to noobs like me!

Anonymous said...

Hi,

Great post, the only thing you have to do, as a few people have mentioned, is just delete the width and height . . . works perfect!

Ph said...

Hi

Your post has been really helpful. I have a similar question. I have successfully uploaded pictures in the size I wanted. When you click on the image you're linked to the photobucket album there stored in. I want this last part to go away, in other words how can I make the images "un-clickable". I have tried removing random parts of the embed-vode without success. Thanx.

/Philip

Cranked said...

Hello Philip,

The embed code looks like <a href="http://s791.photobucket.com/albums/yy193/randomangles/Portraits/?action=view&current=js1.jpg" target="_blank"><img src="http://i791.photobucket.com/albums/yy193/randomangles/Portraits/js1.jpg" border="0" alt="Photobucket"></a>

Remove the <a> tag, leaving only <img> tag:

<img src="http://i791.photobucket.com/albums/yy193/randomangles/Portraits/js1.jpg" border="0" alt="Photobucket">

Also, to ensure the picture is properly displayed in all browsers, you can put the slash (/ character) at the end of <img> tag:
<img src="http://i791.photobucket.com/albums/yy193/randomangles/Portraits/js1.jpg" border="0" alt="Photobucket" />

This should do the trick.

Anonymous said...

Hi Cranced,

I have the same problem as saltvinegar. I didn't really understand what's the solution for the problem: that I upload the picture to my blogspot blog and the right side of the pic is cut off. I'm really a beginner in this blogging thing, can you please help me and tell me in details what shall I do? I would be so happy if I could post big pics. I just want to choose the 4th size when I upload my pics, the biggest one, but the right side is cut off.

Cranked said...

Hello Pocak

Your problem occurs because your content area (the area where your blog text and images are displayed) is smaller than the image you want to put inside.

There are two possible solutions:

1. Either increase the width of content area (the easiest way to do it would be simply choosing a different template)

2. Or post smaller images (in this post of yours http://pocakpanna.blogspot.com/2010/01/joghurt-feketeribizlivel.html the picture is displayed properly).

There is also one small trick if you need to display an image that is bigger than your content area. After you have uploaded your image, look for <img text in the body of your HTML blog post, and insert this text directly after it:

style="max-width:100%"

This should prevent images from being cut off.

Anonymous said...

Thank you for your quick answer. But it still cuts off the picture. I've tried all your advices. This is crazy. The funny part is, which drives me crazy, is that I tried to cut off the right side of the picture, to be like it had cut off before but when I upload it, it cuts it again. I just don't understand... Thx for helping me anyway!

Cranked said...

Pocak,

Make sure you remove height="320" and width="400" tags from photo when you try the style="max-width:100%" trick.

Once again, most of your problems come from the point that your template have it's content area only 410 pixels wide. Simply try picking a different template - should be the best troubleshooting hint for the beginner.

tarun k said...

Thanks, It helped me

erin said...

Hi Cranked,

I did something really stupid (i.e. changed my template without saving the old one!). In the new blogger template the code for hidding your followers doesn't seem to be working. Can you help???

erin said...

Oh, and just the pictures, not the whole thing. Thanks!

Cranked said...

Erin, send me your template to cranked.me@gmail.com and I'll fix it.

home for sale costa rica said...

Hi, i'm really interested in this post...I want to know more about "How to post an image in its original size on Blogger or "Blogger scales down my images".

Thats exactly what I was searching in this time...

Thanks!!!

1234 said...

Thanks a million!

Green Umbrella said...

its not working for me...my pics are showing in smaller size day by day!

plz check here : http://quakerme.blogspot.com

Its all showing as small size.

Cranked said...

Green Umbrella, make sure you remove the height= and width= attributes from your <img> tag.

Green Umbrella said...

Thanks "cranked" it worked..is there any way i can make this setting permanently so that i don't have to delete the attributes.

Dimp said...

OMG Thankyou!! It really works. I was gettin fustrated for the longest because my pics were always distorted if i made them larger. but this one is a keeper. thanks again :-)

Rajesh Kumar said...

Whenever I upload any picture in blog. It by default uploads it as Medium size photo in blogspot. Is there any way I can change this Medium size to Large size by default i.e. whenever I upload any photo, it should show it as Large?

Cranked said...

No, Rajesh, the default size is "Medium". It takes only one click to resize though :)

anshuiitk said...

Great post .... helped save a lot of time and mood .. generally such frustating problems spoil the mood for blogging .. :) ..

Daniel Ciufo said...

Hi could someone please help me. I've deleted the height and width parts of the html and also added style="max-width:100%" but to no avail.

If you could please look at my blog and help.
thanks in advance

http://danielciufo.blogspot.com/

Cranked said...

Daniel, this is because your template has width of content area set to 410 pixels. To fix it, find a line "width: 410px;" in your template and just delete it (or just change the template altogether).

Daniel Ciufo said...

Ok where do I find the width;410px in template. Under what tab. If that makes sense.

thanks

Daniel Ciufo said...

Amazing I got it.
Thanks so much for the quick reply.

Cranked said...

Go to your http://blogger.com/home -> under the name of your blog pick "Design" link, Choose "Edit HTML" tag, then click "Expand widget templates" checkbox. After that use your browser to search for "width: 410px;" line, delete it and press "Save template" button below.

Unknown said...

Just wanted to add my thanks for the info.It took a few trys but the s320 to s800 was the one I was forgetting to do.It was enlarging but pixelating untill I changed the s #.

Many thanks

Murph

http://www.wherethehellismurph.blogspot.com/

MY said...

Great info... Thanks!! Uploading from Photobucket and Flickr could be 2 times job.Although this one also 2 times thing but I would definitely prefer this one. Thanks again.

missyblurkit said...

this is amazing tips. thanx!

Steffi said...

Thank you! Great tip! I finally understand!

Post a Comment

Have anything to say? Leave a comment!
Too shy or got a too private question? Email me
Alternatively, you can drop me a line on Twitter