How To Make Your Blog Images Awesome – Even If You Aren’t Picasso

In the following post you are going to learn some simple ways to make your images amazing. Get ready, hold on to your chair and read this post……….all the way to the end.

You are happily blogging away. Writing lots of amazing sentences, adding spectacular headings, exciting your readers with your witty prose. Once you are done, you hit publish and wait. No one notices your post! Or not enough people anyway. One way to ensure they do, is to entice them with stunning images.

Actually, your blog images are your calling card. They appear on Facebook, Google+ and Pinterest. They also show up on your blog’s homepage and in the post itself. Not only that, but according to a this post by Hubspot:

90% of information transmitted to the brain is visual 40% of people will respond better to visual information than plain text On Facebook, photos perform best for likes, comments, and shares Pinterest generated more referral traffic for businesses than Google+, YouTube, and LinkedIn combined

Images are extremely important to your blog’s success. You need to take your images seriously!

Where do I find awesome images?

There are a  number of sites you can use to find stunning free images. Don’t be tempted by Google Image Search. I know it’s easy. But usually, you have no idea who owns the image. And just ignoring this issue is not the answer. Some image owner’s will hunt you down and…..ask you to remove it. It’s best to use Creative Commons licensed images with the correct license. One of these three:-

• share
• remix (best)
• commercial (if you are using it for book etc)

This is the creative commons website showing the terms of the licenses you will find. To find your awesome images I recommend using either CompFight or PhotoPin. They both search Flickr for images with Creative Commons licenses. And the results they provide are filled with high quality images and stunning visuals.

CompFight

A few quick things to be aware of on CompFight

1. you need to activate the Creative Commons filter on the left menu before searching
2. the results above the line are not free images
3. open the images you like and the license link is on the right of the image
4. the HTML for the attribution link is clearly shown
5. sometimes a popup will open when you search – just close it (paid images)

PhotoPin

PhotoPin is quite similar, although I am used to CompFight so don’t use it so often. Things to be aware of on PhotoPin:-

1. they also have sponsored photos at the top (above the line)
2. if you open the Get Photo link you also get a nice view of the image with all sizes to download.
3. for the license – click on the image itself, the license is below the image on the Flickr page under Additional Info is the license details

There are a lot of alternatives for finding free images which you can explore at your leisure.

Image Basics

When you are choosing images, or even working on your own photos, it pays to know some photography basics. I won’t spend much time on it in this post, but here are a few things to consider.

1. make sure the image is clear and in focus
2. use the correct size (at least the pixels you need including cropping etc)
3. consider some basic rules of composition (like the rule of thirds)
4. consider what it will be used for in your blog and what effect you are hoping for

How do I make my blog images amazing?

Now you have your great image right? A lot of the time it is not exactly how you want it. Other times it is not exactly “great” to start with. Don’t worry, we are going to work on the images using some basic techniques that will make them POP.

Online tools for image work

For the simple tasks that we will be going over in this post, I will make use of a great tool  available online – Pixlr Express. * Picmonkey is also great for simple tasks like cropping, color and contrast, resizing, but their filters are mostly NOT FREE. If you are looking for some other alternatives – simpler or more complex, online or offline – here is a big list of great image tools. Also see this post by Elna Cain.

Working on your image

I will now take you through a series of steps you should perform while working on any image you are not 100% happy with. The basics steps are

1. Cropping (after straightening if necessary)
2. Contrast and Brightness
3. Resizing
4. Saving and Compressing

1. Cropping your image

The first thing you should do when working on an image is to crop it:-

• to the right proportion
• to focus on the right elements
• exclude all the unwanted elements

There is no right or wrong way to crop an image, but you should be aware of the possibilities and  – what your goal is. With your image open in Pixlr Express:-

1. Choose Adjustment (first menu option)
2. Choose  Crop (again the first option)
3. Move the blue squares in the corners to determine the area of the image you want to keep
4. Press the Apply button in the bottom panel, and the image will be cropped to the selection

Alternatively to manually cropping, you can use the crop options in the bottom menu to crop to a specific proportion/aspect ratio.

BEWARE: Cropping should only be performed if your image is straight. Why? Straightening will alter the image quite a bit. So you need to do that first. Below is a quick “how to” and example of what the straightening tool shows you while you are doing it. The main aim is to line up horizontal or veritcal parts of the image with the white grid.

1. Choose Adjustment menu option
2. Choose  Rotate menu option
3. Move the Straighten slider util the image appears straight (they provide a grid to help you)
4. Press the Apply button
5. Go back to Crop (as above)

2. Contrast and brightness

These are two aspects of your image you can easily change to give it more POW! Often photos are taken with the wrong settings, and a simple change like contrast can correct it.

1. Choose Adjustment  (it should still be open from cropping)
2. Choose Contrast 
3. Move the Contrast slider util the image appears more dynamic
4. Press the Apply button

What do I mean by Dynamic in point 3. Well, the blacks should appear very black, and the whites very white. But don’t take it to the point of being too unnatural. If you find the contrast is more or less ok, but some parts are still not visible, try sliding the brightness a bit to the right (brighter). Sometimes a combination of both is necessary. Play around with it a bit. *Note:  Sometimes the image is just not usable – so don’t try to fix the unfixable.

3. Resizing your image

Once you have your image where you want it, you should resize it to the size you need in your blog. If you do not know exactly, you should aim for something like the following sizes:-

• Header Image or full width = 600-700 pixels width
• Half width images = 250-300 pixels width

Try to determine the standard size of your blog column width so you know what works for you. The more accurately you know this and apply it, the smaller your images will be and the faster your site will load.

1. Choose the Adjustment menu option (it should still be open from cropping)
2. Choose  the Resize menu option
3. Enter the width value you want (the height will adjust automatically)
4. Press the Apply button

* Note: There is a proportion switch at the bottom. It is ON by default. This keeps the proportions of your image the same as they are. Leave this on unless you want to skew your image. This is not normally recommended, unless you know what you are doing.

4. Saving and compressing

Compressing your image while saving it is important – to save space and load your images faster for your readers. This article provides some tips on how to compress images and test your site speed for this very purpose. As people are viewing your images on the web, you can normally get away with a lot of compression.

I aim for 60-70%, which on Pixlr is shown on the quality indicator (see the screenshot below) when you save your image. But to make things even easier, Pixlr shows you the filesize, so you can easily see the sweet spot (ie. compression vs filesize) as you move the Quality slider. Aim for a reasonable file size with a quality above 50%.  With time you will know what works.

1. Press the Save button
2. Choose a reasonable filename (with dashes between words for Image SEO)
3. Move the Quality slider (find the quality/size sweet-spot)
4. Press the Save button (choosing where you want to save it of course!)

Add some WOW to your images

The above should take you a long way towards quality images for your blog posts. However, sometimes I find this is not enough. For example an image is really the wrong tone or color.

This requires a far larger skill set to fix manually, that most of us do not have. So we can cheat. Like with Instagram, Pixlr has a range of filters you can apply in seconds. Choose the Effect menu option at the bottom (third one along) and this is what you will see.

Typically to make major color changes use the Default menu. This will give you lots of preset filters that can significantly alter your image. Pixlr gives you a preview of each as you scroll along the options with the arrows (top left).

Once you choose the filter, you can reduce the amount that is applied with the Amount slider if you find it too much. You can find some really powerful effects in here.

More or less like the Instagram people are used to.

Here are the rest of the other filter categories Pixlr provides:- Soft I find a bit strange, but if you like photos with a hazy look to them that is your place. Subtle does what it promises, and applies only slight changes.

Too Old gives you get a lot of black and white style color changes. Unicolor adds more simple color filters, albeit sometimes with very funky effect. Vintage is a mixture of some of the others, with a lot more faded black border style effects. You could also try Art Photo for more effects – it provides a whole bunch of funky filters you can simply apply to your images.

Images I have worked on

To show you what is possible, the following are before & afters of images I have worked on. I have used cropping, contrast and Pixlr effects on them. In most cases it does not take more than about 10 minutes once you get the hang of it. Even if you don’t like my particular taste, you can see what a big difference a bit of image alteration can make.

Add even more POW to your images

The Pixlr effects will give you an awesome looking final image. Of course you can add even more to your image (if you wish) using the other Pixlr options.

Overlay – gives you lots of options to put things over your image, sometimes subtly, sometimes not.

Border – provides a great variety of border styles and effects to play with.

Sticker – is more or less a Clipart adding tool.

Text – has lots of options for text overlays.

They also offer collage

When you are first loading or creating an image on Pixlr Express, you have the option (bottom right) to create a Collage.

The collage options are extensive, ranging from:-

1. Various layout options (number images, size etc)
2. Rounding corners
3. Spacing of images
4. Proportions

After you are done with these options, you click on each image cell (the plus in the center) to add the image. The following is a collage I quickly made (ugly I know) to show some of the other options above (text, border, overlay).

The above before and after images are also a collage of collages. Crazy I know. The possibilities are endless.

Summary

Adding amazing images to your blog is not as difficult as it seems. Even if you are not artistic, you can pimp your blog images with these simple steps.

1. Find a great image with the right license
2. Crop and adjust it with contrast
3. Add effects if it still needs some zing
4. Resize and save/compress it to your needs

Before long you will feel a little like Picasso – albeit the web version.

Related reading – The Blogger’s Guide To Optimizing Images For The Web.