Stop wishing. Start Doing. ~ Anonymous ~

Studies show that content with relevant images gets 94% more views than without. Similarly, tweets with images on Buffer receive 150% more retweets.

So if you’re a frequent user of images and other media contents in your WordPress website, the media library should look something like this.

My WordPress Media Gallery

Among the various media contents used in a website, images are many times more in number than others.

Images are the main keys to sustained viewer attention. More importantly, they lead to viewers taking action as you want them to.

The supremacy of image over text being acknowledged, the question is, how many images would you use in a blog post?

Remember, just publishing images wouldn’t help.

In fact, overuse of images may backfire, especially when you fail to make a connect between the images and the text contents in your post.

An analysis of top 100 blog posts done 2 years back found that each article had an average of 3.2 images even though 16% posts had no images (and some had unique content layouts as in Forbes).

To make it simple, let’s say you need 4 images per article.

Here you have to take a call.

Is it that all the 4 images would have to be real-life photos?

Can’t you use screen captures or other illustrations as images?

Of course you can, and certainly you should.

  • For example, in this article on kinetic typography guide there are 4 images, and none of them are real-life photos.
  • 2 images are screenshots and the other 2 are animated GIFs. This is so because the nature of the article needed that.
  • On the other hand, this post on 25 highest paid salaried jobs, all the 26 images are real-life photos with no exception.
  • Also note that this post has 26 images, or 6.5 times more than the usual ‘norm’ of 4 images per post.

In this article I will take you through a complete guide for different stages of using image for blog post – starting with sourcing free images, and culminating with adding them to the post.

Let’s begin.

 

Step 1: Sourcing Free Images – Photos, Illustrations, Clip Arts

First, spend some time looking for images and clip arts that are free to use in your blog, or for creating video, or other purpose.

There literally are many sources, and you’ll be spoiled for choice. After you start using them, eventually you’ve to decide on 3-4 sources you’ll use more often than others.

Keep in mind you’ll want not only photos, but clip arts, vector illustrations, etc. as well, depending on your need.

With that in perspective, here are some of my favorites:

Searching Creative Commons image for ‘online learning’ on Compfight

Searching Creative Commons image for ‘online learning’ on Compfight

 

Step 2: Sizing the Images

Okay, we have sourced the images. But that’s only the first step.

The next step is to size the images as per your requirement, and compress them too.

Why are these necessary?

Well, usually the photos you download from the free sites are large in size, say 3600×2000 pixels. You can of course downsize them in your blog post using HTML code such as –

<img src="../anyimage.png" style="width: 720px; height: 400px;" />

This is a flawed approach because doing this will increase the loading time of your web page in the browser.

It’s found that 57% of web users abandon a site after 3 seconds for poor web performance like slow-loading of pages. Search engines too consider site speed as a major factor for rankings in search results.

It is therefore important to reduce all images to a uniform dimension that is just right for your blog posts.

Using MS Paint

The one tool that I consistently use for reducing image dimensions is Microsoft Paint. After pasting the image, all you need to do is select the Resize & Skew Tool, decide the final dimensions, and click OK.

The image is instantly resized according to the dimensions you chose. Take a look at the following image.

Image resizing in MS Paint

  • Other than reducing the dimensions, resizing also reduces file size even without any compression done to them. For example, the above image at 825×548 pixels weighed 1.1MB.
  • After resizing to 300×199 pixels, the file-size reduced to 142.2 KB. Even at a reasonably big size of 600×398 pixels the file weighed 548.9 KB which is half the original size.

Using Online Tools

If you are more comfortable using online tools than MS Paint, you’ve lots of choices. Just search for image resizer, and there will be lots of options to choose from:

  • Resizr
  • ImageResize.org
  • ResizeImage.net
  • PIXresizer (downloadable)

Many of these online tools allow you to also crop images as you want, and optimize them too.

Using Stencil, Canva

It’s a bit weird that I mention Stencil and Canva here as image resizers, since they are simply much, much more than that.

Yes, with Stencil, you can resize images on the spot, and you’ve more controls (see the 2 images below). After that you continue using Stencil for unmatched graphic design for social media and blog.

Creating custom image sizes in Stencil

Creating Facebook post image in Stencil

Canva is even more powerful. It is packed with features that enable you create not only great-looking graphics, but also presentation slides, e-books, and more.

The following image shows how easily you can edit a small image on a large 800×600 pixels slide with Canva.

Finding image size in Canva layout

Finally, let me NOT fail to mention using PowerPoint as an image resizing tool in addition to having it for creating attractive CTA buttons for your website, and even to design logo for your business.

You’ll thank me for that.

 

Step 3: Optimizing Images

This is a vital step, and shouldn’t be overlooked.

No matter how much you resize and crop the original photos to reduce file-size, there is always scope to reduce file-size even further, that too without losing the visual appeal.

If that sounds unconvincing, take a look at the following 2 images. They both are PNG images, identical in every aspect, except that the one below at 6.2 KB is roughly 3 times lighter than the top image, 18.1 KB.

Un-optimized image, 18.1 KB

Un-optimized image, 18.1 KB

Optimized with TinyPNG, 6.21 KB

Optimized with TinyPNG, 6.21 KB

Online Image Optimizers

Like image resizers, there are quite a few free image optimizers available online for immediate use.

Some that I use often are –

WordPress Plugins for Image Optimization

Using a WordPress plugin for optimizing images has a big advantage.

If you forget optimizing an image before uploading it to the media library, the plugin does that automatically for you before the image is added to the library.

What if you’ve already optimized?

The plugin still does its job, but obviously there isn’t much reduction in the file size, since you’ve already done the heavy lifting before uploading.

Here are three WordPress plugins for image optimization you can consider:

  • WP Smush – now maintained by WPMU DEV, compresses JPEG, PNG, GIF
  • Kraken.io Image Optimizer – optimizes 3 formats, plus animated GIF also
  • EWWW Image Optimizer – offers lossy/lossless compression, image conversion, optimizes PNG (with TinyPNG tool), JPEG, GIF

At this point in time I’m using EWWW for quite a while. It’s okay, and updated frequently.

 

Step 4: Adding Image to Blog Post

More often than not, you’d want to add some texts to the image before adding it to your blog post or social media.

If that is so, there are at present (in my considered opinion) no better tools than Stencil and Canva. I’ve mentioned them above.

Both have free-to-use options, and seriously, if you are not using them already, consider starting now.

Many a time you’d want to annotate images like screen captures before uploading to your blog posts.

For such needs, consider using Skitch (for Mac – free), Greenshot (free, open source), or SnagIt (paid), not to mention my favorite, PowerPoint.

Once your image is ready for use in your blog post, uploading it to the media library is rather easy. Here are the steps for adding image to WordPress post.

Let me talk a bit on featured image in WordPress. As you may know, the use of featured image varies from theme to theme.

And since this is the first image a viewer sees for a post – either as a thumbnail or in full spread – it is important to know how to deal with it for the theme you’re using.

 

Some Tips on Using Featured Image

Depending on what WordPress theme you’re using, you’ve different ways of featured image display.

Using Avada

Presently I use Avada for this website.

Incidentally Avada, by ThemeFusion, is one of the most selling WordPress theme – sales totaling 260,500+ as of this writing.

Avada allows up to 30 featured images and/or videos for each post. When you use 2 or more, they are, by default, promptly converted into a nice-looking slideshow (see this at the top) both inside the post, and in the posts listings (animated image below). You can of course disable the slideshow at the theme options.



A powerful advantage is that you can have a slideshow of the actual images you use in a post. This gives the reader a glimpse of what to expect in your post.

Many online publications use this feature already.

Just remember that the slideshow looks good when all the images have the same dimensions.

Using StudioPress’ News Pro

For my website on lifestyle, Kolkata Musing, I use News Pro theme by StudioPress. Here I can upload only one featured image, but the image appears only as a thumbnail on the listings page. It does not show up on the main post.

WordPress’ own themes display featured image differently. It typically comes above the post title. If you want an image just below the post title as is usually the norm, you’ve to insert the image from the media gallery inside your post section at the top.

 

What to Do Next?

This is a good question that affects a lot of us. Often, after working hard to create images for the blog posts, we simply forget about them.

Instead, with a good collection of free, properly sized, optimized images, you can think of doing a lot of things with them.

Take a look at some simple rewarding actions –

Social Media

For every blog post, social media is the main gateway to the outside world. A good practice is to create 2 to 3 different tweets for every image, thus having a list of say 8-12 tweets for every post.

Similarly, create about 6-8 entries for Facebook and LinkedIn for each post. It’s now time to head over to Social Jukebox, a highly useful tool for automated social networks management.

Once you load your tweets and entries on to Social Jukebox, it simply keeps on posting them at scheduled time decided by you.

The video below captures the ease of doing things social at Social Jukebox:



Gallery

WordPress has some superb gallery plugins including the redoubtable NextGEN Gallery that receives over 1.5 million new downloads per year, no less!

What you can do is, create multiple image galleries from your collection. Each gallery will have selected images that focus on a topic, and you can invite viewers to them for gathering information and knowledge from you.

Slider

Gallery and image slider are nearly same. You can easily create responsive slider with a plugin, and then paste it anywhere in the post and even on sidebar.

Like the slider at the top of this post, your slider can similarly include all images in a post to assist your viewers.

Finally, remember you can always get fancy with your images with dotted overlays, borders, etc. to make them attractive to your viewers.

Over to you!

Tell us how you create and use images for your WordPress blog.