# Website Media Styles Extractor from URL [Open the live Fudge conversation](https://design.withfudge.com/share/website-media-styles-extractor-from-url) Last updated: 2026-08-25 A website media styles extractor should show which images, videos, crops, overlays, and motion treatments shape a captured page, then turn those observations into reusable design guidance. The most useful result is not a list of media files. It is a practical media inventory tied to page sections and visual roles. If you are starting from a URL, capture the page with the Fudge browser extension first. Then inspect the saved capture rather than relying on a guess about how the live page behaves. This makes the review concrete and gives you a page state that can be revisited. ## Use this extraction checklist Review the site in this order: 1. **Hero media:** Record whether the opening section uses a still image, illustration, product capture, looping video, or a layered combination. Note the subject position, crop, focal point, and whether text sits over the media. 2. **Section media:** Group images and videos by job, such as explaining a feature, showing a workflow, adding atmosphere, or supporting a customer story. 3. **Motion behavior:** Check autoplay, looping, playback controls, pauses, transitions, hover changes, and whether motion is essential to understanding the content. 4. **Treatment:** Note overlays, masks, gradients, borders, rounded corners, clipping, shadows, and color adjustments. These often matter as much as the source asset. 5. **Responsive behavior:** Compare the desktop and narrow layouts. A wide product video may become a cropped detail, a stacked card, or a still image on smaller screens. The final notes should connect every observation to a place on the page. For example: "Hero video fills the right half, keeps the device centered, uses a soft blue overlay, and loops without controls." That is more useful than simply writing "video in hero." Open the examples below and compare the first screen before borrowing a pattern. Pangram AI Detector pairs illustration with video and uses a bold editorial palette. Refero is video-led, while Bland uses captured video on an enterprise AI marketing page. Fin Apex combines illustration and video on a product launch page. These references are useful for comparing media roles, not for assuming that one treatment fits 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) ## What a strong result should include Ask for a page-by-page inventory with these fields: - Section or component name - Media type and source role - Aspect ratio and visible crop - Focal subject and safe area for text - Motion or interaction behavior - Overlay, mask, gradient, border, radius, and shadow - Desktop and mobile differences - Recommended reuse or adaptation Separate observed details from recommendations. "The video loops behind the headline" is an observation. "Use a shorter loop with a darker lower gradient" is a recommendation. Keeping those categories separate makes the result easier to check with a designer or developer. ## Choose the right output Use a **media inventory** when you are auditing one marketing page. Use a **pattern comparison** when you are studying several references and want to decide between video-led, illustration-led, or product-capture sections. Use a **production checklist** when you already know the direction and need consistent crops, poster frames, overlays, and motion rules across a new site. For implementation, request media rules alongside the visual notes: preferred aspect ratios, crop anchors, maximum content width, overlay strength, and fallback behavior. If the goal is to recreate a style rather than copy assets, ask for principles such as "keep the subject in the upper third" or "use motion only where it explains the product." Those rules transfer better than individual images. Start with the hero and the first two content sections. Mark each media treatment as **keep**, **adapt**, or **replace**. Keep a treatment when it supports the message and works across screen sizes. Adapt it when the idea is useful but the crop, timing, or contrast needs work. Replace it when the media distracts from the page or depends on a one-off asset. Then check accessibility and performance manually: confirm that important information is not available only through motion, provide a meaningful still fallback, avoid text over low-contrast footage, and test whether autoplay creates a distracting first impression. Finish by turning the approved observations into a short media style guide with examples and clear do/don't rules. ## Use this in your AI agent > Inspect the captured website's media styles. Inventory the hero and major sections, identify image and video roles, crops, focal points, overlays, gradients, borders, radii, shadows, motion behavior, and responsive changes. Separate observed details from recommendations, compare the treatment with the supplied references, and finish with a reusable media style guide and implementation checklist. [Install Fudge for your AI agent](/mcp) to run this review while you work. --- Compare them by the job the media performs, not by which format looks more impressive. A video-led page is strongest when motion demonstrates a workflow, product behavior, or changing state. An illustration-led page is often easier to scan, easier to art-direct, and more predictable across responsive layouts. Use a simple scorecard with five questions: Does the media explain the offer? Does the focal point stay clear behind text? Does it work without sound? Can it be cropped safely on mobile? Can the team maintain it when the product changes? Give each reference a score from 1 to 5, then review the notes rather than relying only on the total. The supplied references show useful contrasts. Refero is video-led, while Pangram AI Detector combines illustration and video. Bland and Fin Apex also use captured video alongside other visual material. Compare where the motion appears, how much space it occupies, and whether the surrounding layout gives it a clear role. The decision should end in a rule, such as: "Use motion for product proof, and illustrations for concepts or atmosphere." --- Ask for observations that a designer or developer can verify directly. Include the page section, media type, visible subject, crop, focal point, dimensions or aspect ratio when available, and the way the media behaves on the page. Request separate notes for autoplay, looping, controls, hover states, transitions, overlays, masks, gradients, borders, radii, shadows, and mobile changes. Also ask the agent to identify dependencies. For example, does the message require a video, or would a still frame communicate the same idea? Does text rely on a dark overlay? Does the crop preserve the subject at narrow widths? These questions turn a visual audit into a production plan. A useful final instruction is: "Return a keep, adapt, or replace recommendation for each treatment, followed by a short media style guide with reusable rules and a QA checklist." That keeps the output focused on decisions rather than an unstructured asset list. ## Related questions - [Website Page Layout Extractor from URL](/share/website-page-layout-extractor-from-url) - [Extract website interaction patterns from a URL](/share/website-interaction-patterns-extractor-from-url) - [Website Shadow Styles Extractor from URL](/share/website-shadow-styles-extractor-from-url) - [Extract Gradient Styles From a Website URL](/share/website-gradient-styles-extractor-from-url)