fbpx
how to use images in blog posts

The ultimate guide: How to use images, videos and screenshots in blog posts

The Internet is a busy place. And one way to cut through the noise and get some attention is to use images in blog posts.

Pictures, video, screenshots, diagrams, and illustrations are a great way to keep your reader from clicking away. Images will also help readers understand your information and ideas, and remember your post.

The trick is to know how to create and add those blog images quickly and effectively.

In this post, we’ll walk you through all the steps, tools and tricks to dress up your blog without having to lose your afternoon doing it.

Okay, let’s jump in with why images work:

IMAGES WORK

Your blog competes with a lot of distractions. And once you get a reader to your blog you need to keep them there.

Once you get a reader to your blog you need to keep them there. Click To Tweet

That’s where images help. Anything from a simple picture to a custom created gif will make the reading experience more interesting and keep your reader scrolling down.

In fact, articles containing relevant images have 94% more total views than articles without images.

“Our brain is mainly an image processor (much of our sensory cortex is devoted to vision), not a word processor.” Psychology Today

Our brain processes images much faster than text

Our brain can process images 60,000 times faster than text

65% of senior marketing executives say that photos, video, illustrations, and infographics are core to how their brand story is communicated.

Visual search tools are becoming increasingly important too, so when you use images in blog posts the right way, it can help your SEO.

You should aim to add images to every article you write online. A good rule of thumb is to add one image every 300 words.

PIXELS, FORMAT, SIZE AND ALL THAT STUFF

Trying to understand the different image size options can get pretty complicated. The two basic things to know are orientation and size/compression.

Orientation

For most blogs, a horizontal orientation (longer width than height) works better. Horizontal/landscape images take up less real estate on the screen, allowing your content to catch the eye of your readers. Horizontal images are also perfect for sharing your blog on Facebook, Twitter and LinkedIn.

But vertical or square images perform better on Instagram and are more likely to be pinned on Pinterest. Again the reason is simple – Instagram and Pinterest are all about images. A vertical/portrait image takes up more screen real estate, which makes them more eye-catching.

So in the end, what orientation you choose comes down to your users and what social platforms they use!

Sprout Social maintains an up-to-date list of the best images sizes for the various social media channels in this post.

Image Size and Compression

When talking about images, size can mean two things – the physical size of the image (length x width) and the file size (bytes).

Most images straight from your camera or from a high-quality stock photo website are higher in resolution and physical size than they need to be for the web.

A digital photo is made up of pixels (px) – tiny square tiles of colour. We generally talk about pixels in two ways – pixel count and pixel density. The pixel count is the number of pixels that form your photo. So an 800px by 600px photo simply means that your photo is 800 pixels wide and 600 pixels tall.

Pixel density, or dpi, is the number of pixels per square inch. The more pixels per square inch, the higher the resolution of the image and the clearer it is. For print photos, 300dpi or higher is ideal. For the web, 72-150dpi is more than sufficient.

Start by working out the best physical size for images on your website.

There’s no point filling your blog post with images that are 3000px wide if your blog template automatically resizes them to 800px! Even though the image looks like it’s 800px on your blog, the 3000px image is still being downloaded, which slows down the load speed of your page!

Your images should only be as large as your blog content width (or close to it! Let’s face it, sometimes you just can’t remember if your blog template is 800px or 1000px wide … or is that only me?). If your blog is responsive (that is, it automatically resizes the page depending on the size of a viewers screen), size your image for the maximum width.

Find a balance between file size and quality when you use images in blog posts

The smaller the file size of your image, the faster it will load for your reader. But, reducing size too much can create a fuzzy image. Your goal is to find the balance between the lowest file size and an acceptable quality.

Try to keep your image size between 150KB and 300kb. Take a look at the example below. The original image was 7.6MB and 5000px wide. The image on the left was resized to 860px wide and saved as a high-quality jpeg, which produced a 250KB file. You can barely tell the difference between this image and the original when viewed online. The image on the right was resized to be 860px wide but saved as a low-quality jpeg. It’s only 30KB so it will load quickly but it’s fuzzy and of poor quality.

quality is important when using images on your blog

Low compression/High quality (left) VS High compression/Low Quality (right)

Of course, it isn’t always possible to keep your images to under 300KB. On retina displays, a complex photograph may likely look fuzzy at 300KB.

The key take-home idea is keep file sizes as small as you can, especially if you are using a lot of images in your post! Page loading times affect your google rankings and readers are likely to be turned off a page that takes ages to load.

There’s a number of free services for reducing image size, like Pic Resize, and Tiny PNG. Or you can use free design sites like Canva or PicMonkey to get the right size and resolution for any social media site or for your website (more on using those tool below).

Do I use JPG, GIF, PNG, SVG?

What is the best image format for your blog images?

  • JPG/JPEG – offers great quality images at a small file size. It’s the best option for photos unless they need to be transparent, animated or have a lot of text in them
  • GIF – perfect for small graphics and animations, and they can have transparent backgrounds.
  • PNG – ideal for detailed graphics, images with a lot of text or transparent images. PNG files tend to be larger than JPG files.
  • SVG – this is a scalable vector format, which means it stays crisp and clear at any resolution.  They tend to be large in terms of file size, but if you have a complicated graphic that needs to automatically resize, and/or has rollover effects or animations, SVG is a perfect choice.

NOTE: Not all websites are set up to automatically handle SVG files. WordPress has plugins that will help. For non-WordPress sites, give it a go and if your SVG file doesn’t display check with your web developer.

Test your images

Most content management systems (like WordPress), allow you to preview your draft blog post before you make it live. So if you aren’t sure about an image, upload it to your draft blog post and preview it!

FEATURED IMAGES IN BLOG POSTS

The simplest way to use images in blog posts is with a brilliant, eye-catching feature image.

Your featured image could be just a photograph or you can add your headline onto a photo. Either way, it needs to create some curiosity and make the reader want to read on. Remember – this is what appears at the top of your post and in social streams when your post get’s shared. It’s also the first thing that people see when they land on your main blog page. An eye-catching image will help get readers, clicks and reshares.

In WordPress, you’ll find the link to choose your Featured Image on the right side of your WordPress menu.

using featured images in blog posts

 

If I’m using a photograph, I try to avoid cheesy stock images, like the image on the left, and look for something more original like the image on the right.

stock photography can be boring

Stock photography can be cookie cutter, unoriginal, and sort of boring (left) or more interesting and original (right)

MAKING YOUR OWN IMAGE

Be creative! Stock images are great, but original are better – even if you are just adding a twist to a stock image.

You don’t have to be a graphic artist or own expensive software to create your own images. Free tools like canva and picmonkey have a wide range of templates, images and ready-to-use graphics and fonts. With a little practice, you can add your unique spin on your images or create quote images, memes, diagrams, and infographics.

Here’s an image I made in Canva in only 3 minutes.

make your own blog images

 

OK, so it’s not groundbreaking – the point is that I was able to find a free-to-use high-quality stock image, add some stylized font and download the image at the right size for my blog in just three minutes.

Get creative!

Once you get comfortable with the above tools, you can get creative with your results. Simple techniques like resizing images, adding screens, cropping – even choosing more interesting fonts will make your image stand out.

Learn more simple techniques for making your images pop in this post.

FINDING SAFE IMAGES

It’s important you protect yourself from getting slammed for using a licensed image. Start by reading our post about creative commons

If you are using an image under a Creative Commons license, it’s good practice to credit the photographer and source. You can add credits in the final slide or provide a link in your YouTube video description. For images, it’s usually as simple as adding a link to your photo back to the original photo. Most stock photo websites will supply you with the link when you download the image.

Some great sites that have loads of images safe to use are pixabay, unsplash, Refe, Magdeleine and if you still can’t find what you want go to librestock where images from over 40 sites are aggregated for you to search. We listed 7 sites to find great pictures in this post. You can even use Google to do an image search – just be sure to choose ‘Labeled for reuse’ under Tools.

finding images to use on your blog with Google

Quick tip about searching for that “perfect” image: it’s really easy to lose 20 or 30 minutes flipping madly through photos for the perfect picture of a woman holding a cappuccino staring thoughtfully at her laptop – finding a picture that is slightly better than one you found in the first 5 minutes won’t make your post go viral. Try to limit yourself to 5 minutes to find a good-enough image and get it uploaded into your post. You can always change it later if you find a better one.

USE IMAGES OF REAL PEOPLE

Pictures of people are one of the most engaging forms of content on the internet. Faces are unique and humans have a hardwired visual preference for staring at faces. Images of faces and people will hold a reader’s attention.

But they need to relate to the content or help explain a concept or point – studies have found that pictures of people are glossed over by readers when they are generic, decorative images.

When it comes to social media, faces engage us. Photos with faces attract more comments and likes.

ADDING SCREENSHOTS AND DIAGRAMS

Let’s say you are trying to explain how to use an online search engine or where to go on your site to find your latest book, or even how to make sure your opt-in email didn’t go into that person’s “promotion” folder in Gmail.

Kind of hard to explain in words – right?

That’s where screenshots are super helpful. Within a couple of minutes you’ve captured the image, added a couple of arrows and now your picture is worth a thousand words – plus you get more people going to the right place!

A tool like Snagit is an invaluable investment. For only $50 you have a ready-to-go workhorse for screenshots, videos, and even gifs.

Here’s a video I created in Snagit of using Snagit to edit a screenshot (now that’s meta!).

screenshots are a great option for images in blog posts

Custom graphics and diagrams are another great way to explain complex concepts or just add some fun to your post. Snagit is a great tool but there are plenty out there. OmniGraffle and Lucidchart offer flowcharting tools that you can use to make fun diagrams. Piktochart has a free version for creating infographics and data-driven graphics.

Need a chart to help illustrate some information? You can take them right from Excel, Google Sheets or Word. Just copy your chart and paste it into your text editor, or take a screenshot.

And don’t be afraid to pick up a pencil or pen! Sketch your idea and take a photo. It doesn’t matter if you aren’t an artist – your readers will enjoy seeing that you are just like them!

draw your ideas and take a picture

ADDING VIDEO AND GIF’S

Sometimes text alone isn’t quite enough. That’s where video and animations can come in.

Giphy and Tenor are good resources for animated GIFs. Sitepoint has a great resource list of places to find creative commons images, videos and other media.

I’ve been asked many times how I add videos to my blog. I’m certainly no expert, but when it comes to anything that smells technical I remind myself ‘done is better than perfect’ and I keep it simple. Start to finish, a simple video should take me no longer than 15 minutes.

Here’s an illustration of the steps I go through.

how to add videos to your blog

You do need to host your video somewhere. We have used Vimeo for many years and love the price and how fast and simple it is to use. You can also use YouTube or Wistia.

The steps to adding video to your blog are pretty simple once you’ve practiced them a few times, but they do vary depending on your website and where you are hosting your video.

Here’s how to insert a video from YouTube into WordPress:

  1. This process had gotten super simple. Start by locating the video you want on YouTube.
  2. Next, copy the URL for that video (it will look something like https://www.youtube.com/watch?v=JKrPz6JHwYw)
  3. Log into your WordPress website, open the blog post to edit, locate your cursor where you want the video, paste the URL.

This free tool will allow you to customize the look of your YouTube video and do things like turn off the annoying “related” videos

Here’s how to insert a video from Vimeo into WordPress:

  1. To get your video’s embed code, go to its page on Vimeo and click the ‘Share’ button.
  2. Click the ‘+Show options’ link and copy the embed code.
  3. Log into your WordPress website, open the blog post to edit and click on the ‘Text’ tab in your text editor.
  4. Locate your cursor where you want the video and paste the embed code.

how to insert your Vimeo videos into WordPress blog posts

Note: You should include text in your post with your video if you want your post to get picked up by search engines like Google. You can see how it’s done on the Gone with the Wynn’s travel vlog. With every blog post they have lots of text, images and video to keep you, the reader interested and for SEO purposes.

using text with videos helps with SEO

Using a consistent theme

When you are choosing images or fonts it’s a good idea to be consistent with the theme of your site and your blog. It could be as simple as using a consistent font (I’m a fan of Helvetica Neue, Marker Felt, Yellowtail and Bebas Neue), a color scheme or icon style.

The customer service app, Help Scout does a great job of using consistent design elements in their blog that are light, modern and quirky.

use a consistent theme when using blog post images

Choosing the right file name

Image SEO starts with the file name. When you use images in blog posts, you want Google to know what your image is about without even looking at it!

Before you upload your new image, take a look at the name of the image. Your image should be named something that relates to the image and/or the content of your article. It should also include your keywords whenever possible. Choosing a keyword-rich name for your image will make it easier for search engines to rank your page.

For instance, if you are writing an article on how to choose the best chew toy for puppies, name your image “best-chew-toy-for-puppies.jpg”. If your image shows a sunset on a beach in Koh Samui, Thailand, name it ‘thailand-koh-samui-beach-sunset.jpg’.

Use dashes between words, rather than spaces, underscores or running all your words together.
This recommendation comes straight from Google. We’re not sure of the exact reason for this as Google guards how it’s search engine algorithm works closer than a magician guards their tricks. But the Google Webmaster say dashes between words helps google find your images!

ALT Text

When you upload your image, video or other media, you have the option to include ALT text. You should do this whenever you can.

The ALT text tells search engines about your image, which helps your rankings. Plus, screen readers read out the ALT text so you are helping your content be more accessible.

Your ALT text should help explain your image or the point you are trying to illustrate. Like choosing a file name, your ALT text should be related to the content of your article or your keywords.

Captions and Headlines

Image captions are the text that appears next to the image on your page. You don’t have to include them but they do help. Many readers tend to scan an article’s heading, images, titles, and captions quickly before deciding to read it in full. And they can help readers understand the point that you are trying to make with your image.

There’s no need to add a caption every time you use images in blog posts – sometimes an image is self-explanatory. Add them where they make sense or when you think they may help a reader understand your point of view.

BarkPost, the inventors of the monthly dog treat subscription Bark Box, tantalize dog lovers (like me) with goofy, fun images of pooches matched with Hollywood tabloid-style headlines, like these:

  • 5 Signs Your Dog’s Eye Boogers Are Caused By Something Dangerous
  • 18 Dogs Who Don’t Approve Of This Water Torture You Call “Bath Time”
  • I Signed My Dog Up For A Dental Care Box, And Here’s What Happened

 

how to use captions with images

Your final checklist

Any images you add to your blog should make your readers’ experience better. Ideally, they are a part of the message and make the reading experience better.

Too many images and you post becomes cluttered. The wrong images and your post is distracting to read.

As a final check when I use images in blog posts, I ask myself these two questions:

  • will this image keep the reader on the page?
  • does this image add to my argument or help the reader to understand better?

The extra effort you put into finding and adding images – of all types – to your post can pay big rewards. Instead of getting passed over, your post could be shared with thousands of readers and take on a life of its own.

After all, our goal is to get our blog read, shared and loved. Right?

 

Tell me in the comments what tricks you’ve found for working with images.

Hugh Culver

Speaker, author, athlete and founder of BlogWorks. I speak and write about getting stuff done and the art of growing younger.

2 Comments

  1. Doug Vincent on October 20, 2018 at 1:09 pm

    Great tips and information Hugh. Thanks for sharing.

    • Hugh Culver on December 4, 2018 at 10:18 pm

      Thanks Doug – much appreciated.

Leave a Comment