Every case-study image needs a job. It might prove what existed, explain a decision, show what changed, orient the reader, or create a pause between dense sections.
Those jobs are not interchangeable. A polished abstract visual can make a useful cover, but it cannot prove that you designed, researched, tested, or shipped a product. A rough annotated sketch may be less decorative and far more valuable as evidence.
Choose the image by its purpose first. Style comes later.
Separate evidence from decoration
Evidence helps a reader verify or understand the project. Examples include an authentic interface screenshot, a diagram you made during the work, a photograph of a real workshop you had permission to document, or a comparison that shows a supported change.
Decoration shapes tone or pacing without documenting the project. Examples include an abstract background, a material study, a geometric transition, or a clearly labelled concept illustration.
Both can belong in a portfolio. Trouble begins when decoration is presented in an evidence position without a clear explanation.
For each proposed image, finish this sentence:
This image helps the reader understand ______.
If the answer is only “that the page looks polished,” treat it as decoration. Keep it away from claims about research, client work, testing, implementation, or outcomes.
Give the project hero one clear responsibility
The hero is the first substantial visual associated with a project. It should help a reader recognize the work and anticipate what the case study contains.
A strong hero might show the final interface in a restrained context, one important detail, a truthful before-and-after pair, or an abstract cover clearly framed as concept imagery. It does not need to summarize the entire process.
Avoid loading the hero with several device mockups, tiny screens, floating labels, and decorative props. At phone width, those details often collapse into noise. Choose one focal area and leave enough room for the project title or adjacent copy.
Try: View the hero at roughly 390 pixels wide. Can you identify the focal point without zooming? If not, choose a closer crop or a different image.
Select process images that explain a decision
A wall of sticky notes proves that sticky notes existed. It does not automatically explain what the team learned.
Choose process artifacts where the connection between observation and decision is visible. A useful sequence could include:
- an authentic excerpt from the starting flow;
- a diagram showing the constraint or repeated problem;
- two alternatives with the tradeoff named;
- the selected direction and why it advanced.
Add a concise caption. “Early wireframes” names the artifact. “Two navigation models tested before the team kept task groups visible” explains why it earns space.
Redact private participant details, account information, unreleased strategy, internal URLs, and confidential client material before export. Cropping is not a reliable redaction method when the original file or a larger derivative remains available elsewhere.
Use screenshots as records, not wallpaper
An interface screenshot should show a relevant state at a legible scale. If a reader needs to inspect a small control, crop to that area and explain its significance rather than shrinking an entire desktop screen into one column.
Preserve enough context to avoid misleading the reader. A close crop of a successful state may hide an unresolved error state; a polished prototype may look shipped if the caption does not say it was a prototype.
Check every screenshot for:
- real names, email addresses, avatars, account numbers, locations, or private messages;
- confidential metrics or research notes;
- third-party logos and licensed content;
- browser tabs, bookmarks, file paths, notifications, or environment names;
- unsupported claims implied by a caption;
- text too small to read on a phone.
If a screenshot contains genuine client or employer work, confirm that you have permission to show it. A portfolio disclaimer does not override a contract or confidentiality duty.
Use diagrams when relationships matter more than surfaces
A diagram can explain a flow, system boundary, decision path, research theme, or information hierarchy more clearly than several screenshots.
Reduce it to the relationship the reader needs. Label the important steps, maintain a logical reading order, and do not rely on color alone to separate categories. When the diagram carries detailed information, provide a nearby text explanation rather than trying to force every fact into short alternative text.
The image and the prose should agree. If the diagram says a service has four stages but the paragraph describes five, the visual no longer helps.
Treat placeholders as temporary and visible
A placeholder is useful while the case study is being assembled. Label it in the editing source with the missing image’s purpose, such as “replace with checkout error-state comparison.” That keeps the gap specific.
Do not publish a decorative AI image in an evidence slot merely because the real artifact is unavailable. You can omit the section, describe the decision in text, create an honest explanatory diagram, or state that the original material is confidential.
A missing screenshot is better than false proof.
Use AI-generated visuals only in honest roles
AI-generated imagery can support a cover, background, mood transition, or clearly described concept. It must not be presented as genuine project evidence.
Do not imply that an AI-generated interface was designed or tested by you, that a synthetic building was commissioned or constructed, that generated research artifacts came from participants, or that a fictional photograph records a real process. Avoid realistic synthetic people as identity stand-ins.
If AI material is included, label its role where a reader could otherwise mistake it for evidence. Preserve the provider, model or tool, date, inputs, selection, and material edits in a provenance record. Remove private metadata from public derivatives while retaining a controlled record of how the source was made.
Provider terms may address rights between the provider and customer, but they do not prove uniqueness, trademark safety, identity consent, factual truth, or permission for external references. Portfolio Work Studio records the provider, model or tool, generation date, source terms, selection, and material edits for each released image pack, then publishes a concise provenance summary without exposing private prompts or account details.
For OpenAI-produced resources, verify the current Services Agreement, Service Terms, and usage policies against the production record. This guide does not provide legal advice.
Write alternative text for the image’s actual job
Alternative text, or alt text, communicates the useful content or purpose of an image when it cannot be seen. The same source image may need different alt text in different contexts because its job changes.
For a meaningful screenshot, describe the state or relationship being discussed: “Mobile checkout prototype with delivery options expanded below the address.” Do not repeat the filename or add search phrases that the image does not communicate.
For a diagram, give the short identifying point in alt text and explain complex details in nearby prose. For a purely decorative background that adds no information, use empty alt text so it can be skipped.
The W3C image decision tree helps distinguish informative, functional, complex, and decorative uses. Google also recommends useful, contextual alt text and warns against keyword stuffing in its image guidance. Accessibility is the first reason to write it; search context should not distort the description.
Prepare dimensions for the layout, not an arbitrary maximum
Start with the largest place the image is intended to appear. A full-width project image needs more source detail than a small process thumbnail. Keep a reviewed master, then create appropriately sized web derivatives rather than serving the same oversized file everywhere.
Use responsive image markup so a browser can choose a suitable source, with a dependable fallback. Modern formats such as AVIF and WebP can reduce delivery size, but the visible result still needs human review. Fine type, line diagrams, grain, and soft gradients can fail differently under compression.
Record the source dimensions, derivative dimensions, format, quality setting, byte size, and source hash. Do not upscale a small screenshot and imply that added pixels restore missing detail.
Exact format and quality settings depend on the image. The Creative Library keeps reviewed 1536 × 1024 PNG masters in each default package and supplies AVIF and WebP derivatives for the approved landscape, square, and portrait crops. The page gallery uses the lighter derivatives; the download keeps the approved master separate from preview delivery.
Make mobile crops deliberately
One centered crop rarely works for every composition. A desktop hero may place the subject on the left to leave room for text; a centered portrait crop could remove the subject entirely.
Review at least a wide frame, a square frame, and a portrait or mobile frame. Move the crop around the actual focal point. For screenshots, consider a separate detail crop rather than cutting controls or labels in half. For diagrams, rebuild the layout when cropping would destroy the sequence.
Keep crop decisions traceable to the master. A derivative is not a new piece of evidence, and its caption should not claim more than the complete source supports.
Optimize only after the content review
Before compressing, inspect the master at 100% zoom. Look for warped geometry, broken perspective, duplicated objects, text artifacts, fake logos, watermarks, impossible shadows, unintended people, and damaged edges.
Then inspect every derivative at its display size and at 100%. Check that:
- important text remains readable;
- gradients do not show distracting bands;
- transparent edges stay clean;
- line art has not become soft or uneven;
- the intended focal point survives each crop;
- private metadata is absent from public files;
- the optimized file traces back to the reviewed master by hash and manifest.
A smaller file is not an improvement if it weakens the evidence.
Know what to skip
Leave an image out when it:
- repeats a point already shown more clearly;
- contains information you cannot safely disclose;
- implies a result you cannot support;
- is too small or damaged to read;
- uses a third-party asset without adequate rights;
- is decorative but sits where readers expect evidence;
- contains invented UI copy, research findings, metrics, or client names;
- adds visual polish while making the story harder to follow.
Fewer images can make a case study feel more complete when each one has a clear role.
A practical case-study image checklist
For every image, confirm:
- its role is evidence, explanation, orientation, or decoration;
- the caption states what the reader should notice;
- project stage and authorship are represented honestly;
- private and confidential details have been safely removed;
- permissions and third-party rights have been checked;
- AI-generated decoration cannot be mistaken for project proof;
- meaningful content has context-appropriate alt text;
- decorative imagery is skipped by assistive technology;
- the desktop, square, and mobile presentations were reviewed;
- file dimensions suit the intended layout;
- optimized derivatives remain visually sound;
- the original reviewed source and provenance record are retained.
Final check: If the caption disappeared, could a reasonable reader mistake the image for evidence of work you did not do? If yes, change the image, its position, or the explanation before publishing.
Frequently asked questions
How many images should a UX case study include?
There is no useful universal number. Include enough to explain the problem, key decisions, your contribution, and the supported outcome. Remove images that repeat the same point.
Can I use AI images in a portfolio case study?
Yes, in an honest role such as a clearly labelled concept illustration or decorative background. Do not present them as screenshots, research evidence, real client work, or documentation of an event that did not happen.
Does every case-study image need alt text?
Every image needs an appropriate text-alternative decision. Meaningful images need useful text; purely decorative images normally use empty alt text. The right wording depends on what the image does in that specific context.
Should I show every wireframe and research artifact?
No. Select artifacts that reveal a decision, constraint, change, or contribution. A smaller, explained sequence is more useful than an unexplained archive.
© 2026 Portfolio Work Studio. Guide article text is protected by normal website copyright and is not dedicated under CC0.
