One of the most important tools you can use to promote your writing is through the use of images and graphics. Depending upon where you get your stats from, I've heard that a blog post with an image is as much as 10 times more likely to show up in search engine results.But there are other reasons beyond the technical side: people love pictures! They just do. We are visual creatures and images help us connect ideas, concepts, and patterns more quickly.
In this article I discuss some of the resources I use to gather images, image editing tools, the technical side of image tags, and some tricks I use to get the image sizes just right while I'm writing content for my company, Creative Content Experts.
Finding Images
There are loads of resources available for finding free images. Here's the thing: you should ALWAYS attribute the work to the author when required. It's a simple matter of courtesy. Yes, you could get sued if you use an image without permission, but I've found that treating people right up front is a much better way to go.
Readers typically do not get too distracted when you reference an image source. You don't have to go over the top and give the photographer or artist a huge spot on your page. But definitely take a few seconds to read their restriction for use. For more information on various creative commons rights and uses of works, check out Creative Commons.
You can always start with Google. A quick images search with the word "free" in the search text should turn up quite a few images you can start perusing through. As you visit the site for each image, make sure the artist grants permission for use. This is very important. If the phrase "All Rights Reserved" is on the page without any further instructions, don't use it...period.
Here are a few other sources I regularly reach for:
- http://photopin.com/
- http://search.creativecommons.org/
- http://www.flickr.com/creativecommons/
- http://commons.wikimedia.org/wiki/Main_Page
If you've searched through those above resources and can't find what you're looking for, then spend a few bucks and pay for it. It's worth your time.
Editing Images
Once you have your images, you probably don't have the exact size image you need yet. I use Photoshop. It's expensive, but writing and editing is my job, so I can/must afford a high-powered tool. Adobe has a version of licensing that allows you to pay monthly to own Photoshop, which can be worth it if you just need to do a bunch at once and then cancel.
There are many wonderful, free image editors available for download, though. While I use Photoshop, I have many writer peers who use these with excellent results:
- GIMP - http://www.gimp.org/ - works on PC, Mac, and Linux
- Photoscape - http://graphicssoft.about.com/od/freesoftware/fr/photoscape.htm
Between these two free graphic editors you can get just about anything done you want. The main points to remember is that graphics on the web are typically around 72 pixels/inch and are measured in pixels, not inches or other measurements.
Images in Content
Once you have your images and you've scaled or cropped them to the right size, it can be tough to get them to sit on the page properly. I use software called Dreamweaver by Adobe for 99% of my HTML editing. Even if I'm writing on a blog like this and they have an HTML editor, I always go to Dreamweaver to do any editing and then paste it over.
But if you don't have a fancy editor and just need to cover the basics, then let's start with the easiest stuff and build up to some HTML.
First of all, you need to understand image alignment. There are four kinds of alignment that you're typically going to deal with - none, left, center, and right. None means that the image takes up its own line in most cases, but leaving an image's alignment settings blank or set to none can bite you later. It's usually better to specify based on the image size.
I typically align right or left so that the text flows around the images. This is usually the most visually appealing and ultimately depends upon the client's needs. I rarely use center or none as a setting. Even when the image is full-size - meaning it takes up an entire line of text in terms of width - I'll use center as my alignment.
Second, take advantage of the alt and title tags. Alt tags are meant to provide alternate information and are generally believed to be more important for search engines. Title tags for an image are what show up when you hover the mouse over the image.
I use both. If I have specific keywords I'm using for the article I'm writing, I will use these keywords in the alt tags. I will do the same for the title tag but might add a little more information for the reader.
Lastly, let's look at some HTML to see how these might look in code format. Most writers will be able to use a visual editor like Word or a built in editor on a site get the job done. But if you find yourself in over your head, here's the nuts and bolts detail info:
<img src="image.jpg" alt="keyword" title="keyword" align="left" />
Don't get too worried about all of this. My goal isn't to teach you the finer points of HTML, but to expose you to the basics. We've already covered everything in the above code except for the the img and src parts.
The img part just tells a web browser that it's dealing with an image, like p tells it that paragraph text is about to follow. The src piece tells the browser where to find a file. This is almost always a static link to an image file somewhere on the Internet.
If you want more detailed information you are now armed with the vernacular and basics to go learn all you want!
Tips and Tricks
So if you've gotten this far you may have a few questions, like "How do I know the size images are supposed to be?" I use Google Chrome for all my web browsing and it has a special feature in the right-click menu called "Inspect Element". Firefox has this feature built in as well.
Go to a site that has an image or content area you want to examine and right click on it, select element and mouse over the new window to find what you're looking for. Here's a screenshot of this blog:
In this example we can see that the width of the blog content area is 586 pixels. So I saved the image at 575px just to give myself some room for borders and the like. You can find all kinds of great information about a site using this tool.
In Sum...
Images are a big part of making content standout. This goes for search engines and, more importantly, your readers/clients. It does take a lot of extra effort, but once you're comfortable with the tools you'll get faster and faster. The extra effort goes a long way towards happy clients and I've never had a client tell me to quit sending images and graphics.
