How to adjust the size of images on blogger

Today I'm going to show you how to adjust the size of images posted on your blog since most of my friends are having problems with changing the size of images

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”

Another awesome post. I coding intimidates me, thank you for spelling it out so that I can actually try this myself.

Hi 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!!!!!!!!!!

:-)

I have the same problem. How I can solve this?
So blurry

@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, 2009

Hi Lawny! I'm going to try it!!! Thanks!

Lucy :-)

You rock by the way!!!!!

hello guy..nice blog..
thanks for your tip...

i like your article about image here..because if we upload big size of pict ,my blog is loading o=to slow...

hi 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?

@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

If 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.

@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, 2009

Lawny,

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.

@Lauren M. Wenchel
see this comment what is the url of the site you are testing this on?

"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.

how 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

@yadlapati
I'm not sure if blogger prevents hotlinking to the images try uploading them to photobucket or tinypic and see if they work

hello 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

@aida
i have already wrote a tutorial which you can find here

Great comments - I have been having problems with pixelating of photos when I adjusted their size. This helped a lot.

Still having problems with this. Pictures a still pixelated. See this url:

http://jbranch-myworld.blogspot.com/2009/10/photos-of-ridgecrest-south.html

@Jeff Branch
blogger creates two copies of your images see this comment thats why i use photobucket for some of my images

Hi Lawny,

Thanks for the useful tips. I managed to solve my prob

Hi, 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?

your blog is amazed.easy to understand & teaching me a lot.Thanks so much..

well..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..?

Any 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.

Copyright © 2019 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger