Tutorial 1: Making Photos Appear Larger on Blogger


I'm in LOVE with I ♥ Faces. And every week I log on to participate in their photo contest and admire the entries from around the world. And some weeks I stumble onto amazing pictures that are so cute and fun, and yet, they are posted so tiny you can hardly appreciate the love that went into capturing the moment. So when Angie, co founder of I ♥ Faces, asked me if I had a tutorial to write for them, I immediately thought "YES!"

When I started blogging I was a simple cut and paste kind of girl who had NO idea what cyber text was or how to manipulate it. I thought that when I uploaded my photos to Blogger, the "large" size choice for my images was the largest possible display. WRONG! Fortunately, my talented BFF, Julie Rivera, takes pity on me and shares her many secrets. She taught me about rewriting my "Html" information, and life has never been larger or clearer for my blog since! There are two simple things anyone can do to their blog Html to make their photos appear larger than normal. There are so many wonderful Blogger posts out there, everyone should be showcasing their work large enough for us all to appreciate it!

To start, I size all of my Blogger images to 300 DPI and usually 5" x 7" or "5 x 5" for my square crop. This typically gives me a file size between 6MB and 8MB.



I add my photo to Blogger by the standard upload method:


Select "large" as the image size. Click to upload:


After the image has uploaded you get a paragraph of what I call "cyber text" in your Blogger entry.


And the original image will appear in your blog as this size:


Now for changing the Html or "cyber text" to make your image larger. Locate the area in your Html that I have highlighted and delete only that section: width: 400px; height: 294px; It is very important that you do not delete too much or too little, every punctuation matters!


Next you will locate this other little tid-bit I have highlighted and you will change this number from 400 to 640. This is a number you can experiment with but I always use 640.


Your NEW Html or "cyber text" should look like this, with the exception of your file name instead of mine:


And your newly enlarged image should look like this:


Keep in mind:
- Every cursor and punctuation will effect the display of the image so if your image does not display properly, upload it again and only delete the text specified.
- This process will NOT work properly if you have an image that is sized to 72DPI or other web sized files. Please size your file to 300DPI before uploading.
- These directions may only work in Blogger.

31 comments:

Touch of Love Photography said... at March 3, 2009 at 1:56 PM

Wonderful tutorial and thank you so much! I did this and it worked well, however... now I have to change it because my photos are too big and the template I am using is too narrow... any pointers on adjusting this?

Julie Rivera said... at March 3, 2009 at 4:06 PM

Karyn, remember we had to adjust the size of your template under Layout->Edit Html, too? I think we changed the header wrapper to 940px and the outer wrapper to 950px. Then the main wrapper was moved to 700 px. Did we change anything else?! Great tutorial!

Miti said... at March 4, 2009 at 8:23 AM

Thanks Karen for visiting my blog and for the great advise on resizing. I definitely going to try it.

Annette said... at March 6, 2009 at 12:00 PM

Thank you for taking the time to make a tutorial. I used it today and found it very helpful.

Kim said... at March 6, 2009 at 11:20 PM

AWESOME! Thanks for this! YEAH!

Kate said... at March 7, 2009 at 2:20 PM

Thanks for the awesome tip!!! I just wondered as I was playing around with my photos.....can you change that number s640 to any other number to determine size? I tried to make it like 540 and the pict didn't show up. Am I doing something wrong? Thanks!!

Mireille said... at March 9, 2009 at 5:40 AM

Hi Karyn, I am so glad for this tutorial, but I was wondering if I could do that to my header of my blog as well. Now it is not completely stretched as the width of the screen, and not centered. Is this possible as well?? I wanted to email you personally but can't find your details? So I do it this way and hopefully you find this question?!

Gibb Family said... at April 21, 2009 at 8:56 AM

Thanks! I've beeen wondering how everyone does that. I'm excited to use it now. Love you blog and pictures too.

BB said... at May 11, 2009 at 5:34 AM

Thanks for this Karyn... have you any idea why my photos vanished at the second part of this exercise? Is it because they weren;t 300dpi? I cannot have mine this large or my internet connection (and download limits) would buckle under the strain!!! Help...

:-)
BB

BB said... at May 11, 2009 at 6:25 PM

Hello again Karyn - my photos are still disappearing even if I change the s400 to s410!!! Something is stopping me changing this html... and its making my head hurt!!!

My email is bushbabeaustralia@gmail.com (can't reply to the comment you left at my site!)

niartist said... at July 29, 2009 at 7:32 AM

THANK YOU THANK YOU THANK YOU! Oh I can't tell you how happy I am that you've solved my dilemma through this post! Oh this was perfect to find today! :) Thanks so much! Now - is there anyway to keep this in your forever HTML so that you don't ahve to change each individual photo? Not that I mind - I mean, this works great ... just curious if you knew. Thanks again!

Christie said... at July 30, 2009 at 2:39 PM

Thanks for such a great tutorial! I will definitely have to try it out. =)

www.kingbrayden.blogspot.com

me said... at September 6, 2009 at 10:50 AM

i needed to make my images larger on Blogger and googled for help on this topic....I landed on your site, and I am one happy camper. Thank you. ALOT. =)

Not Afraid to Use It said... at October 8, 2009 at 12:35 PM

Thanks for a great tutorial. It was exactly what I have been looking for. Cheers!

Cheryl said... at November 23, 2009 at 3:02 PM

Soooo amazing! Thanks for this tutorial it was PERFECT. Exactly what I was looking for!!

God bless you!

Jenny said... at December 6, 2009 at 8:32 PM

Thank you so much! This was so much easier than another tutorial I found.

Cahya said... at January 21, 2010 at 4:20 AM

Thank you so much!...
it's been 3 years I use blogger for my blog, but about making photos appear larger is new to me...
PutImage

white bathroom cabinet said... at January 21, 2010 at 3:19 PM

not difficult to try.
I will try on my blogspot blog.
thanks for this tutorial.

sharemoreinfo said... at January 22, 2010 at 12:38 AM

thanks for you info

peluang usaha ahasu gnaulep said... at January 25, 2010 at 12:11 AM

thanks for information / tutorial good niche

astaga.com lifestyle on the net said... at January 25, 2010 at 12:12 AM

now I have to change it because my photos are too big and the template I am using is too narrow



Peluang Usaha Ahasu Gnaulepastaga.com lifestyle on the net

Unknown said... at March 15, 2010 at 8:35 PM

Ha, so funny that the very reason I have found your tutorial is b/c I posted my first I {heart} Faces link and my pic is so small. I will now attempt to follow your tutorial to make my photos larger.

Unknown said... at March 15, 2010 at 8:43 PM

It worked! Thanks so much for the great tutorial. I'm off to find a way to change the template so that every photo comes up this way.

Carissa Christine said... at June 23, 2010 at 7:03 AM

This was SO helpful! Nobody else's answers worked for me, so I really appreciate that you shared!

tanya said... at August 1, 2010 at 8:02 PM

THANK YOU! I have been looking for this answer for months. It totally works, and since the tutorial was on a horizontal, i was unsure if it would work on the vertical pix - and of course it did. You're like a photo fairy-thanks again! :)

Marta said... at February 8, 2011 at 3:07 PM

Hey, thank you tons for this step-by-step explanation! I already applied it to my blog and I am so happy to see bigger pics there.
One question -- some photos after resizing loose a bit of quality. Any thoughts on that..?

Remind said... at February 14, 2011 at 3:12 AM

Thanks for this tutorial Karyn, it's really helpfull one, i'm glad that i found it : ))

ohcolleen said... at February 27, 2011 at 3:48 PM

Thank you so much! I have been searching all over online trying to find a solution for this, and nothing I've found so far has worked. But this did! Thanks a million!!

Rational νεόφυτος said... at March 9, 2012 at 9:27 PM

Just what I was looking for. thanks for the tip!

DAFASHIONFREAK said... at July 3, 2012 at 2:14 AM

thanks a lot for this tutorial. now my photo problems are over! bless your heart.

- Maudleen
www.dafashionfreak.blogspot.com

ILA JOHARI said... at November 24, 2013 at 11:05 AM

Thanks much :) :) :)