How to illustrate a blog post so the illustration earns its place

TL;DR

• Every illustration should do one explanatory job. If it does not help the reader understand, compare, diagnose or act, leave it out.

• One to three visuals suits most explanatory articles: an overview, an explainer at the hard part, and sometimes a summary.

• Pick the format from the relationship the reader needs to see, not from what looks good in the template.

• Write a brief with a single takeaway before anyone opens a design tool.

• Generators are for conceptual images. Anything with real labels, data or interface goes in a diagram tool.

• Review accuracy on a rough draft, before the polish, because a wrong sequence beautifully drawn is still wrong.

• Alt text, filenames and responsive sizes are part of the illustration, not admin that happens afterwards.

Table of contents

• The short answer

• Start with the reader's problem

• The necessity test

• Pick the format from the relationship

• Plan the set before you make one

• Write the brief first

• Design for comprehension

• Where AI helps and where it wrecks things

• Publishing is part of the illustration

• Eight ways illustrations fail

• Frequently asked questions

The short answer

A blog illustration earns its place by making one relationship easier to understand. Sequence, hierarchy, contrast, cause and effect, or where a setting lives in a real interface. Anything that does not do one of those jobs is decoration wearing a diagram's clothes.

The method is short: work out what the reader needs to see, test whether a visual beats prose at showing it, choose the format from the relationship, write a brief with one takeaway, check the logic before the polish, and publish it with alt text and a filename that mean something. Most explanatory articles need one to three visuals. Orbit Media's annual blogging survey finds most bloggers add only a few images to a typical post, with a small minority running ten or more, and their guidance on blog images is worth reading alongside this.

Generated images made the production step cheap, which moved the whole problem upstream. When an image costs 20 seconds, nobody stops to ask whether it explains anything.

Start with the reader's problem

Begin with what the reader is struggling to hold in their head, not with a preferred style. For each candidate visual, name the job with a verb: understand how something works, follow a sequence, see how parts relate, compare two options, diagnose a cause, interpret a number, or remember a set of actions.

Then go through the outline and mark where a reader is likely to stop and reread. The reliable candidates are a multi-step process spread across several paragraphs, a relationship between systems or teams, a before-and-after, a root cause with several consequences, a framework someone might reuse, a dense set of numbers, and a product screen where the location of a setting is the answer.

Take an article on why enterprise leads keep landing with the SMB team. The intro describes a symptom the reader already recognises, so no visual. The section explaining how routing is meant to work asks them to build a mental model, so a system flow earns its place. The section on where it breaks asks them to diagnose their own setup, so a cause-and-effect diagram earns its place. The section listing three fixes was going to get an image of three boxes, which shows no relationship at all and belongs in the body copy as a list.

The necessity test

Make the illustration only if at least one of these holds: it communicates the point faster than prose, the reader needs to see a relationship or sequence, it reduces the chance of misunderstanding, or it works afterwards as a reference or decision aid.

Notice what is missing from that list. Breaking up the page is not a reason. Whitespace, shorter paragraphs and a subheading solve a wall-of-text problem without adding something the reader has to interpret, and without adding something someone has to maintain when the product changes.

There is two questions that settle most cases. Could I delete this image and lose nothing? Could I delete two paragraphs because this image exists? A yes to the second is the clearest signal you will get.

Pick the format from the relationship

The format follows from what the reader needs to see.

The rule underneath the table: diagrams, screenshots and charts when exact relationships matter, conceptual illustration when the job is to frame an idea rather than explain a mechanism.

When the format is a chart, keep the shape simple. Nielsen Norman Group's research finds bar charts, line charts and scatter plots are easiest to interpret, because other chart types ask readers to judge angle, area or volume rather than position and length. So: categories go in a bar chart, change over time in a line chart, two variables in a scatter plot, and a single number goes in a sentence.

Four quick corrections that cover most format mistakes. An icon collage does not show that step three precedes step four, a process flow does. A pie chart of four quarters does not show that Q4 was strongest, a bar chart does. A conceptual illustration does not show five points of difference, a side-by-side comparison does. A diagram of the settings model does not show where the toggle lives, and an infographic is its own medium with its own rules.

Plan the set before you make one

Plan all the visuals for an article together, so each has a distinct role and none repeats another in slightly different shapes. An overview near the top orients the reader, an explainer sits at the article's hardest point, and a summary or decision aid near the end helps them act.

For the lead routing article, that comes out as three candidates. After the introduction, the intended routing workflow, with the takeaway that assignment depends on four fields being populated. In the middle, the failure chain, with the takeaway that one empty field produces a wrong owner and a delayed follow-up. At the end, a quarterly audit checklist, but only if the audit is genuinely repeatable rather than a list invented to fill the slot.

A good plan sometimes produces fewer images than positions. An article comparing headless and coupled CMS platforms might warrant an architecture diagram at the top and a comparison in the middle, then nothing at the end, because the decision aid is already a table in the body copy. Adding a third image would mean saying the same thing twice.

On placement: put the image next to the text that introduces it, explain the idea in prose first, and avoid dropping an image between a heading and its first sentence unless the image is that section's main explanation. Use the caption for interpretation or source, not to repeat every label already visible in the picture.

Write the brief first

A brief is a content specification, not an art direction note. It names the reader, the objective, the single takeaway, the format, the required elements and labels, the correct relationships, the source material, the style, the placement, the caption and alt text, and who signs off on accuracy.

The test that does most of the work is one sentence: after seeing this illustration, the reader should understand that ________.

"...that lead routing is complicated, our CRM has many fields, and data quality is important" fails, because it is three ideas. "...how lead routing works" fails too, because it names a topic rather than a takeaway. "...that assignment runs before enrichment finishes, so leads with no country value fall to the default rule" passes, and it tells the designer what the diagram has to make visually obvious.

That last brief also specifies things a designer cannot infer: that enrichment and assignment run in parallel rather than in sequence, that the failure branch uses a dashed line as well as an accent colour, that the timing figure comes from a named spreadsheet and needs checking before publication, and that the RevOps lead reviews it before anyone starts polishing.

Design for comprehension

Clarity comes from hierarchy, spacing and accurate relationships. Brand styling supports that structure rather than competing with it.

On icons, NN/g's research is that recognition depends on familiarity, so borrowed conventions beat invented ones and a label beside the icon removes the ambiguity entirely.

Accessibility is part of the design rather than a check at the end. Keep contrast sufficient, never let colour carry meaning alone, keep labels legible at mobile width, and explain the core point in the surrounding prose so the article survives the image failing to load. The alt attribute is what a screen reader reads out in the image's place, so every content image needs one, while a purely decorative image takes an empty alt attribute and gets skipped.

A worked example of the colour rule. A migration timeline marks completed phases green and blocked phases red. To a reader with red-green colour blindness that is six identical grey-brown bars. The fix costs nothing: completed phases get a tick and the word "done", blocked phases get hatching and the word "blocked", and colour becomes a help rather than the whole message.

Where AI helps and where it wrecks things

The more exact the information, the less suitable a free-form image generator becomes. Exact diagrams, charts and labelled workflows belong in a vector or diagram tool, where text and connectors stay editable and correct. Annotated screenshots come from the real product. Conceptual and editorial images are where generation works, because nothing in them has to be factually right. Rough concept exploration is where it works best of all, since three quick directions cost minutes and help the team choose before production starts.

For conceptual work, build the prompt from six parts: subject, composition, style, brand direction, format, and constraints. The constraints are the half people skip and the half that saves the image.

A usable prompt looks like this: an editorial illustration of one clean continuous line running left to right through dense tangled lines in a muted tone, focal point left of centre, flat vector, geometric, no gradients, two-colour palette with a single amber accent on the clean line, 16:9 with negative space in the right third for a headline, and no text, no letterforms, no logos, no interface elements, no charts.

A prompt that should never be written looks like this: a diagram showing how our CRM routes leads through enrichment and territory rules, with labels for each step. That is an exact relationship with required labels, and a generator will invent plausible connectors and misspell half the text.

Review every generated image before it goes near an article. One "AI-native content team" header came back with six figures round a table, five of them men in suits, a screen showing garbled text that reads as a real dashboard at a glance, and a logo-like mark on the wall. Three problems in one picture: representation, an invented interface, and a trademark risk. None are visible unless somebody looks with the checklist in hand, which is the same discipline that keeps written output from turning into slop.

Publishing is part of the illustration

Review content accuracy before investing in visual polish. A finished, brand-perfect routing diagram once went to the subject expert at the design review rather than the accuracy review, and enrichment had been drawn in sequence instead of in parallel, which inverted the article's entire argument. The correction changed the layout, so the polish had to be redone. Ten minutes on a rough draft would have caught it.

Then the production details, which are part of the work rather than admin afterwards.

Serving several sizes of the same image through srcset and sizes lets the browser pick the right one rather than sending a desktop-width file to a phone. Google's own guidance covers filenames, alt text, placement near the relevant copy, and why images have to be crawlable to appear in image results, which you can read in full in their image SEO documentation. If you publish original research charts or licensed photography, image licence metadata controls how that information surfaces.

Three alt text corrections worth memorising. "diagram" conveys nothing. "Image of a chart showing data" describes the medium rather than the information. "lead routing CRM software best practices 2026" is a keyword string that somebody has to listen to. What you want is the takeaway in a sentence: "Flow diagram showing enrichment and assignment running in parallel after a lead is created."

Recheck screenshots, product flows and statistics whenever the article is updated. An illustration is the part of a post most likely to go stale without anyone noticing, because nobody rereads an image when they refresh the copy. Structured, addressable content makes that refresh work tractable, and where the assets live is a CMS question more than a design one.

Eight ways illustrations fail

The strongest illustration is rarely the most elaborate one. It is the one that makes the article's most important relationship easier to understand, accurate enough to trust, and simple enough to remember a week later.

All of which assumes the terminology, the claims and the house language are settled before anyone opens a design tool. That consistency comes from the same place the writing does, which is a brand knowledge base your team and your agents both read.

Frequently asked questions

How many images should a blog post have?

One to three for most explanatory articles: an overview, an explainer at the hardest point, and sometimes a summary or decision aid. Add more only when the article covers several distinct systems or comparisons that each need visual treatment. Survey data suggests most bloggers sit at the low end, and image count is a poor proxy for quality either way.

Should I use AI to generate blog illustrations?

For conceptual and editorial images, yes, and for rough concept exploration it is the fastest option available. For anything with real labels, data, product interface or technical relationships, use a diagram or vector tool instead, because generators invent text and connectors that look plausible and are wrong.

What makes good alt text?

One sentence carrying the information or purpose of the image. Describe what the reader would learn from it, not the medium, and never pad it with keywords. Purely decorative images take an empty alt attribute so assistive technology skips them.

Which chart type should I use?

Bar charts for comparing categories, line charts for change over time, scatter plots for the relationship between two variables. Research on chart comprehension consistently favours these three, because they ask readers to judge position and length rather than angle or area. A single number needs a sentence, not a chart.

Where should an image sit in an article?

Immediately after the prose that introduces the idea, so the reader knows what they are looking at before they interpret it. Avoid placing an image between a heading and the first sentence of its section unless the image is that section's main explanation.

Do blog images help SEO?

Indirectly, and less than people hope. Descriptive filenames, useful alt text, placement near relevant copy and crawlable files all help images appear in image results. A decorative stock photo with a keyword-stuffed filename helps nothing and slows the page down.

How do I keep illustrations from going stale?

Treat them as part of the content refresh rather than a one-off asset. Keep the editable source file with the export, record the owner and approval date, and recheck any screenshot, product flow or statistic whenever the article is updated.