Thursday, August 28, 2008

Larger Photos on Blog

How do I make my photos larger on the blog? MY short answer is: trial and error after reading another photographer's tutorial HERE.

A longer answer, but still not a picture by picture tutorial (because I have a HUGE headache and don't want to write one) is that you need to click the HTML tab (after the photo has uploaded) instead of the compose tab so you can see all the computer babble. Look through the code for the s400 number and it to s800 (assuming you uploaded the photo in Blogger on the large photo size setting. If you usually upload size small or medium the number will be 200 or 400 - you can still double those). Don't try 600. It will just make the photo disappear. You have to double the number. This will double the size of your photo.

That's great unless you don't actually have a margin wide enough to fit a photo that large. This is where you start messing with your template HTML. I recommend SAVING your template before experimenting. I've also noticed that there are a bunch of bloggers who must have a WAY wider screen than me. I find it irritating that I have to scroll to the right to see all of their blog. They have chosen margins too wide (for my screen).

Another factor in getting your pic to display correctly is whether or not you have resized your photo for the web AND what size you made them. If you are uploading a full large file, it's going to be different than one that is sized to 400x600 pixels. I use 600 wide for all my photos because my inner margin for my text on this blog is set at 610. This way the tops of my horizontal AND vertical pics are the same no matter how I've cropped them. Remembering one size is what works for me. There might be different hoops to jump through if you are hosting your photos at Flickr or Photobucket. I still have a wee bit more space on Picasa, so it's easy to keep doin what I've been doin. Soon I'll need to get another hosting site. (Another advantage of resizing your photos is that you won't use up all your free space so fast:)

Okay- I'll show you a couple examples, but I'm not going to write all the technical stuff. I'm supposed to be cuddling my kids for bedtime. * * * * time lapse * * * * * (I did cuddle my kids, now I need to finish this up and go to bed).

Full Edited File Uploaded with HTML #400 changed to 800


Full Edited File Resized & Sharpened for web (I do that in Photoshop Elements) for Web with HTML #400 changed to 800


Full Edited File uploaded in Google as Large Size - still at s400


Same Full-sized Edited File Photo uploaded in Google as Large Size and then HTML s400 changed to 800


Full Edited File Sharpened & Resized for Web uploaded in Google as Large Size and then HTML s400 changed to 800


And one more because he's so cute.

Resized 600 pixels wide and uploaded as large photo


This photo was resized at 400 wide and uploaded as large photo


This photo was resized to 400 pixels wide, uploaded as large size, then I changed the HTML from 400 to 800. The photo still doubled it's size, but the original I was working with was smaller.

Same photo that had been resized to 600 pixels wide & changed to 800


Now are you TOTALLY confused??!!! I played with the numbers and my blog to find a way that works for me. Good luck configuring yours!!!!

3 comments:

  1. Wow Thanks Jen! I am going to have to print this and read it again tomorrow... :)

    ReplyDelete
  2. I'm sorry, are my blog margins too wide? :(

    That was a great tutorial, thanks!

    ReplyDelete
  3. Andrea - Oops! Now I'm embarrassed that I made the wide margins comment. Yes. Your margins are too wide for my screen, but I usually don't notice because 1)I read most of the blog through the google reader & 2)Because your photos and text are right down the middle - I'd only need to scroll over to get to the link list. Some photogs have their text & photos falling off the page. Truth is - I'm the one using the dinosaur screen.

    ReplyDelete

I can't wait to see what you have to say...