August 25, 2006

How to Use a Graphic or Photo in Your Blog Post

I'm sure there's other, better advice out there on how to do this... but I have had so many people ask me, I thought I would give it a stab here on Sprittibee to help out my fellow bloggers. This may not be on the topic of homeschool, but lately I have been too busy to stay on topic anyway. Here below are my simple instructions on how to post photos in your Blogger or HSB Blog (These instructions will work with most any blogging platform, because I am giving you the basic HTML code to post photos rather than the click-and-point instructions for your weblog hosting service):


If you have a Blogger Blog and are completely web-illiterate, you can still upload photos that can ONLY be used on your blog by following Blogger's easy upload instructions. However, to make your photos more versatile and enable you to use them anywhere (other blogs, eBay, homepages, etc.) it is better to use an image hosting service that allows hotlinking. Uploading photos from your computer's hard drive and posting them on your blog is not hard. It can be done with just a few simple clicks. The hardest part is making sure your photo is the right size for your blog. You don't want to post a HUGE photograph that will cause your blog template to be shuffled around on the page (or send your sidebar to the bottom where no-one can see it).

To resize images, I use FastStone Image Viewer. It is a free program that allows you to view, manipulate, remove red-eye, and resize or crop images (and much more). I LOVE IT. I did a post about it earlier this year. I'll do a tutorial on that some other time, but for now... I am assuming you have a photo that is small enough to fit in your blog!

Choose the photo you want. Using a photo from the web is OK if you have permission from the owner and give them credit. There are many places that allow royalty free use of stock photos for bloggers. To use an online photo, you simply have to right click and save it to your documents on your computer (I save mine in "My Pictures")... and then upload BACK TO the web in your image hosting account. That seems like an added step since it is already on the web to begin with, but if you copy the picture's location URL and post it, you are stealing bandwidth from the original photo poster... and that is not good web etiquette.

I started out using Geocities to host my photos, but if you have a lot of people viewing your blog, Geocities will limit how many times your photo is allowed to be seen in an hour. This really started to be a problem for me once my blog started getting over 100 hits a day. Someone kindly suggested that I use PhotoBucket. Maybe it was Sheri... I can't remember (Whoever it was - THANKS!). Getting a PhotoBucket Account is quick and FREE. It is a image hosting site that will also allow you to upload short video clips and other media. It automatically tags your images with a URL address (hotlink) which makes your job so much easier when you are ready to write the simple HTML code to place the image in your post. If you don't want to use PhotoBucket, you can also use Flickr. Here's a simple tutorial on how to use Flickr Photos in your post.

Once you have a hotlink/URL for the photo, you can log in to your blog and open your post in which you want the photo included. It is best to view your post in "HTML VIEW" (Blogger allows this). Here's what the tab looks like:

If you've never used this view of your post before, it might seem intimidating, but don't be shy. It is easy once you try it a few times! The code for pasting an image in a post using HTML is VERY EASY.

Here it is:

THAT'S IT! Now if you view your post in "Compose" or "Preview" mode (Blogger) you will see the image. If you really want to get fancy and wish to format the image to be in the CENTER or RIGHT or LEFT, you simply put these tags AROUND the one above:

There you go. Now you are "image-HTML" savvy!

Buzz Words: , , , , , , , , , , , , , , , , ,


Martin LaBar said...

Good job! Thanks for the tip about the free image editing software.

I appreciate your emphasis on abiding by copyright restrictions.

Sprittibee said...

Thanks Martin. :) Nice to see you again. Are you an artist?

jordanmcclements said...

I have a lot of fairly good quality, free photos that I would like bloggers to use:-

Trisha(Lucky girl) said...

hi my name is trisha
can you make a glitte text and in the website
make me a website please

Trisha(Lucky girl) said...

please make me a website

Heather said...

Trisha, I would have emailed you back but you are not leaving a valid email address when you comment. Normally, people will try and use the contact page to email me if they have a personal concern. Please do so and we can talk about this.


Mike Howard said...

Trisha I'm trying to post a logo on my blog that was sent to me and downloaded to my documents I want to post it as a link in my sponsorship element or just as a side bar. How do I get it out of my documents?



Some posts on this blog contain affiliate links or sponsored links. I receive a small commission whenever a product is purchased through an affiliate link. Sponsored links are paid for by a company who wishes to improve their Google ranking, but I always check to make sure these are reputable sites and never allow any links that are questionable to be placed.

The links in my "Sweet Linkage" section are either sponsored links or personal links that I find interesting (including the links to the blogs that both of my teen children run).

I occasionally run ads on my blog in exchange for money or traded advertising, or receive products in exchange for a review or giveaway posts. I also participate in campaigns by brands that offer to pay me to write about their products after using them. Any post that is sponsored will be noted as such. All opinions expressed on are my own, and any review, give-away, sponsored post, graphic ad, or product that I mention or link to are ones that I believe are reputable and worthy companies.


blog design:

blog archives