# How to Check Image and Video Use on Any Website [Open the live Fudge conversation](https://design.withfudge.com/share/how-to-check-image-and-video-use-on-any-website) Last updated: 2026-08-25 You can check image and video use on a captured website by reviewing five things: where media appears, what job it performs, how it is cropped, how it moves, and how it changes across screen sizes. Start with the visible page structure, then turn each important media block into a short design note that someone can use without copying the original asset. ## Start with a media inventory Group visible media by section: 1. Hero or opening section 2. Product or feature explanation 3. Testimonials, case studies, or logos 4. Background decoration 5. Cards, galleries, or previews 6. Footer and supporting content For each item, write its role in one sentence. “This video demonstrates the product in use” is more useful than “video present.” Mark whether the media is essential, supportive, decorative, or interactive. Essential media carries the message; decorative media can often be removed without changing the page's meaning. Use the captured examples below to compare different patterns. Pangram AI Detector combines illustration with video and a bold editorial palette. Refero is video-led. Bland and Fin Apex provide two additional examples of captured video paired with product or enterprise messaging. ## 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) ## Check the treatment, not just the asset Record each image or video's aspect ratio, visible crop, subject position, border radius, edge treatment, shadow, overlay, and relationship to nearby text. Note whether the media fills its container or leaves deliberate space, and whether it appears sharp, grainy, illustrated, monochrome, or highly saturated. For video, check whether it loops, starts automatically, pauses, requires interaction, or shows a poster image first. Then ask what the treatment contributes. A tight crop can create emphasis. A wide product video can explain a workflow. A background loop can establish mood but may compete with the headline. The design decision matters more than the existence of the file. ## Review motion and responsive behavior Compare desktop and mobile states when they are available. Look for changes in crop, height, order, and playback. A hero video may become a still image on a narrow screen. A side-by-side media block may stack vertically. A decorative background may disappear while a product demonstration remains. Watch one complete loop when possible. Note the opening frame, first informative moment, loop point, and whether motion distracts from reading. Check whether controls are visible and whether the message still works when playback is unavailable. Separate media that explains something from media that only adds movement. ## Turn observations into a practical brief Use one entry for each important media pattern: | Check | Useful note | |---|---| | Purpose | What does the visitor learn or feel? | | Placement | Which section and viewport position? | | Crop | What remains visible and what is cut? | | Motion | Still, loop, scroll effect, or interaction? | | Overlay | Are text, buttons, or gradients placed above it? | | Mobile change | What is resized, moved, replaced, or removed? | | Priority | Must-have, helpful, or decorative? | Finish with a small pattern set: one hero treatment, one product demonstration pattern, one card or gallery treatment, and one mobile fallback. Rank each as adapt, test, or skip. This gives a design team a concrete direction without copying every media element or assuming that a captured behavior is universal. ## Use this in your AI agent > Review the captured website examples for image and video use. Build a section-by-section media inventory, then compare each important asset's purpose, crop, aspect ratio, overlay treatment, playback behavior, and responsive changes. Separate essential product media from decorative motion, and finish with a short brief describing which media patterns are worth adapting and why. [Install Fudge for your AI agent](/mcp) to make this review part of your design workflow. --- Start with the opening viewport. Check whether the first video explains the product, establishes atmosphere, or simply fills space. Record the headline's relationship to the video: above it, over it, beside it, or revealed after motion begins. Watch enough to identify the first informative frame, the main action, and the loop point. If the clip is decorative, test whether the page still communicates with playback paused. If it demonstrates a product, note the action order and whether the interface remains legible at normal viewing size. Finally, compare desktop and mobile. Check whether the video keeps its crop, changes height, becomes a poster image, or disappears. Purpose, information, and responsive behavior usually reveal more than a long list of file dimensions. --- Create one short entry for each media pattern rather than one entry for every file. Use this format: - **Pattern:** Hero product video - **Job:** Shows the main workflow before the visitor scrolls - **Frame:** Wide container with a controlled crop - **Treatment:** Rounded frame, light overlay, and readable text placement - **Motion:** Short loop with a clear opening and ending frame - **Mobile plan:** Replace with a still or shorter crop if the action becomes unclear - **Decision:** Adapt, test, or skip Add one captured reference beside each entry, then rank the patterns by communication value. Keep the brief focused on observable choices such as crop, timing, placement, and fallback behavior. Avoid calling a page merely “dynamic” or “premium” without explaining which media decision creates that impression. The result should tell a designer what to build and tell a reviewer what to test. ## Related questions - [How to Check Motion and Interactions on Any Website](/share/how-to-check-motion-and-interactions-on-any-website) - [How to Check Gradients and Backgrounds on Any Website](/share/how-to-check-gradients-and-backgrounds-on-any-website) - [How to Check Page Layout on Any Website](/share/how-to-check-page-layout-on-any-website) - [How to Check Component Styles on Any Website](/share/how-to-check-component-styles-on-any-website)