# Inspect a Website's Image and Video Use from Its URL [Open the live Fudge conversation](https://design.withfudge.com/share/inspect-a-website-s-image-and-video-use-from-its-url) Last updated: 2026-08-25 You can inspect a website's image and video use by reviewing each section for the asset's purpose, placement, crop, motion, and fallback. The goal is not to list every file. It is to explain what each prominent visual helps a visitor understand or do. ## Start with an asset inventory Move through the page from the opening section to the final call to action. Record one row for each meaningful image, illustration, screenshot, or video: | Section | Asset | Likely job | Placement | Behavior | Main question | |---|---|---|---|---|---| | Opening | Video, image, or illustration | Set context | Background, card, or inline | Autoplay, loop, or still | Does it clarify the offer quickly? | | Feature | Product image or demo | Explain a feature | Beside copy or inside a frame | Static, scroll-linked, or interactive | Does it show the feature being described? | | Proof | Screenshot, customer image, or video | Build confidence | Grid, carousel, or case study | Click, hover, or modal | Is the evidence easy to understand? | | Closing | Image or motion panel | Reinforce action | Behind or beside the CTA | Static or animated | Does it compete with the next step? | Also note the visible size, aspect ratio, crop, edge treatment, and relationship to nearby text. Check whether the section still makes sense when the asset is ignored. If the answer is no, the copy may need to carry more of the explanation. The examples below can help you form comparison questions. Pangram AI Detector is described as combining illustration and video with a bold editorial palette. Refero is noted as a video-led marketing home page, while Bland and Fin Apex also use captured video alongside product or launch-page visuals. These notes are useful reference prompts, not proof that one pattern is right for every site. ## Captured pages [![Pangram AI Detector](https://pin.fontofweb.com/9687?format=jpg)](https://design.withfudge.com/share/pin-9687) [Pangram AI Detector](https://design.withfudge.com/share/pin-9687) [![Refero](https://pin.fontofweb.com/9683?format=jpg)](https://design.withfudge.com/share/pin-9683) [Refero](https://design.withfudge.com/share/pin-9683) [![Bland](https://pin.fontofweb.com/9666?format=jpg)](https://design.withfudge.com/share/pin-9666) [Bland](https://design.withfudge.com/share/pin-9666) [![Fin Apex](https://pin.fontofweb.com/9645?format=jpg)](https://design.withfudge.com/share/pin-9645) [Fin Apex](https://design.withfudge.com/share/pin-9645) ## Inspect placement and crop A full-bleed background, framed product screenshot, and narrow image beside a headline have different jobs. Identify which one you are looking at, then check whether the visual supports the surrounding content. Record whether it sits above the opening section, aligns with a text column, crosses a grid boundary, or stays inside a card. Test the crop at desktop and narrow widths. Mark anything important that disappears: faces, product edges, interface controls, labels, or text inside the image. For a video, inspect the first frame, loop point, playback speed, controls, captions, and poster image. Ask whether the visitor can understand the point without sound or without watching the full clip. Look for overlays and layers such as gradients, floating labels, device frames, masks, and cards crossing an image boundary. Separate the layer that carries meaning from the layer that adds emphasis. This makes it easier to adapt the structure without copying every decorative detail. ## Test usefulness and resilience Use three tests for every prominent asset: 1. **Clarity:** Can a visitor explain what it shows after a few seconds? 2. **Relevance:** Does it support the section's promise? 3. **Resilience:** Does the section work on a small screen, during slow loading, and with motion reduced or unavailable? If an asset fails clarity, try a tighter crop, labeled still, or shorter demonstration. If it fails relevance, reduce its size or remove it. If it fails resilience, provide a useful poster image, keep key information in text, and avoid putting the only explanation inside motion. Finish with three decisions: one pattern to keep, one to test, and one to avoid. Give each a reason, the section where it belongs, and the smallest version worth trying. Then write a brief with the goal, source, placement, crop, motion, fallback, and success check. That turns inspection into a practical design plan. ## Use this in your AI agent > Inspect the captured website's image and video use section by section. Return a table with asset type, likely purpose, placement, crop, motion or interaction, overlay treatment, responsive risk, and fallback recommendation. Then give me three patterns to keep, three to test, and three to avoid, with reasons tied to the page's content and visitor flow. Separate observed details from recommendations. [Install Fudge for your AI agent](/mcp) --- Separate the hero asset's visual role from its reading role. Record whether it explains the product, demonstrates a result, creates atmosphere, or adds movement. If it is a background, check whether the headline and CTA remain readable over bright and busy frames. If it is inline, check whether the opening frame has a clear subject and whether the point is understandable without pressing play. Compare the crop at desktop and narrow widths. Mark any face, product detail, interface label, or text that becomes hidden. Then replace the image with its poster frame, or omit it, and ask whether the hero still communicates the offer. Finish with a decision: keep the asset, simplify it, replace it with a still, or move it below the opening section. --- Use the same checklist for every reference: - What appears in the opening screen, and what does it explain? - Is the visual a photo, illustration, interface capture, animation, or video? - Is it background, inline, framed, full-bleed, or part of a gallery? - Which subject remains visible after the crop? - Does motion autoplay, loop, respond to scrolling, or wait for input? - Are controls, captions, and a useful poster frame present? - What happens when motion is unavailable or reduced? - Does text sit over the asset, beside it, or in a separate card? - What is the smallest version worth testing? Score each pattern for clarity, relevance, resilience, and production effort. Keep patterns that support the message, test patterns that could improve understanding, and avoid patterns whose appeal depends on motion or a fragile crop. ## Related questions - [Inspect a Website's Motion and Interactions from Its URL](/share/inspect-a-website-s-motion-and-interactions-from-its-url) - [Inspect a Website's Page Layout from Its URL](/share/inspect-a-website-s-page-layout-from-its-url) - [Inspect a website's component styles from its URL](/share/inspect-a-website-s-component-styles-from-its-url) - [Inspect a Website's Spacing Scale from Its URL](/share/inspect-a-website-s-spacing-scale-from-its-url)