What you will learn
Media earns its place when it helps someone see, compare, learn, or complete a task better than text alone. An image can show fit and detail. A video can demonstrate a process. A transcript can make a spoken explanation searchable and accessible. The file name is the least important part of that work.
Why this matters
A beautiful asset with no context is hard to interpret. A product photo without dimensions or alt text does not help a screen-reader user. A useful video without a title, chapters, transcript, or page context is difficult to find and reuse. Media needs the same editorial care as written content.
Media can also create technical cost. Huge images, autoplaying video, blocked captions, inaccessible controls, and third-party embeds can make a page slower and less usable. Good optimization protects the customer task rather than chasing a thumbnail feature.
The useful-media stack
Start with the customer task. Make or select the asset that genuinely helps. Place it beside the explanation, add accessible and searchable context, then deliver it efficiently on the device the customer is likely to use.
Core concepts
Media should answer a question
Choose an image, diagram, screenshot, comparison table, demonstration, or video because it makes a specific point clearer. Decorative assets can be valuable for tone, but they should not be the only evidence behind a factual or product claim.
Use it when: What can the customer understand from this asset that text alone would not explain as clearly?
Context gives an asset meaning
Use a descriptive title, nearby heading, caption where useful, surrounding explanation, and relevant links. A product gallery needs variant and dimension context; a tutorial video needs the task, version, and result; a chart needs source and method.
Use it when: Could a person who finds this asset outside the page understand what it shows and why it matters?
Accessibility is part of the asset
Write alt text that communicates the meaningful content or function of an image. Provide captions and transcripts for instructional video, usable controls, clear focus states, and enough contrast. Do not repeat nearby text when the image adds no new information.
Use it when: Can a person who cannot see, hear, or easily operate the media receive the same essential information?
Delivery affects experience
Use sensible dimensions, responsive formats, compression, lazy loading for below-the-fold content, reserved layout space, and a plan for embeds. Measure whether the media delays the primary page task, especially on mobile networks.
Use it when: Does this asset help more than it costs in loading time, layout stability, and interaction?
The practical method
- 01
Define the media job
Write the question the asset will answer and the customer action it should support. This makes it easier to decide whether to create an image, video, diagram, or no asset.
- 02
Create original or licensed evidence
Use your own photography, screen recordings, demonstrations, datasets, diagrams, or properly licensed material. Record source, rights, attribution, version, and approval status.
- 03
Place it in a useful page section
Put the asset beside the decision it supports, with a heading and explanation that tell the reader what to notice. Avoid galleries that force users to infer the point.
- 04
Add accessible descriptions
Write purpose-led alt text, captions, transcript, chapter markers, labels, and audio or visual alternatives according to the asset and audience.
- 05
Optimize delivery
Generate responsive sizes, reserve layout dimensions, defer noncritical embeds, test captions and controls, and check the asset under constrained mobile conditions.
- 06
Maintain changing media
Review product screenshots, instructional videos, comparisons, prices, policy references, and chapter links whenever the underlying product or source changes.
Guided workshop
Plan media that helps a customer complete the page task
This section turns the lesson into a bounded working session. It is designed to leave you with an accessible media brief for images, video, diagrams, transcripts, captions, source files, and links to the next useful action.
Practice scenario
Practice scenario: A manufacturing company has excellent product videos, but they are stored on a video platform with vague titles and no transcripts. Product pages embed the same clip without context, diagrams use tiny labels, and important safety steps appear only as spoken instructions.
The team chooses one product-installation journey. It defines what an image can show, what a video should demonstrate, and what must also appear in clear text. It gives each asset a purpose, a title, a description, accessible alternatives, and a location in the customer journey.
The new brief does not treat media as decoration. It makes the visual evidence easier to find, understand, and use for people with different devices, connection speeds, and access needs.
Build it step by step
Give every asset one job
Decide whether the asset should orient, compare, demonstrate, reassure, document, or help someone take an action. Remove media that does not support the page's customer task.
Make it tangible: Save an asset-purpose list. It helps the team decide which media belongs on the page. Check adding stock visuals that make the page longer but not clearer before moving forward.
Write the text layer first
Create the key explanation, labels, steps, and outcome in plain text before relying on an image or video. The text helps readers scan, supports accessibility, and remains useful when media fails to load.
Make it tangible: Save a text companion for each asset. It helps the team decide what must remain understandable without the visual. Check putting a critical instruction only inside a video before moving forward.
Design images and diagrams for small screens
Use readable labels, enough contrast, a simple visual hierarchy, and one main idea per diagram. Test the image at the smallest expected viewport before considering it complete.
Make it tangible: Save a mobile visual check. It helps the team decide whether the visual clarifies or overwhelms the reader. Check shrinking a dense desktop diagram and calling it mobile-ready before moving forward.
Package video with context
Give the video a specific title, summary, chapter cues where useful, captions, transcript, speaker or source context, and a nearby written answer. Explain why a person should watch and what they will learn.
Make it tangible: Save a video metadata and transcript brief. It helps the team decide whether the video supports discovery and completion. Check embedding a video with no explanation or alternative before moving forward.
Make media technically dependable
Use sensible file sizes, responsive delivery, descriptive filenames where appropriate, stable embeds, and tested fallbacks. Check that media does not block the main answer, links, or action on slow connections.
Make it tangible: Save a delivery and fallback note. It helps the team decide which assets need optimisation or a safer placement. Check placing a heavy hero video ahead of essential page content before moving forward.
Measure usefulness, not only plays
Observe whether the asset helps people complete the task, reduces repeated support questions, reaches the next step, or understands a complex concept. Combine quantitative signals with user feedback.
Make it tangible: Save a media usefulness review. It helps the team decide whether to retain, improve, move, or retire the asset. Check treating views as proof that a video helped before moving forward.
Working template
Use these fields in a document, task, or spreadsheet. Keep the evidence close to the decision.
- Asset job: State the customer question or action this image, video, or diagram supports. A page owner should be able to remove assets with no clear job.
- Text companion: Write the essential explanation, steps, or labels that must remain available without media. An accessibility reviewer should be able to assess the page without playing the asset.
- Visual specification: Record format, focus, labels, contrast, mobile constraints, and source requirements. A designer should know what one idea the visual must explain.
- Video context: Add title, summary, captions, transcript, chapters, speaker context, and nearby next action. A content reviewer should see why the video belongs on this page.
- Delivery fallback: Describe responsive loading, failure state, and what a visitor can do if the media is unavailable. An engineer should be able to test the experience on a slow connection.
- Usefulness signal: Choose a task-completion, comprehension, support, or next-step signal to review later. The team should not rely on play count alone.
Quality review before you ship
Use these checks while the evidence, owners, and customer context are still easy to correct.
- View the page with images disabled or on a narrow screen. The reader should still understand the core decision; visuals should clarify, compare, or demonstrate rather than carry an essential unexplained claim.
- For each image or video, write the customer question it resolves and the evidence behind it. If it only decorates the page, remove it or give it a meaningful explanatory role before production effort grows.
- Check rights, consent, accessibility text, captions, file performance, and future update ownership before publishing. A useful visual becomes a liability if the product, customer, or legal context changes without a review path.
Decision rules for the real world
A diagram has too much text
Do: Split it into smaller visuals or move supporting detail into the surrounding copy.
Avoid: Do not reduce font size until the idea becomes unreadable.
A video repeats the page word for word
Do: Use it to demonstrate, show context, or provide a different learning mode.
Avoid: Do not add video just because the page needs multimedia.
A video contains regulated or safety guidance
Do: Provide a reviewed transcript, date, source, and clear boundary near the content.
Avoid: Do not leave high-stakes instructions only in spoken form.
The media loads slowly
Do: Protect the main content and use a lightweight poster, deferred embed, or alternative route.
Avoid: Do not make a visitor wait for decoration before they can act.
Coach notes
- The best media shortens the distance between a question and a confident next step.
- Accessible text improves the visual. It gives every reader a way to verify what they saw.
- One clear diagram can often replace several paragraphs of vague explanation.
Worked example: a project-management software tutorial
The company has a long blog post explaining how to create a recurring project template. It embeds a 20-minute video at the top with no chapters, no transcript, and a thumbnail showing a generic office. Mobile users wait for the player before they can see the written steps.
The team makes a two-minute task-focused recording, shows the finished template first, adds chapters for each step, publishes a transcript tied to the product version, and places annotated screenshots beside the written instructions. The video loads after the concise written answer and the player has accessible controls.
Make it stronger
Use an asset register
For important media, track the URL, rights, source files, product or content version, transcript, alt text, dimensions, owner, review date, and pages where it appears. This makes a redesign or product update much safer.
Treat YouTube as a separate audience surface
Plan a useful title, opening, chapter sequence, description, link route, captions, and thumbnail for the video platform. Do not upload a web-page recording and assume it will serve a viewer who begins on YouTube.
Make charts explain themselves
Charts need units, time period, source, method, key finding, and a text summary. A colourful graphic without those details is evidence theatre, not decision support.
Current guidance
Use Discover only where it fits
Discover can help a content-led brand reach interested readers, but it is a supplemental feed, not a reliable traffic forecast or a requirement for every business.
- A page is eligible for Discover when it is indexed and follows Discover policies. There is no special Discover markup that guarantees inclusion.
- Use an accurate title and headline. Avoid clickbait, exaggerated previews, and sensational framing. Timely stories and genuinely useful insight fit best.
- Where a page needs a hero image, use a relevant, high-quality image that is at least 1,200 pixels wide and more than 300,000 pixels. Plan for a safe 16:9 crop.
- Enable `max-image-preview:large` and provide a representative `og:image` or image markup. Do not use a generic logo or a text-heavy image as the preferred preview.
- Report Discover impressions, clicks, and CTR separately. Do not promise a stable forecast from an interest-based feed.
Use this before you publish
- This page has a real reader benefit beyond a traffic spike.
- The preferred preview image still explains the page after a landscape crop.
- Discover performance is reported separately from keyword-driven Search traffic.
Lesson artifact
Accessible media brief
Improve one existing media asset or plan a new one for a real customer task.
Asset job: State the decision or action it should help with, the audience, and the point a reader should take away.
Context and evidence: Write the surrounding heading, short explanation, source or method note, and any product or factual conditions that apply.
Accessibility: Draft meaningful alt text or a transcript and captions plan. Describe how keyboard and mobile users will operate the asset.
Delivery and upkeep: Choose size, loading behaviour, layout reservation, owner, version trigger, and a way to test whether the asset harms the core page experience.
Before you move on
- Every important asset supports a specific customer question or decision.
- Media appears beside the explanation that gives it context.
- Alt text, captions, transcripts, and controls meet the asset’s real purpose.
- Delivery is tested for mobile performance and layout stability.
- Source, rights, version, and review ownership are documented.
Put the lesson into practice.
Create a free Spacebrain account and use the SEO suite with your own data providers.