liveBook · Manning

Digital image

As explained in Writing for Developers: Blogs that get read

A two-dimensional visual representation presented to communicate information in digital or physical form.

Use a digital image to communicate complex information quickly: an architectural diagram, optimization graph, bug-hunt screenshot, chart, or system-building illustration can focus attention more efficiently than prose alone. section 5.4.5 section 10.5.2

Make each image useful on the page:

  • Crop screenshots to the exact feature under discussion and make the relevant detail readable at normal template size. section 5.4.5
  • Write a caption explaining why the image appears and what readers should notice. section 5.4.5
  • Check clarity, size, color-blind accessibility, and ALT text before publishing. section 5.4.5 section 7.6

A focused dashboard screenshot

Replace a full-screen dark-mode dashboard with a cropped image showing the exact panel being discussed, then caption the relevant clue and verify that its meaning does not depend only on color. section 5.4.5

How Writing for Developers: Blogs that get read covers it

How deep it goes
Covers selection, cropping, captions, color accessibility, clarity, sizing, and ALT text without teaching data visualization design in depth.
Examples
Uses architectural diagrams, optimization graphs, dashboard screenshots, charts, and implementation visuals as concrete examples.
What you can do after
Evaluate images by checking reader focus, readability, captions, color accessibility, clarity, size, and ALT text.
How it connects
Connects images with architectural diagrams, data visualization, graphs, screenshots, captions, accessibility, and ALT text.

Also explained in

Compare how 16 books explain digital image →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Writing for Developers: Blogs that get read. The section links point to the parts of the book it draws on.