Screenshots, Diagrams and Charts in Blog Articles

Short answer: use an image inside an article only when it explains something better than words: a screenshot to show where something is on screen, a diagram to show how parts relate or a process flows, a chart to show a pattern in numbers. Crop screenshots to the relevant area and mark what matters. Keep diagrams simple, with labels in plain words. Give charts a title stating the finding. Add alt text that conveys the point, keep files light, and replace screenshots when interfaces change.

Images inside articles are often added for decoration: a stock photo between sections to break up text. Those add weight without adding understanding.

The images worth including explain something words cannot explain as well. Three kinds do most of that work.

Screenshots

A screenshot shows exactly where something is and what it looks like. It is the most useful image in how-to articles, where readers need to find a setting or confirm they are on the right screen.

Crop to the relevant area rather than showing the whole screen. Mark the element that matters with an arrow or outline. Remove or blur personal data, account details and anything confidential.

Diagrams

A diagram shows relationships: how parts connect, how a process flows, how a structure is organised. A cluster of articles around a pillar, a publishing workflow, or a redirect from old to new URLs is easier to grasp as a simple diagram.

Keep diagrams simple: few elements, plain labels, clear direction. A diagram that needs a paragraph to explain it is too complicated.

Charts

A chart shows a pattern in numbers faster than a table or sentence: a trend over time, a comparison between groups, a share of a total.

Title the chart with the finding — enquiries doubled after the change — rather than a neutral label. Show the source and period. Use real data only; fact-checking before you publish applies to charts as much as to text.

When a table is better

For comparisons across several attributes, or precise numbers readers will look up, a table is often better than a chart: it is readable by screen readers, searchable, and easy to update.

when a table beats three paragraphs covers when tables work best.

Making them accessible

Every meaningful image needs alt text conveying its point: for a screenshot, what it shows the reader to do; for a diagram, the relationship it shows; for a chart, the finding and key numbers.

If the image carries essential information, include it in the text as well, so readers who cannot see the image lose nothing — writing alt text.

File size and format

Screenshots and diagrams with flat colours and text are usually smallest as PNG or WebP; photographs as JPEG or WebP. Size images to their display width and compress them.

page speed on a content site covers why image size matters for readers on phones.

Keeping screenshots current

Software interfaces change. A screenshot showing an old layout confuses readers and makes the whole article look outdated.

List articles containing screenshots of software, especially third-party software, in your content inventory, and check them when the software changes or at least yearly.

Consistency

Use a consistent style across the blog: the same arrow and outline colour for screenshots, the same fonts and colours in diagrams, the same chart style. It makes the blog look coherent and saves decisions each time.

Captions and context

A short caption under an image tells the reader what to notice: the setting circled in red, the line that shows the trend, the step the diagram illustrates. Captions are among the most read text on a page, because skimming readers look at images first.

Refer to images in the text as well — as the screenshot below shows — so the connection between words and image is clear, and place each image close to the text it supports.

Tools for making them

No specialist software is needed. Screenshots can be taken and annotated with tools built into most operating systems. Simple diagrams can be drawn in presentation or diagram software. Charts can be made in a spreadsheet and exported as images.

Save the source files — the spreadsheet behind a chart, the editable diagram — alongside the images, so updating them later is quick rather than a matter of starting again.

Images on phones

Most readers see these images on a phone. A diagram with small labels or a screenshot of a wide desktop screen can become unreadable at phone width.

Check each image on a phone before publishing. Enlarge labels, crop screenshots more tightly, or split a complex diagram into two simpler ones. If an image cannot be made readable at small sizes, link to a larger version.

How many images

There is no right number. A how-to article may need a screenshot for most steps; an explanatory article may need one diagram or none. Add an image when it explains something, not to reach a quota or break up text.

Naming image files

Name image files descriptively before uploading — editor-role-settings.png rather than screenshot-2026-08-01.png. Descriptive names help you find images later, and they give search engines a small additional hint about what the image shows.

Screenshots with sensitive data

Screenshots taken from real accounts often contain email addresses, customer names, internal figures or tokens. Check every screenshot for anything that should not be public before publishing, and use a test account with sample data where possible, so there is nothing sensitive to hide in the first place.

Checking images before publishing

Before publishing, run through a short check for every in-article image: does it explain something, is it readable on a phone, does it have alt text and a caption where useful, is the file compressed, and is any sensitive data removed? It takes a minute per image and prevents most of the problems described above.

Rights

Screenshots of your own product are yours. Screenshots of other products may be allowed for commentary or tutorials in many places, but rules differ — image rights covers the considerations. Diagrams and charts you make are yours; charts based on others’ data need the source credited.

Related reading

If this was useful, these cover the questions that usually come next.

• Writing alt text — describing images for everyone
• Featured images for automated posts — the image above the article
• Writing a how-to article — where screenshots matter most

The bottom line

Use screenshots to show where and what, diagrams to show how parts relate, and charts to show a pattern in numbers, only when they explain better than words. Crop and mark screenshots, keep diagrams simple, title charts with the finding, write meaningful alt text, keep files light and replace screenshots when interfaces change.

FAQ

When should I use a screenshot in an article?

When readers need to see where something is on screen or confirm what they should see, especially in how-to articles.

What makes a good diagram?

Few elements, plain labels and clear direction. If it needs a paragraph of explanation, simplify it.

How should a chart be titled?

With the finding it shows, plus the data source and period.

Do in-article images need alt text?

Yes, conveying the image’s point. Essential information should also appear in the text.

How often should screenshots be updated?

Whenever the software changes, and at least yearly for articles about software.

Are stock photos useful inside articles?

Rarely. Images should explain something; decorative stock photos add weight without understanding.