Monday, November 5, 2012

Blogger and Uploading Photos

Taking a break from my usual life posts today to share with you a little bit of Blogger advice.

I have come across a few people questioning the 1 GB upload limit for blogger both through the vogue forums and twitter and thought I'd write a nice reference post on the topic.



Things you need to know:
1. Yes, there is a 1 GB upload limit for the photos you use on your blog.
2. Any uploaded image under 800 pixels square is NOT included in this limit.
3. Any image you upload (even if you don't blog it) will count and is stored in your Picasa Web album.
4. This limit applies if Blogger is your host, even if you have a .com address rather than a .blogspot one
5. You don't need to panic about image quality.
6. You don't need to bother with photobucket or another external storage site.
7. Living with this is rather easy.

So that may have caused you to ask more questions.

Firstly, what is Picasa Web?
Well if you head to this link while logged into your google account:
https://picasaweb.google.com/home
It should take you straight to your Picasa Web Albums.

Now I was going to be tricky and show you all mine as an example, but my profile has been suspended after I attempted to convert to Google+ and was told that Miss Directions wasn't a real name...but that's another story.

Okay, so now you can see all the photos you've uploaded to your blog, you may find there are a few multiple uploads and things which you can take your time to weed through and tidy up if you feel so inclined.

...............................................................

How do you re size your images to be less than 800 pixels?

I tend to use Picasa for my photo storage/organisation on my computer. From there it's easy to select the images I'm going to blog, export them and bulk resize to 800 pixels.

If that sounds too hard, you can also bulk edit images using Microsoft Office Picture Manager, which all PCs should have. From the Menu Bar you're after Picture --> Resize --> Custom Width x Height and change the bigger of the two numbers to 800. It should keep the ratio for you.

If you're on a MAC then you can do something similar using iPhoto via Tools -->; Adjust Size.

...............................................................

Now you've got unlimited storage because ALL your images can be kept below the 800x800 pixel limit.

...............................................................

As for image quality, it is easy to think that Blogger downgrades the quality of your images if you're not used to the way it operates. When you upload an image you have a choice of sizes, if you're using the Compose tab for writing posts (as opposed to the HTML one) it will have the following options:

Small - Medium - Large - X-Large - Original Size

What that really means is "your image will be displayed as:

Small - 200x200 pixels
Medium - 400x400 pixels
Large - 800x800 pixels
X-Large - 1600x1600 pixels
Original Size - Whatever you uploaded it as."

Now if you've uploaded your images within the 800x800 limit I talked about above, you picture will look the same for the three final options.

Something that is important to note, your picture size never changes, just how it is displayed...

An example, the following image is displayed as Small/200x200 pixels:


Here it is again displayed as Medium: 400x400 pixels


Now if you were to right click on these pictures and view their web locations you'd get the following:

http://1.bp.blogspot.com/-R93Se269Ckw/UErijlckVuI/AAAAAAAAD2A/LQ42NV1tX4w/s200/Miss_Directions_Red_Collage.jpg

http://1.bp.blogspot.com/-R93Se269Ckw/UErijlckVuI/AAAAAAAAD2A/LQ42NV1tX4w/s400/Miss_Directions_Red_Collage.jpg

Can you see the difference between the two? It's small. The first one reads 's200' where the second one reads 's400'. You can click on one of those links and change those sizes to s100 or s800 and the image will get bigger or smaller. This should work for any number you pick between s1 and s2500...though don't expect to see anything if you make your image 1x1 pixel!

If you're using my example above, you'll also find that once you reach s800 the picture doesn't get any bigger. That's because it was uploaded as 800x800 (it's a square image) so it can't be displayed any bigger than that.

...............................................................

How am I going so far, making sense?

What this means if that you have the ability to change the size your image is being displayed simply by changing the pixel size in the web address for your image just by changing the 's' bit. This might help people who have found that the Small - Medium - Large titles don't quite work for them. And means that you don't have to fiddle around resizing images trying to work out what will look the best on your blog.

...............................................................


On the 800 pixel sizing, for most bloggers that width should be more than enough unless you have a wide blog and some full width photos happening. If you frequently upload lots of really large images that you want displayed really wide, then you may nee to look at other photo storage options. But for most bloggers, 800pixels will be more than wide enough most of the time.

...............................................................

Now for the extra credit part.

My blog posting area has a width of 570 pixels and I like to restrict the width of all my images to 500 pixels. This means that even if I select to display an image as extra large it won't go bigger than 500 pixels. This means my images will never stray over into my sidebar and look messy.
Take this picture for example, viewing it as I write it it is 800 pixels wide and anyone who is reading this post through Google Reader or a feed will see the image as 800 pixels wide...but if you're reading it on my blog it will only be 500 pixels wide.

If you want to do something similar to your blog then from your Blogger Dashboard page, head into your blog then go to Template. Select the orange Customize button and click on the Advanced tab. Scrolling to the bottom of the options you should see one that reads 'Add CSS'.

If you don't know much about HTML coding (like me) then the 'Add CSS' part of your template is the easiest way to make manual changes.

What I have in there looks like this:

.post-body img { display: block; margin-left: auto; margin-right: auto }
.post-body img {  max-width:500px;  height: auto;}

The first line ensures that my images are always centred and the second line makes the maximum width of them 500 pixels and then automatically adjusts the height accordingly. You should be able to modify that to suit your needs.

...............................................................

Well I hope I haven't managed to confuse too many people and that it clears a few things up for those of you who have been wondering. If you have any questions please feel free to either comment or email me at missdirections(a)gmail.com and I will try to help.

I don't intend to make a habit of tutorial posts (though I have some DIY projects to share with you soon) but if you have any feedback on the way this was written, please provide that as well.

Hope it helps!

14 comments:

  1. You are the best! Thanks so much for writing this, it really helps!

    ReplyDelete
  2. Miss D, you are always so handy with your blogging codes! thanks for the tips!

    ReplyDelete
  3. Thanks so much for this post. It is really lovely of you to take the time to explain this to technology challenged people like me. I have had a whole heap of pics disappear on me recently so this post of yours helps explain a lot.

    ReplyDelete
  4. Wow you have really sussed it all out! I haven't had any issues as yet but when I do I will know where to come. Thanks!

    x Eve

    ReplyDelete
  5. Thanks! I did not know that i had Microsoft Office Picture manager and I can bulk resize. BAH! DOH...

    ReplyDelete
  6. I like using photobucket, I suppose because it is the way I have learnt to do it... and resizing in the html part of the post editor... I am probably doing it the hard way (like most things I do lol)

    ReplyDelete
  7. Thank you so much! I haven't been able to do a post in weeks because I've reached my photo limit. Just found a folder with hundreds of photos that I can delete. Will take a while, but I can do it!

    TDM xxx

    ReplyDelete
  8. Oh wow so much info, thanks for taking the time to put this up!

    ReplyDelete
  9. This is great- I think I just paid the $$ when I reached my limit.

    x
    Michelle
    www.michellesstylefile.com

    ReplyDelete
  10. OH MY GOODNESS ASH!!! I cannot thank you enough!!! I panicked when I tried uploading pictures onto my blog and couldn't but remembered seeing a tweet you'd sent out telling someone to check out your blog where you'd talked about it.

    May God bless you and brilliant, helpful brain.

    ReplyDelete
  11. Thanks for share this information. Bust i Suggest Website for more space for Image Upload

    ReplyDelete