X

Tackle It Tuesday – Clean Up Your Graphics

5/5 - (1 vote)

Today's "Tackle It Tuesday" theme is going to address how to make your blog load faster as well as give you many more search engine links.  I'm fairly new to this whole blogging hobby, but I have been dealing with HTML code, in an amateurish way, for quite a while.

I'm a big believer in making any website or blog more streamlined, because there's nothing worse than waiting for what seems like an eternity, for a page to load.  I myself have left many people's blogs and have never returned, for just this reason.  Everyone's time is valuable and what could be slowing your site WAY DOWN is the abundant use of graphics.

I personally enjoy visiting Website Grader (http://websitegrader.com/) to fully analyze my blog for free.  Simply type in your blog address as well as your e-mail address, and Website Grader does the rest.  It will give you an in-depth report on a full scope of issues and even give you a numeric "grade" between 1 and 100.  My grade is currently a 75.  When I first started, it was a 62.  Here's what I did on "Tackle It Tuesday" to raise my score:

PLEASE DON'T TRY THE FOLLOWING IF YOU ARE NOT COMFORTABLE TINKERING WITH HTML CODE.

Also, make sure that you back up your blog page before continuing. Find your image graphic HTML code on your site.  Most of the time, this is very prevalent in your sidebars.  Then, graphic by graphic, search the html code and see if there is an alt="   " code inside that html image code. If there is, then great! You do not need to do anything else.

If there is NOT, then simply add it inside the bracket with a description of the graphic.  Please see the example below:

BEFORE:

(I used a Twitter Button graphic for the example)

<a href="http://twitter.com/toothpaste2go"><img src="http://www.mommylivingthelifeofriley.com/wp-content/uploads/2010/03/2712.png" width="144" /></a>

(As you can see, no alt command listed)

AFTER:

(Just add the alt="   " command inside the bracket...in this case, right after the "144")

<a href="http://twitter.com/toothpaste2go"><img src="http://www.mommylivingthelifeofriley.com/wp-content/uploads/2010/03/2712.png" width="144" alt="Twitter Button" /></a>

Believe it or not, when I did this with all of my graphics, this automatically cleaned up and shortened my page's loading time.  If you'd like to also add links to these graphics, thus giving a search engine more to love about you, then add one additional string after the alt="  " command.  Add a title="  " command.  When you do this, anyone that hovers over your image will see this text.

Search engines also recognize this text and so you can actually boost your traffic with this as well!  One note of caution ~ Only use a few words in your title because one line of text is all that can be displayed, so keep it short and sweet.

Here's what the above example would look like with both commands inserted:

<a href="http://twitter.com/toothpaste2go"><img src="http://www.mommylivingthelifeofriley.com/wp-content/uploads/2010/03/2712.png" width="144" alt="Twitter Button" title="Tweet Me!"/></a>

More traffic and faster loading speeds?  What more could you ask for from a little tweak to your HTML coding?  So, give it a try...this is definitely a "Tackle It Tuesday" project that is worth the hassle!

 

Melissa @ Mommy Living the Life of Riley: I'm a former 7th grade Science teacher turned stay-at-home mom that lives in Houston, Texas. I am married to my college sweetheart and have a beautiful daughter named Riley, that definitely keeps me on my toes! I am also involved in starting a small business which would both manufacture and sell an invention that I've patented, called Toothpaste 2 Go. I love interacting with my readers and hope to learn as much about you as you learn about me!

View Comments (1)