15 Blog Images: Best Practices for Adding Great Pictures To Every Post

Share This
Andy Crestodina
Share

Bloggers are writers. They write text in the form of posts. Blogging is a written, text-based medium, right?

Not really.

Yes, it’s a visual medium, that’s true, but text is only part of it. Great bloggers know blog images are critical. They are an all-important ingredient, second only to a great headline. Every great book needs a cover; every great post needs an image.

Why? The blog image directly affects shares and traffic. Images get shared more in Twitter. Tweets with pictures see a 35% increase in retweets (source).

twitter-chart

And posts with images get shared a lot more on Facebook. 87% of the top posts in Facebook include pictures (source).

FB-Chart

If your post doesn’t have an image, don’t expect it to go very far.

A blog post without an image is like a postcard without a stamp

But images aren’t just important for traffic. They’re important for memory. Studies have shown that images make information easier to remember. This is called the “Pictorial Superiority Effect.”

image-retention

Ok, so a picture’s worth a thousand clicks. But what if you aren’t a designer? How to do you get great blog images?

Here’s a guide to 15 blog image best practices including image sizes and shapes, copyrights and attribution, stock photos and free images. This post is all of our best advice about visuals in blog posts.

1. Featured images with headlines

Let’s start with the most important image for every post, the featured image. This is the one that appears at the top of the post and in social streams when the post gets shared.

Do it well, it will get clicked and reshared. Do it poorly, viewers will scroll right past.

Doing it well means putting the headline right into the image. So the image contains the meaning all by itself. The image will stand on its own.

ProTip: Is your blog image not appearing in Facebook or Twitter as the social snippet? Here is the code that fixes it.

Canva is an easy way to add text to images, without Photoshop or the help of a designer. You can start with a template they provide or you can create your own custom dimensions. Then add an image from their library (or upload your own) with loads of pre-formatted text that overlay nicely on top.

Here’s an image I made in Canva in just a few minutes.

elmo

By putting the headline into the image, people who even glance at the image will know the topic of the post. They’ll know your post is about blog images, not Elmo.

2. Images with faces

Faces are unique. They are unlike any other type of image. From the time we are infants, we have a tendency to stare at faces (source). Babies are more likely to gaze at shapes that resemble faces, even if it’s not an actual face.

baby

This is a hardwired visual preference. A cognitive bias built into all of us. Photo editors at magazines and newspapers have known this for decades. Images of faces will grab and hold readers’ attention.

ProTip: If you have an “About” section on your website without pictures of people, stop reading this post and go add some. This “neutron bomb” problem is easy to fix. Just go put a face with the name!

Faces create another subtle marketing opportunity. You can direct the viewer’s attention in specific directions.

Eye tracking studies show that “you look where they look.” If the eyes in the image are looking in a certain direction, the viewers will tend to look in that direction too.
product

The direction of the eyes creates an invisible arrow, irresistible to viewers. Blogging pros like Mari Smith have used this tactic for years.

inner-circle

3. Meme images

These are easy to create using a tool like imgflip.com. Just upload the picture of your choice, then type in the text. It takes minutes at most to create blog images like this one.

meme-therock

The problem with imgflip is that you might get sucked in, looking at other people’s memes, like this one.

ryan

Ok. Moving on…

4. Blog image sizes for social media

What’s the right size for blog images? What are the exact pixel dimensions ideal for Facebook, Twitter, etc…? There are dozens of posts that detail image sizes for social media networks.

Ignore them.

The size doesn’t matter. It’s the shape of the image that counts. The social networks automatically resize photos for their social streams. As long as the image is roughly twice as wide as it is tall, it will look fine on every social network.

If it’s much taller than it is wide, the social networks may cut off the top and bottom, like this picture…

tuna-the-cat

Tuna got cropped in Twitter!

The width-to-height ratio is called the “aspect ratio.” Images that are wide are called “landscape” and images that are tall are called “portrait.” Give your blog images a landscape aspect ratio.

Make your blog images the full width of your blog’s content area (usually 600 or 650 pixels wide) and half as tall. That’s really all you need to know about image sizes.

5. Diagrams

Diagrams are a fast way to explain complex concepts. But they take a bit more work.

I use OmniGraffle to make diagrams. It’s Mac software for flowcharting. It makes drawing boxes and arrows easy. Here’s one I made in about 10 minutes.

cat

For bar charts, you can pull them right out Excel or Google Sheets. For pie charts, head back to imgflip. They have a nice tool for this.

image20

This image took less than a minute to create.

6. Infographics

Infographics, the mother of all blog images, are really designed to stand on their own.

It’s best if you use only a few points and encourage others to embed it on their site with link back to you. Here’s one we did on SEO vs. Social Media. Notice how we added the embed code with a link back to the post?

SSI_Orb_v4-01

Want to publish this infographic on your own site?

Copy and paste this code into your blog post or web page:

7. Quote images

Sometimes, the words are the pictures. Take your headline or a juicy quote and make it a visual piece of content. There are plenty of free tools that make this easy.

Notegraphy styles the text using fonts and colors. It takes only seconds.

notegraphy

QuotesCover requires a few extra steps, but it gives you more control over font and color options and lets you add an image to the background. Here’s one I made in just a few minutes.

quotes-cover

8. Drawings

Rather than spending hours scouring the web for free images, or struggling with software that isn’t part of your skillset, try this crazy idea: pick up a pencil and draw.

In minutes, you’ll have something original that supports your message. An art degree is not required.

This is exactly what Henneke does on her blog, Enchanting Marketing. And it’s wonderful.

drawings

All you need is some art supplies and a little bravery. Once the drawing is done, scan it or take a picture with your phone. I’ve been using Genius Scan, which is a phone app that works as well as any scanner.

9. Screenshot images

For educational content, screenshots are the next best thing to video. I use Jing to make the screenshots you see on this blog. Like this one…

jing2

10. Images right from your phone

Everyone’s a photographer. So here’s a great source of free photos: your phone. It’s likely you have some great pictures there.

Phones are actually a great source of pictures because you can crop and add filters immediately, using the tools native to modern phones. Snap! FIlter! Crop! Then email it to yourself.

But keep in mind the earlier advice about the shape of images. They should be wide, not tall. Most screens and all social stream images are wide rectangles. We are living in a landscape world, baby! So when taking pictures on your phone, hold it sideways.

Roscoe

This picture of Roscoe, my brother’s dog, would make a fine image for a blog post.

11. Use more than one image

Accept it. Your readers are really just scanners. Maaaaybe 28% of your post will be read. Probably, it’s more like 20%.

So how can you slow these scanners down? Keep them interested? First, make sure you’re formatting. Use short paragraphs, subheaders, bullets, bolding and links. But more importantly, use many images.

The goal is to keep the reader out of a desert of text. No matter how far down they scroll, they should never hit a wall of words. There should be images at every scroll depth.

smexaminer

Social Media Examiner knows how to keep visitors moving. Every post has an image at every scroll depth! Mike and his team do this deliberately to keep scan readers interested.

According to our latest blogger research, more bloggers are using more images. In the last year, there’s been a 14% increase in the percentage of bloggers who use multiple images.

It’s officially a trend.

12. Use animated gifs

Do you like that little animated GIF image above? I made it in minutes using a combination of Screenflow, screen capture software which outputs to MP4, and ezGIF, which turns MP4 files into animated GIFs.

tutorial

Here’s an excellent tutorial on creating beautiful, fast loading GIFs. Thanks, Andy Orsow!

But careful using animations. Movement is so powerful at capturing attention, it can be annoying. Personally, I’ve had enough of both of the animations above!

13. Use images in a consistent way

If you establish your own style, readers will come to recognize it. It also speeds up the process of making images because a lot of design decisions are made in advance, such as layout, fonts and colors.

Set standards and follow them. This makes anyone into a better designer.

Here are examples of how some blogs have created standards for their blog post images…

copyblogger

We have a style guide that shows the typefaces and colors of our brand. I refer to this document whenever I reach for a color or a font.

14. Use Stock Images

Of course, no one loves stock images. But they’re better than no image at all. If you do have to use them, follow these steps on how to customize stock images. 

vince

Or, Vince Vaughn has very graciously offered you some nice stock photos at no charge. Which brings us to another blog image best practice…

15. Images that won’t get you sued

Not getting sued is always good. And it’s easy if you know where to look for images. Search tools at Flickr allow you to filter for images covered by the Creative Commons license.

creative-commons

Google Images search tool now includes filters for usage rights. Check these before searching for wheelbarrows of puppies!

puppies

Seriously, don’t even think about using an image that isn’t creative commons. Companies build robots that do nothing but scan the web for images used without permission. PicScout, owned by Getty Images, is one such company.

picscout

If they find an image on your website used without license, a robot lawyer sends you a “Settlement Demand Letter” …and a bill. Depending on the image, it could be for hundreds of thousands of dollars.

theletter

Great blog posts start conversations. But not with lawyers. You don’t want to get one of these letters.

Side note: Getty Images has often been accused of bullying for sending these letters. In at least one case, they’ve been sued. The story behind the lawsuit is very amusing…

What you’ll need to create great blog images

Blogging is writing, but it’s also selecting and preparing images. You need writing skills, but also basic image skills:

  • Cropping, resizing and optimizing images
  • Basic filters and effects (levels, contrast, auto-enhance)
  • Adding text, basic typography
  • Grabbing screenshots (Mac users, press command+shift+4 to capture any part of anything on your screen! I do this all the time)

You’ll also need a few tools. Here’s a list of some popular ones…

For photo editing…

  • Pixelmator – $29.00
  • GIMP – Free
  • Paint.net – Free
  • Adobe Photoshop – $20 – $80/month

For screen captures…

  • Jing – Free
  • Snagit – $49.95
  • Awesome Screenshot (a Chrome add on that gives you high resolution screenshots) – Free

For screen recordings…

  • Camtasia – $99
  • Screenflow – $99

For diagrams, flowcharts and infographics…

  • Omnigraffle – $99
  • Visio – $300
  • Google Drawing – Free
  • Picktochart – Free, Pro Version is $29/month

And of course, there are the online tools we mentioned above, including Canva, Imgflip, Flickr and many others.

I’ll admit, we have a design team here that often beautifies my blog images. But professional design isn’t mandatory.

What tools are you using? Help your fellow marketers out by leaving a comment below.

Share This

What are your thoughts?

By signing up you are agreeing to our Privacy Policy.

Comments (52)
  • This is SO fabulous Andy! Thanks I will share widely. gratefully, Jill Stewart

    • Thank you, Jill! I bet some of these ideas and tools come up in conversations with your students…

  • How much fun did you have writing this (er, creating images?)?? We also love Pixabay (free images) and Screencast-o-Matic here. And I have a paid Shutterstock account. It’s worth it.

    • I had a blast editing it. I’ll tell ya that! Do you ever use unsplash for free images? They’re pretty amazing.

      Great post, Andy!!

      • Great article Andy! I’ve used UnSplash before on some projects – its a great resource for high quality images that is varied every week. If I’m looking for something specific I tend to use pixabay.com (free) or Shutterstock (paid).

        For those of you using Linux as your operating system of choice there is a really good screen recorder called Kazam, which is free to use and has a good number of screen capturing options.

        I was surprised to read that having an image at every scroll depth would keep interest – personally I think too many images could distract you from reading the article in full.

        If you’re browsing on a tablet or mobile device I often find articles that have lots of images can load slowly on a mobile connection and that can cause me to leave the site before the article’s finished loading.

  • Love it! Thanks for the great ideas and list of resources.

  • As usual, great advice for all communicators. Looking forward to hearing other tips from commentors. I’m with @Gini. I love Pixabay.

    • I had never heard of Pixabay. Checking it out now!

  • Thanks Andy. I definitely learned some things in this post, but I’m going to take issue with a couple of your recommendations.

    In my experience these things often kill conversion:

    1. Stock images (sometimes no image is better than a cheesy, inauthentic one)
    2. Animated GIFs — most web users HATE animation on a page and will leave sooner if they cannot make it stop!
    3. Overlaying headline text using oddball fonts on images with poor contrast — too hard to see/read.

    • Thanks for the feedback, Dawn. I’ve never seen data showing that these would hurt conversions, but I can certainly imagine it in certain cases.

      Design blogs especially would lose all credibility with stock photos!

      But on other blogs, I honestly think that any image would be better than none at all. Like a sip of visual water in a long, dry desert of text…

  • Great list of tools Andy, thanks!

    • Thanks, Susie! Always nice to see you here in the comments. 🙂

  • “Great blog posts start conversations. But not with lawyers. You don’t want to get one of these letters.” haha love that! Great post!

  • Great post! Thanks so much for including my GIF tutorial. 😀

    To Dawn’s point above about GIFs, I find people are much more receptive to GIFs when they’re supporting the content—so if it’s teaching / explaining / informing the content, the threshold goes way up. But if it’s just GIFs for GIFs sake, then… yes it will probably be way too much. 🙂

  • Hey Andy,

    Thank you so much for including my purple-haired Henrietta! 🙂

    When I started illustrating my own blog posts, I was very very nervous. I hardly dared to press “publish” for my first illustration. I thought that a hand-made drawing (made with old-fashioned colored pencils!) might look amateurish, but many people say the hand-made feel appeals to them.

    So, to anyone dithering about their drawing skills, go for it and try it. You’ll get a much better reception that you’d think.

    Inspirational post!

  • Hi Andy,

    Good stuff as usual, mate. One area I would disagree is in #4, and the advice to not worry about sizes, as long as they’re roughly twice as wide as they are tall.

    I’ve seen posts (and made this mistake myself in the past) where that formula is followed, and text that’s on the image (or a certain CTA) is lost. Making the image optimized for networks resolves this, and also makes for a more natural and media-rich experience. And the wider images don’t look great on Pinterest, which needs the opposite approach.

    Sprout Social has a great guide for image sizes for the key networks, and they keep it updated for any changes to these sizes.

    http://sproutsocial.com/insights/social-media-image-sizes-guide/

    Also, the Warfare Plugins team offers the best dimensions for images with their Social Warfare plugin (premium), and give a preview of what the image will look like on the network.

  • Fabulous post, Andy!! So much great info packed into one read.

    One thing to add…. if you’ve already bought SnagIt for screen captures (which I love), you can also use it to capture video. Same tool, no extra cost. I use it for adding voiceovers to a PowerPoint, or creating how-to videos walking through a task online where I want to capture an active screen plus voice.

    • Hi Carrie, I also use PowerPoint, but as an editing tool to make diagrams and cover images to use in my website about presentation templates. PowerPoint not only is more intuitive that other software editing tools, there are plenty of slide elements ready to be used for these purposes.

  • Ever since I discovered Orbit Media a couple of years ago I’ve been so impressed by the in-depth tactics Andy has given us. This article is no exception, and for a tiny flea like me it keeps me ticking along! It makes me keep scratching at my sites. And for good purpose.

  • this will create nice engagement on blog as well as social media. thanks for the resources.

  • Fabulous post and fun to look at and read!

  • i will surely try imgflip..and hence sounds a cool idea.. 🙂

  • I do write a lot of blog posts, so this article definitely provides a lot of value for me! Thanks for sharing this good stuff 🙂

  • Hey guys, any recommendation for an affordable stock images subscription service? Looking for the stocksy.com quality but with monthly subscription thx!

  • Hey Andy,

    Nice tips with a vital one on number 15. Right now my goal is to learn how to create infographics and I started using Piktograph, but didn’t get very far with it. Hopefully soon I’ll master it.

    Thanks for sharing Andy! Have a good one!

  • Professional bloggers need to realize the worth of the use of image.People can use Shutterstock albums to use images in their blogs.

  • Amazing and useful post. You have really saved me some bucks! Thanks

  • Andy: It’s inspiring how much you teach in so few words, I.e., “Blogging is writing, but it’s also selecting and preparing images. You need writing skills, but also basic image skills.”

    I especially appreciated the examples, especially the Social Media Examiner example.
    Roger

  • More Great stuff from Andy and Orbit… but one question isn’t the legend reversed in #5?

  • Hey Andy,

    Awesome post, I loved every single tip. Had a great laugh with the meme featuring The Rock 🙂 Can’t wait to share this tomorrow afternoon! Well later on today haha.

    Thanks so much,
    Christina Anisa

  • Awesome tips on blog images Andy! Three things that caught my eye was eyes looking at an image within the image,using landscape and sizing of images, and how to search for google images.

  • Are you able to post memes created using Imgflip and other similar sites without fear of the demand letter?

  • This is a great resource! Thank you.

  • Great article thank you Andy ! A picture sure is 1,000 words.

  • Thanks! really helpful and well illustrated.

  • Sem palavras, excelente conteudo

  • Very useful practices.Thank you very much.

  • Thanks! I’m creating training materials that I want to have longevity. I knew that standardizing them would make them easier to use collectively. Thanks for the tips and resources. I can go do more hunting for the tools that can bring our training materials together!

  • Andy, I’m not sure how I came across this, but I’m glad I did. Thanks for taking the time.

  • Great blog my friend 🙂

  • Really informative article! Nails every point. You can even Geotag your images and insert relevant alt tags to boost your SEO rankings. Must read for every blogger out there.

  • Great article, thank you for sharing your expertise!!

    • Yeah Trully Great post thanks for sharing

  • Recently updated all the pictures on my phone recycling blog after reading this post. I did use some free stock images but the change is already having an impact. Spend just as much time choosing the image as you do writing the post. As social media is now more important to me than SEO I now just look for good images to base a blog post title on. Later I worry about the content.

  • Well described post. Thanks for sharing this useful information. As always awesome content, I love reading your articles, much appreciated!

  • Thank you SO much for this detailed tutorial. I was able to quickly and easily create more opportunities for engagement and social sharing within an existing blog post. I will definitely be taking the extra time to add more images (instead of just one!) within my blogging text from now on.

    I actually took your advice and went a step further. I decided to created some small “tweet this” buttons centered under my quote images.

    Check out how my post turned out:
    https://www.awakentheself.com/mental-wellness/8-inspiring-tools-to-help-you-set-and-achieve-lofty-goals

    I used Canva (for design) and Pexels (for free stock photos) to create some beautiful graphics to go along with the quotes from my text.

    Thanks again!

  • Aeesome info

  • Great tips Andy! Often times we execute and don’t realize the right practices needed for images to be effective in content (that includes me).

  • Hello, Andy,

    I am in graduate school and we are working on blogs for an assignment. Thank you so much for this timely information on images. I will be sure to use it.

  • What a great postp Thanks, Andy.

  • Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you

    create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

  • Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.

 
Join over 16,000 people who receive bi-weekly web marketing tips.

By signing up you are agreeing to our Privacy Policy.

Share This