Best Practices for Adding Visuals to Blog Posts

It’s a hard job to find relevant images for your article, right? Add to that all the screenshots you have to make, keeping the images all relevant… Ugh… But don’t fret! This guide is made especially for you.

Good formatting of your content will help greatly to keep your readers for longer. Even if folks don’t notice the formatting, it works positively – headlines are easier to scan, paragraphs are easier to read, images are nicer to watch and in general, it’s better for keeping track of the content.

In this guide, we will look into the best practices for using and finding proper images for your content. As simple as this might look, there are lots of ways you can fail. Low-quality images, bad colors, bad cropping, improper formatting, placement and more.

What Purpose Do Images Serve in a Standard Article?

When you write an article, you want to convey a message. You explain it. And to explain it well, you need well-constructed sentences, you separate your whole article in sections, give each section a headline, introduction, etc. Then you bold or underline, setlist blocks or block quotes to further break down the content.

But when your arsenal of text formatting is simply limited, or an explanation is far too long and sometimes boring, it’s better to show your point through other media like video, audio, photo or graphic means. Obviously, our focus here is on images and how best to utilize them.

What purpose does an image serve:

• Helps you explain a topic. Мost often through charts, tables, and the likes. You can see, later in this article, how a point is made in a paragraph and then shown with an image. Imagine one of the two missing. You might still get the point (which is good) but it’s way better to have support.
• Give your message a tone. How would you feel if the article you read is filled with cartoony images of ponies and rainbows versus complicated charts, statistics, and measurements? Believe me, the text can remain the same. Just change the style of the image, and everything changes.
• It can visually break down long passages of text. Meaning – when you have lots and lots of text paragraphs, one more colorful image or something lighter to the eye, can revive your reader a bit. It’s often seen in publishing platforms like Medium, where authors paste photos, even unrelated ones, which fill the whole screen just to give the readers a break. Of course, that image can be used to set the tone of the next portion of the content.

When you write a lot, consider if it would be a good idea to break up your content a bit. If your content does not need a photo, you can use one relevant to the topic or that sets the tone.

If you’re delving deep into an explanation, consider posting a graph/chart/anything that can showcase it visually. It’s often considered that visual graphics are processed faster than text.

Technical Look

For starters, take a look at the technical side of the images – file size, quality, colors, and cropping and continue with more context-related tips so that you can find a good image for your post.

Bad image quality

The number one issue is simply bad quality. Look at the clarity of the image here. The proper image resolution. Let’s kick it off with an obvious example:

As you can easily see, the difference is huge! The image on the left is retina-ready, which means it will look equally well on regular screens (like 23” Full HD) as well as on a mobile device with high DPI, like an iPhone.

What you need to do, is to upload at least 2x the size of the image that will end up on your blog post. If your content area is 600px, upload a 1200px image.

WordPress will automatically generate a new file size that will be pulled if you open the site with low DPI monitors. That way, you don’t worry about serving large files or low-quality images.

Image height

In most blog posts, when you have a wider content area, it’s not ideal to pick images with large height ratio. Meaning – images where the height is close to the width (square). Reason – they block too much of the available viewport. Especially on older/low-end devices with low resolution.

What you end up is a view completely taken up by an image. If it so happens that the image is not too well related to the content, you might forget what you were reading a few seconds ago.

Once again, an example:

The left “Wide image” is a better fit for most blog layouts because it allows you to see the content above and below the image. We suggest image ratio around 16:9 or maximum 4:3, though the latter goes closer to the danger zone.

File size

As you know, in order to speed up a site, one of the most common first steps is to reduce its files size. A relatively large website can have CSS files reaching 100-150kb. Similar sizes can be achieved with its JS as well.

But you know what? A simple image can go up to a few MEGABYTES. Ridiculous. A more realistic example is 200-400 KB for many sites, which is still bad because when you have 10-20 images, this can bubble up to a few megabytes of just images.

You have three simple steps to take, in order to fix this issue:

1. Upload images through the WordPress media uploader. You utilize your own setup (images are faster to download) and you allow WordPress to do it’s an optimization to the images.
2. Use the proper file type – PNG for flatter graphics, JPG for images
3. Minify your images through a service. We recommend TinyPNG.

Here is a helper illustration to decide what file extension you need – PNG or JPG.

Note – Illustrations are also most graphics, charts, text, etc. Images are literally photographs. JPG files can be compressed more, and the compression is hard to see due to the image itself – grass, water, faces, landscape, etc. While on an illustration, you can easily see the surrounding compression has otherwise sharp and clean edges. Especially around letters.

Set alternative text to the images

It’s advised to set an alternative text to all images you’re using. If you’re not sure what this is, no worries, you will see that it’s a very simple and easy thing to do. When you add an image to the WordPress media, you get an upload screen, on which you can adjust its settings.

I haven’t done this, you can simply hit the edit icon of an image in a post and fill in its alt text:

What are the benefits of doing this:

• Search engines can parse your content together with the images and gain further information about what is written. SEO points!
• One more way to add keywords to your post. SEO points again.
• If it happens that the image does not load, your readers can still understand what is represented on it. UX points.

A good way to test if your alt text is good is to ask yourself, “If I read this to someone, who don’t see the photo, will he/she understand what the photo looks like?”

And to give a short example of what is good vs bad alt text:

Bad: Photo of a phone
Good: A wide high-key photo of an iPhone in the middle, golden pencil and golden roses to the side.

Not all texts will be perfect, but it’s worth the effort for sure!

Pick the Right Photo

Oh, a hard one. How to know which photo is good and which is bad? First, it has to fit the content. For instance, a bunch of rabbits when talking of black holes would be confusing… Unless you know how to make it work, if that’s the case, please tweet it to @wpdevrix!

It’s all about context. The image must work well with your content – it should showcase what you’re explaining or help set the mood.

First, let’s start with some bad examples:

You’re writing about SEO practices. And in the middle of the text between two generic introduction paragraphs, you place an image of a laptop:

It says absolutely nothing. It’s just a laptop and that’s all. It’s not even related to the topic, it’s just “tech stuff” or similar. Do not do this.

Another example would if you’re writing some tips about plugins to use for WordPress. Your headline showcases that security is the next topic, and you open up with a few messages about why this is needed. After the third paragraph, this is the image:

This time it’s related to code because the plugins are written with code, right?

But this image has nothing to do with the context actually… There is no need for a photo in this case. You’re just giving an exposition of the reasons why security plugins are helping. This image? Doesn’t contribute to the text at all.

A well-known practice in copywriting (or just any kind of writing) is to trim as much as possible and only keep what is needed. If a few words can be removed, without changing the message and feeling you want to give to the readers, go ahead and remove them. If you can remove an image, and everything remains the same, then just remove the image.

And finally, one more example, this time instead of grabbing images from Unsplash, the image in use is from Freepik, which is in fact a pretty nice site, but has to be used carefully in content due to the reasons above.

Say you write about marketing, and you post this image in your opening paragraphs:

Once again, it adds zero value. The title already says what it is all about, you post your message clearly that it’s marketing-related content and then BAM – a flat illustration with questionable colors and a laptop that says “MARKETING CONTENT”.

So, as it was already mentioned – trim what you can go without. With this rule alone, you can remove most of these bad case images.

Now let’s cover some good case images:

Saw the images in this article so far? Now imagine it without them. Would it make sense? Probably not, because the images are illustrating what is being explained, and without them, you will not get a good picture of everything.

A Good Photo vs A Bad Photo

What does that even mean? Mainly general graphic design theory and best practices. You need a few things:

• Good balance and composition.
• White space.
• Typography if there is text on it.
• Colors – color wheel and branding colors.
• Attention to details (for illustrations).
• Quality lines (for illustrations).
• Proper cropping (related to composition).
• Contrast.

The problem with the list above is that unless you’re a designer, it’s hard to decide if an image covers them well.

And this is a huge topic in which countless books have been written. If you want to step up your game a bit, you should check out some of them! For example, this short article might help out.

But if we end this section here, there wouldn’t be much of a benefit in having it at all. Remember the “trim what is not needed” from before?

So here are some examples of good vs bad:

The first photo is taken from Wikipedia Commons (free to use), just like the second one from Unsplash. Both are considered non-premium images.

But the first one is of lower quality – there are burned areas on the images from white and black, the details are lost, the alignment is bad as well as the rotation of the image. The main subject is partially hidden and there is no balance overall.

While in the second image, we have nice symmetry, good details, the sky is visible (not pitch black). This is an example of good vs bad quality image.

We are not really looking into context here. If you’re writing about the first building, and there are no other images to pick from, decide whether you want it shown to the readers or just describe it due to its bad quality.

This time on the topic of food. Both images are again completely free to use. The first one has very bad quality, bad cropping and overall look and feel, while the second one looks like it was shot in a studio, has a nice contrast between the red and white and good composition with the main subject centered in the frame.

Finally, we have an illustration instead of a graphic. This time, though, the first one is free, but the second image is premium.

You can easily spot the difference – the first one lacks contrast with the circles, they are oddly placed, some have icons, others do not, it has various colors and lacks balance as well as not being centered properly.

On the second image, we have а nice, modern outline style with good color choices (mainly one base and one primary color) and good positioning of the elements (centered in this case).

Its white spacing creates balance in the final image, and the illustrations at the bottom keep it light and fresh.

Readers Also Enjoy: Simple Web Design Tips for Good Results – DevriX

Image as a Divider

One more way to use images inside content is to use them as a divider. And this is something that you can go without, but it could bring nice visuals and set the mood.

But it’s a slippery slope. When you begin to consider your images as dividers, you go back to the problem of having unrelated stuff.

So use them sparingly! If it so happens that your content has 1000 words with no visuals, it becomes a little dull… If you have nothing to showcase with an image, and it’s really just text, then it’s possible to use dividers.

In this Smashing Magazine article about Figma vs Sketch vs Adobe XD, there is one image that shows the logos of the three programs. It’s not really needed, you can go without it, but it looks pleasant , has nice white space and is in fact on topic (showcases the three visually, so you can have a better mental picture to separate them).

It also is at the beginning of the comparison between the three and in the order they are shown, so apart from being a separator, it provides a visual map.

Other similar images you can use are comics. See the first image in “7 Reasons Why It is Difficult to Manage New Projects.”

It is contextually related, but you can technically go without it. What it does though is set the mood and act as a visual separator between the sections. In contrast, the graphics below are related to the content and provide information.

Summary

Hopefully by now you have a better understanding of how, when and why to add visuals to your blog posts. Be sure to use the acquired knowledge, and remember the golden rule: always include various imagery in your articles, but also avoid including images that add no value to readers, like stock photos.