Extract a Website's Media Styles

To extract a website's media styles, review its images and video as part of the page design, not as isolated files. Record the role, crop, size, playback behavior, overlay treatment, and relationship to nearby text for every major media element.

Use this review method

Start with the page's most visible media, then work down through supporting sections. For each image or video, capture:

1. Role: hero background, product demo, editorial image, illustration, customer proof, decorative detail, or transition.
2. Shape: full bleed, contained card, split layout, circular crop, masked shape, or irregular clipping.
3. Crop: centered, top-biased, subject-aware, or deliberately abstract.
4. Treatment: border, radius, shadow, gradient, blur, tint, grain, frame, or no treatment.
5. Motion: autoplay, loop, muted playback, scroll reveal, hover behavior, or static fallback.
6. Placement: how close the media sits to the headline, controls, captions, and section boundaries.

This produces a useful media inventory instead of a vague statement such as "the site uses video."

Open the examples below and compare the first screen before borrowing a pattern. Pangram AI Detector combines illustration and video with a bold editorial palette. Refero uses video as a central marketing device, while Bland and Fin Apex show video working alongside product or launch-page illustration. The important comparison is not which page looks most impressive. It is how each page gives media a job, a frame, and a visual priority.

Build a media style sheet

Turn your observations into a short style sheet with five sections:

• Media roles: list the recurring jobs media performs.
• Container rules: note common widths, aspect ratios, radii, borders, and spacing.
• Crop rules: describe which subjects stay visible and where focal points sit.
• Motion rules: record when video moves, when it pauses, and what remains understandable without sound.
• Overlay rules: document captions, gradients, labels, controls, and contrast treatments.

A simple table is enough: element | role | source type | aspect ratio | crop | treatment | motion | nearby content. Add one screenshot or page reference for each recurring pattern.

Separate observation from ownership

An extracted style sheet describes what appears on the captured page. It does not prove that you own the site's assets, videos, artwork, fonts, or internal design rules. Use it as reference material for your own decisions, then replace borrowed media with assets you can use and adapt the patterns to your product.

Also distinguish a repeated pattern from a one-off campaign treatment. If one launch page uses a dramatic video background but the rest of the site uses contained product clips, treat the launch treatment as a special case rather than a global rule.

A practical handoff checklist

Before handing the review to a designer or developer, confirm that it answers:

• Which media belongs above the main message?
• Which visuals explain the product and which only set a mood?
• What happens when video cannot play?
• Does the crop preserve the subject at narrow widths?
• Are captions and controls readable over the image?
• Which treatments repeat enough to become shared components?
• Which details are observations that still need verification?

A page capture can make this faster by letting you inspect images, video, crops, playback, overlays, and clipping alongside page structure and typography. For a broader extraction workflow, see extract a design system from a website.

Use this in your AI agent

> Review the captured website's media styles. Create a table of every major image, illustration, and video with its role, aspect ratio, crop or focal point, container treatment, motion behavior, overlay treatment, and nearby content. Separate recurring rules from one-off campaign details, flag anything that needs verification, and finish with a reusable media style guide for a new product page.

Install Fudge for your AI agent.

Compare them by the job media performs, not by whether one format appears more often. For each page, mark whether the main visual explains a workflow, demonstrates a product, establishes a mood, supports a claim, or fills space around the headline.

Then compare five practical signals:

• Time to meaning: how quickly a visitor understands what the media shows.
• Control: whether the visitor can pause, replay, mute, or inspect the detail.
• Fallback: whether the message still works when motion stops or media does not load.
• Crop stability: whether the important subject survives desktop and narrow layouts.
• Production burden: whether the pattern needs repeated filming, editing, illustration, or maintenance.

A video-led page may suit a product that needs demonstration. An illustration-led page may suit a concept that benefits from a simplified visual explanation. Many strong pages combine both: illustration for the main idea and short video for proof or detail. Review the examples below with this checklist, and record where the format helps the visitor rather than simply adding visual activity.

Give the designer a short media brief with decisions, examples, and open questions. Start with the page goal and identify the two or three media roles that matter most. Then include a table with the preferred container shape, aspect ratio, crop guidance, radius, border or shadow treatment, and mobile behavior for each role.

Add a motion section that states whether media should autoplay, loop, pause, or remain static. Include a fallback image or alternate treatment for every important video. Add an overlay section covering captions, gradients, controls, and readable text placement.

Keep source observations separate from recommendations. For example, write "captured example uses a contained looping product clip" before writing "proposed product clip uses a 4:3 container." Finish with a small review checklist: subject remains visible, text stays readable, media has a clear job, and the pattern works without sound. This gives the designer a usable starting point without pretending the captured site's assets or internal rules are yours.

Related questions

• Extract a Website's Page Layout
• Extract a Website's Interaction Patterns
• Extract a Website's Shadow Styles
• Extract a Website's Spacing Scale