Have you heard that you should be putting images in your blog posts?

It’s true. There are so many advantages to putting images in your blog posts. First off, they catch the reader’s eye, and you’re more likely to get them to actually READ the content that you’ve slaved over.

Second, they improve the probability that your website will be displayed in search engine results….that is, as long as you’re including information that will help your SEO. I’ll be writing a post entirely dedicated to that in a few days.

Third, if you plan on sharing your content in social media platforms, images are the way to go. Think about how you scroll through your News Feed on Facebook. Do you look at every post that is there? Do you read every single entry? Or do you scroll through, stopping when you see an image that catches your eye? Yep…..we all do it. Your potential customers do it, too.

So, it’s clear that you should be using images, but is slapping an image into a blog post the best way? Will that be the most attractive way to insert an image? Big fat “nope!”

It’s actually pretty easy to add a colorful border and a drop-shadow to an image right in WordPress. Or you could use a free picture editing tool to dress it up before you insert it. Let’s take a look at these methods.

Adding a border and drop-shadow

When you insert your image using the “Add Media” button above the blog post editing window, just select the image and insert it.  You’ll go back into the image editing window to make the changes that will make your image really catch people’s eye.

Once the image is there, click the image one time and then click the little picture icon in the top left corner of the image.  If you want text to wrap around your image (be displayed next to the image instead of having the image above or below all of your text), select the position you’d like the image to be in.

Add a title to your image that is descriptive of what you’ll be talking about in the blog post.  You can use the title of the blog post as the title for the image as well.  And add the alt text, which helps your website get found in search engines.  So you’ll want to use keywords that are specific to what your target audience will be searching for.

Also, by default, the image is linked.  It’s just linked to the whole image, which will just display the image in its entirety when the link is clicked.  I personally don’t like for the image to be linked to itself, so I select “None” under the image link section.

Once you have that information entered, click the Advanced Settings link at the top of the image editing window.  Now we’ll work on adding a border and a drop shadow.  You have to do this with code, but WordPress helps you out a lot.

First, enter a number in the “border” box.  You don’t have to put “px” next to it – WordPress does that for you.  So, if you enter “1,” you’ll get a 1px border.  That’s the thinnest border you can have.  I usually use a 2 or 3 px border.  Once you put your number in the border box, hit the Tab key on your keyboard, and you’ll see that WordPress enters the code for the border in the Styles box above the border box.

Now all you have to do is change the color of the border.  You can either just replace the word “black” with the name of another color, or add the hex code for a specific color (that’s a 6-character code that begins with a #).  Don’t worry if you don’t have a hex code….just enter a color name and you will get that color!

You can also change the style of the border by changing the word solid to dotted, dashed, double, groove, ridge, inset, or outset.  (**Be aware that if you use double, groove, ridge, inset, or outset you’ll have to have a higher number in the border box.  Both 4 and 5 will yield effects that will add to your image without distracting your viewers.)  Just play around with the styles and colors to find exactly the effect you’re going for.

To add the drop-shadow to the image, add this code after the border code:

box-shadow: 2px 2px 1px black;

Here’s what the code means: horizontal shadow in pixels, vertical shadow in pixels, blur spread, shadow color

So, in the code above, the shadow will be black and solid (that’s the blur, which is a bit harder to explain, but just trust me on this one…..higher numbers will yield a blurry shadow, which is not my cup of tea….but could be yours!) and will extend 2px to the right (horizontally) and 2px to the bottom (vertically).

So you can adjust the shadow now that you know what the code means.

Using a Free Image Editing Tool

There are several free image editing tools out there, but I’m going to direct you to a really fun one called PicMonkey.com.

When you bring a picture into PicMonkey, you can add cool effects, put text over the image, add funky stamps to it, put a frame around it, and more! There are lots of options within PicMonkey….you just need to make sure that you’re not choosing any option with a little crown image in the corner (those options are for paid users only).

I’m not going to do a big tutorial on how to use PicMonkey (not in this post, anyway), but head on over there and just play for a bit! It’s so much fun!

Have you noticed any blog images that have caught your attention that you’d like to share?  Or tutorials that you’d like to see for creating blog images for YOUR website?  Let me know in the comments below!