Question about Blog Photos: Storage, Uploading & Sizing

 Print Post    

Here’s a question from a reader:

I’m trying to figure out the best and most cost efficient way to upload pics to my blog.  I was using Blogger but apparently the pics I have on Picasa Web Album are taking up too much space and now I don’t have space to upload using Blogger.

I am learning about Flickr.  I would like to get your recommendations on how to best store pics and the best software to use to upload pics to my blog.

---

If you plan on blogging for any length of time and routinely include photos, storage will become an issue eventually. There are options to consider:

• Have your own FTP or web hosting account with a service like GoDaddy, and story your photos there. This gives you alot more flexibility and scalability but you have to take some time to learn how to manage your own hosting account. For advanced users, or those who don’t mind a little learning curve, this is the best choice in my opinion.
• Or, you can use a service like Flickr, Shutterfly or Photobucket.

Since Flickr is so common, we’ll use it as our example throughout this post. It is a good choice for those who are beginning or want a set of easy to use tools that do not require a significant learning curve.

Flickr (and other “free” services) is a good choice but at some point you’ll need to start paying for an account so that space will not be an issue.   Like all things, if you want to progress past a basic level, or hang in for the long term, you have to spend a few bucks occasionally, otherwise you severely limit yourself.

Flickr has the tools to upload and store your photos. Basically, you’ll use an IMAGE “URL” instead of uploading “FILE” to import an image (see the Blogger example graphic at the top of this post).  That is the simplest way but then you are also stuck with Blogger trying to resize your images to “small, medium, large”.  YUCK!!!

Sometimes Blogger’s attempt to make things simple also makes things poorly done. Their image import tool is AWFUL, but simple (WordPress is much better but far from perfect).

A Better Way to Get Your Photo Into Your Blog Post

The better way… switch to HTML in Blogger or WordPress.  Take 37 seconds and learn some simple HTML for placing an image with a known URL:

By manually putting in the HTML for an image, Blogger will not RESIZE or mess with your image. It will simply go get it at the address you’ve given.  The yellow highlighted area in the graphic above would be replaced with the URL (address) to your Flickr photo.

Here is some sample code to get you started. Just copy this into your post WHILE IN THE HTML VIEW, and then put in your photo URL (address) wherever it may be located:
<img src=”http://www.website.com/thepath/filenamehere.jpg” />

You can retrieve this address by using the SHARE tool in Flickr (on most web pages, you can RIGHT CLICK any image, view the properties, and get the image URL).  Navigate the photo you want to use, then click the SHARE icon on the upper right corner:

SPECIAL NOTE: clicking  “Grab the Link” gives you a link that will lead people to your Flickr page. This is NOT the address of your image you use in your HTML. It is not the image location, it is the PAGE ON FLICKR where people can view your image. I note this for you now because alot of people are confused by it.

To get the actual address of the image you can use in your blog post, click “Grab the HTML“.

OPTION ONE: Use the Default Flickr HTML code

The default Flickr code that shows in this box “links” your image back to the original on Flickr so that when it is clicked on by your blog readers, they are taken to your Flickr page. If you want this behavior (your photo links back to Flickr), then use the entire Flickr HTML code exactly as they give it.  Copy this code from Flickr… in HTML VIEW at your blog, paste this code where you want the image to appear.

HTML TIP: Links are created using the “<a>” tag. In HTML, the “<a>” tag is what links text or photos to another web address. Learn something every day, huh?  Want a basic over of HTML? It’s not hard, I promise. View my tutorial/demo here…

OPTION TWO: Just Use the Image URL

If you want to embed the image with NO LINK back to Flickr, you need to copy just the image location from that HTML code provided by Flickr.

You’ll find the image address after the “src” attribute of the “<img>” tag. I’ve highlighted it for you (you’re getting good at this HTML thing, huh?). This is the actual address/location of your photo:

<a href=”http://www.flickr.com/photos/34902627@N08/4273451849/” title=”IMG_9006 by brentriggsflickr, on Flickr”><img src=”http://farm3.static.flickr.com/2754/4273451849_a03535696e.jpg” width=”500″ height=”333″ alt=”IMG_9006″ /></a>

The address highlight yellow above  is the URL to your photo. You will put this address after “src=” in the <img> tag of your HTML. So if I wanted to post this photo from FlickR, I would use this code:
<img src=”http://farm3.static.flickr.com/2754/4273451849_a03535696e.jpg” />

Here are some tweaked examples. To center your photo and add a caption below it:
<center><img src=”http://www.website.com/path/filename.jpg” />Your caption here</center>

To have your photo float over to the RIGHT side and the blog post wraps around it:
<img src=”http://www.website.com/path/filename.jpg” style=”margin: 10px 0px 10px 10px; float: right;” />

To have your photo float over to the LEFT side and the blog post wraps around it:
<img src=”http://www.website.com/path/filename.jpg” style=”margin: 10px 0px 10px 10px; float: left;” />

To prove it works, here’s the photo… it is not resized, compressed or otherwise manipulated by WordPress or Blogger because I am simply linking to it, NOT IMPORTING IT. Right click on the image, view the properties, and you’ll the photo is located at Flickr:

Now What?

Okay, now you know how to link to images instead of import them. One thing you’ll want to learn to do is PROPERLY SIZE your images before linking to them. Why?

Most people upload huge photos, link to them, then can’t figure out why 1) they are running out of storage, and 2) their blog takes forever to load.  You have to learn to OPTIMIZE your photos; the basic task for that is resizing them.

First, you have to pick a width, and make sure all your photos are resized to that width. What I do is use a MAX WIDTH that I know will work for my blog format. For my blogs, the content are (the post area, what you are reading now) is 600 px wide. So I store all my photos at no wider than 600 pixels wide.  This brings down the amount of disk space (file size) your photos use, and makes your blog load as fast as possible.

One of the more common requests for help I get is “my blog takes forever to load!” Besides removing about ten gagillion “widgets” from your blog, the usual culprit are huge pictures that have not been resized down.

So how do you resize?

In most image editing software, you use a very technical and mysterious tool or menu choice called: RESIZE. Yes, it’s that simple.

TIP FOR FLICKR USERS: Enable the use of PICNIK in Flickr and this type of easy, basic image editing is a breeze. To enable Picnik, click EDIT PHOTO when viewing any of your images, and Flickr will ask your permission to enable Picnik. A GREAT CHOICE for beginners wanting to get started with basic resizing, cropping and image enhancement.  Inside of Picnik, you’ll find an easy to use resize tool.

Some other basic image editing software to consider: Picasa, Windows Life Photo Gallery, Picnik, Paint.Net, GIMP and PaintShop Pro.

Shameless Promotion

There’s a lot more you can and should do to improve your photos past resizing. So this is where I shamelessly pimp my latest book which teaches you the basics of image editing your digital photos:

Whether you’ve got a pocket digital or a DSLR you still haven’t figured out… this is the digital photography guide that will change your life, make you rich, improve your marriage and make your teenagers pick up after themselves!

Okay, it won’t do any of those things but it will FINALLY clear up all the digital photography stuff that has kept you stuck on the “full auto” setting. This is the digital photography you want… I guarantee it, or I’ll give your money back, period. Find out more here…

I would be very grateful if you would share this with someone, or put it on one of the social sites:

 Print Post