first switch to "edit html" mode on your post editor and find the image you would like to adjust here's my sample image code
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXegrEZRUvQdwO82W3OC-Fq_YnR5gs110o43dsV2zvT1K_tuMhniTFE8FS2FW_GRky7shJ2Vir_0GJIdPZs7lYWCSzdCoeymNbmcdGo9RBXO-GOWNoeS-tFLECTFtNbMC5PgpwfGjtd4Y/s400/step-01.jpg"><img style="width:304px;height:400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXegrEZRUvQdwO82W3OC-Fq_YnR5gs110o43dsV2zvT1K_tuMhniTFE8FS2FW_GRky7shJ2Vir_0GJIdPZs7lYWCSzdCoeymNbmcdGo9RBXO-GOWNoeS-tFLECTFtNbMC5PgpwfGjtd4Y/s400/step-01.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5303081243051517074" /></a>
yours may look a bit different from mine but don't worry we are only interested in the code highlighted in red this controls the width and height of your image.
You can change it to whatever you want but its best to keep it no bigger than the image size itself also you need to think about the width of your blog
if you are uploading your images somewhere else such as photobucket you can just link them in your posts using simple code below
<a href="http://i44.tinypic.com/5wdliv.jpg"><img style="width:304px;height:400px;" src="http://i44.tinypic.com/5wdliv.jpg" border="0" alt="" /></a>
again adjust the width and height to whatever size you need and the code highlighted in red with the direct link to your image if you do not want your images clickable remove the anchor tag so your code should look like the following
<img style="width:304px;height:400px;" src="http://i44.tinypic.com/5wdliv.jpg" border="0" alt="" />
that way your images will not be clickable i hope you find this useful and thanks for reading comments and suggestions are always welcome
26 Responses to “How to adjust the size of images on blogger”
3L
February 23, 2009Another awesome post. I coding intimidates me, thank you for spelling it out so that I can actually try this myself.
Anonymous
February 24, 2009Hi Lawny! Thanks for the help! But I when I tried to resize, my image was super blurry. I think blogger shrinks it so much, that if we try to make it back to it's original, or close to original size it can't be that way? Most images I upload are 400x600 (about). Then blogger super shrinks it. Then when I tried to change the size...it was just blurry :-( I think they store it in their system as a tiny image? :-(
Either way, thank you so much for your help!!! You rock!!!!!!!!!!
:-)
ArtBPhotography Inc.
March 28, 2009I have the same problem. How I can solve this?
So blurry
Lawny
March 29, 2009@Beata
if your images are blurry you may have adjusted them too wide try adjusting the height and width as shown in the tutorial but dont make them any bigger than the original image size
Anonymous
May 07, 2009Hi Lawny! I'm going to try it!!! Thanks!
Lucy :-)
You rock by the way!!!!!
Blog Yos
May 11, 2009hello guy..nice blog..
thanks for your tip...
Bunda
May 11, 2009i like your article about image here..because if we upload big size of pict ,my blog is loading o=to slow...
horvathjudit
May 14, 2009hi lawny,
i have the same problem as lucy's place.
this is what happens:
- i have an image, its original width is say 1100px.
- i upload it to blogger
- change html part "width: 400px; height: 387px;" to "width: 500px;" (much smaller than the original)
- post the image
and it is 500px wide and it sets the height automatically all right, but it is blurry!
any suggestions?
Lawny
May 14, 2009@horvathjudit
do you have a link to the post so i can have a look ? your post might not be wide enough for the picture so blogger sometimes shrinks them it would be best to post them on photobucket or tinypic and link them to your posts
Serr8d
May 19, 2009If you resize your image, only resize the 'X=' axis and delete the 'Y=' axis. Blogger will automatically calculate the correct Y axis for you.
On the 'old' blogger photos, you simply change the 200, 400 or 800 (the blogger custom sizes) to the one you want. They are a bit more difficult (sometimes they will disappear if you select an incorrect multiplier) but eventually you will get what you need.
Blogger destroys the clarity of an image. If you photoblog (or otherwise care about image quality) disdain blogger and port your decent images from Flickr or Photobucket.
Lawny
May 21, 2009@Serr8d
if you upload an image through your dashboard and switch to edit html mode on the post editor and look at the source code for the image you will see that blogger has pointed you to the full size image when it is clicked while showing a smaller one on the actual blog for example look at the code for an image on this blog
<a href="http://4.bp.blogspot.com/_JgEGJbRLYj4/SXTnGBuZyGI/AAAAAAAABA0/fo-rNjVUjBQ/s1600-h/layout.gif"><img style="width:279px;height:276px;" src="http://4.bp.blogspot.com/_JgEGJbRLYj4/SXTnGBuZyGI/AAAAAAAABA0/fo-rNjVUjBQ/s400/layout.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5293109552795469922" /></a>
note the two differences near the end of the links
s400
s1600-h
simply changing the s400 to s1600-h will show the full size image on your blog with the inline styles width and height set to whatever you set it at
Anonymous
June 03, 2009Lawny,
I did all those changes you just stated, but when I first bring it up it's an empty box. It only works after I click on it, and then go back to the original screen.
Lawny
June 03, 2009@Lauren M. Wenchel
see this comment what is the url of the site you are testing this on?
Scott
June 20, 2009"simply changing the s400 to s1600-h will show the full size image on your blog with the inline styles width and height set to whatever you set it at"
You only need to change it from s400 to s800 in the img code.
I upload the image as normal, resize using the handles in the compose mode in the editor, then switch to html mode and change s400 to s800. Simple and works great.
Unknown
July 01, 2009how to use images placed in blogs like 2.bp.blogspot.com etc
Hi, i tried placing images present in 2.bp.blogspot.com, 1.bp...., 3.bp...., 4.bp.blogspot.com etc.. in my htm page
http://www.yadlapati.com/allmix2.htm
i am unable to see those images in my html page, but i am able to see if i copy the source code n paste the same in a browser..
people can you please trace out the problem n help me out
Thanks
Admin - Yadlapati
www.yadlapati.com
Lawny
July 01, 2009@yadlapati
I'm not sure if blogger prevents hotlinking to the images try uploading them to photobucket or tinypic and see if they work
adia
September 04, 2009hello lawny,
Thanks a lot for all the tutorial that you post, I learn a lot of things.
what i like to know this time
How I put a HOME,About,Contact.above my title like what you did?
aida
wealthyconcepts.blogspot.com
Lawny
September 04, 2009@aida
i have already wrote a tutorial which you can find here
Jeff Branch
October 18, 2009Great comments - I have been having problems with pixelating of photos when I adjusted their size. This helped a lot.
Jeff Branch
October 24, 2009Still having problems with this. Pictures a still pixelated. See this url:
http://jbranch-myworld.blogspot.com/2009/10/photos-of-ridgecrest-south.html
Lawny
October 26, 2009@Jeff Branch
blogger creates two copies of your images see this comment thats why i use photobucket for some of my images
LAVENDER
January 26, 2010Hi Lawny,
Thanks for the useful tips. I managed to solve my prob
Johan Marklund
August 12, 2010Hi, blurry images is an issue for me. I've been working on it for a long time to find a solution.
See this example to understand what I mean.
http://johanmarklund.blogspot.com/2010/08/i-gar-natt.html
look at the colorpic. then compare with how it looks when you click on it.
http://1.bp.blogspot.com/_HZNajSXCEfg/TGP0ds6RL4I/AAAAAAAAAqk/fjapCInqWr0/s1600/mickan-1.jpg
can I change anything in the templete? What shall I do?
tamaka
January 23, 2011your blog is amazed.easy to understand & teaching me a lot.Thanks so much..
PipahAjiz
March 14, 2011well..i understand all of your instruction but i have another problem..i can't find the image code that display the height and the weight..
there's no such number that show it's height and weight..so how can i change it??
can you guys help me with this..?
Chris M.
August 31, 2011Any way that you know of in which you can change the set values for inserted images? I'd like to make "Large" be defined for the dimensions of my blog so that I don't have to adjust it each time. Thanks!
Leave a Reply
Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.
Note: only a member of this blog may post a comment.