Jump to

Skill · Media asset management

Media asset management.

Design how media gets stored, processed, served, and found.

Design the pipeline that moves images, video, and downloadable files from where they are created to where they are consumed. The pipeline has four stages, each with its own decisions: source, process, deliver, and manage. The principles apply whether you run a custom pipeline or a hosted service.

The payoff shows up in page weight, layout stability, and a media set that stays findable as it grows, instead of one that scatters across systems and slows every page.

Audience: engineers and content teams designing an image pipeline, choosing a media CDN, setting up responsive delivery, or auditing a slow or scattered media set.

View the skill on GitHubBrowse the full catalog

The framework

Four stages, each with its own decisions.

The pipeline runs in four stages. Each one carries a set of decisions that the next stage depends on.

  1. 01Source: where assets enter. Accepted formats, naming conventions, required metadata, maximum resolution, and source files kept separate from delivered ones.
  2. 02Process: turning sources into delivery formats. Resize to a fixed set of widths, compress, convert to AVIF and WebP, generate thumbnails, and strip GPS and personal EXIF.
  3. 03Deliver: getting assets to users efficiently. A CDN, format negotiation, responsive srcset and sizes, lazy loading below the fold, and width and height set to prevent layout shift.
  4. 04Manage: keeping the system organized. An asset library or DAM, tagging and search, version control, rights tracking, and periodic cleanup of unused assets.

How the skill runs

Eight steps from inventory to a documented pipeline.

The skill inventories what exists, picks a pipeline pattern, sets enforceable standards, and documents the whole path so it does not break silently.

  1. 01

    Inventory

    What assets exist, where, in what formats, and how much storage and traffic they represent.

  2. 02

    Audit performance

    Image weight per page (target under 500KB for marketing pages), request counts, responsive images, modern formats, and layout shift.

  3. 03

    Pick the pipeline

    Static build-time, an image CDN with on-demand processing, or a headless CMS image API. The patterns can mix.

  4. 04

    Define standards

    Naming conventions, required metadata, maximum and minimum source dimensions, approved formats, and file-size targets, enforced through tooling.

  5. 05

    Set up workflows

    A documented path per source type: designer, writer, photographer, and user upload.

  6. 06

    Build the asset library

    A centralized DAM or shared library with a tag taxonomy, search, documented rights, and a sunset workflow.

  7. 07

    Monitor and audit

    Performance on image-heavy pages, storage and CDN costs, broken-image alerts, and unused-asset cleanup.

  8. 08

    Document the pipeline

    A source-to-process-to-deliver-to-manage diagram, the tools at each stage, the standards, and escalation when something breaks.

Reference files

The reference that goes alongside the SKILL.md.

  • references/responsive-image-patterns.md

    Copy-paste HTML patterns for common responsive image scenarios (hero, content, art-directed, format negotiation), with explanations.

Browse all reference files on GitHub

Bridges to other skills

What decides the media, and what optimizes around it.

The pipeline moves and serves media. These skills decide what media to make and handle performance beyond it.

  • Beyond media

    performance-optimization

    Performance work beyond media, and single-image optimization, belong there. This skill designs the pipeline that work runs on.

  • How it looks

    art-direction

    Directs what the photography and illustration look like; the pipeline serves whatever that direction produces, without weighing in on the creative.

  • Imagery direction

    brand-identity

    Imagery and illustration direction is part of the identity system. The pipeline carries those assets through to the page.

  • What to produce

    content-strategy

    Plans what content gets produced and why, while the pipeline moves and serves it. The two meet at the upload step, not before.

Open source under MIT

Read the SKILL.md on GitHub.

The skill source lives in the rampstackco/claude-skills repository alongside dozens of other skills covering the full lifecycle of brand and product work. This page is a structured overview; the SKILL.md is the source. MIT licensed.

View SKILL.mdBrowse the full catalog

Frequently asked questions.

What are the four stages of the pipeline?
Source, process, deliver, and manage. Source is where assets enter and where you set accepted formats, naming, metadata, and maximum resolution. Process turns sources into delivery formats through resizing, compression, and format conversion. Deliver gets assets to users through a CDN, format negotiation, and responsive images. Manage keeps the system organized with an asset library, tagging, rights tracking, and cleanup. Each stage's decisions feed the next.
Which image formats should I serve?
AVIF and WebP for modern browsers, with JPEG or PNG as the fallback, SVG for logos and icons, and MP4 for video. Serve AVIF to browsers that support it for the best compression, WebP otherwise, and JPEG as the universal fallback, using the picture element or content negotiation. PNG is for sharp-edged graphics and transparency; GIF is effectively obsolete, so use a video format for animation.
What does the modern responsive image markup look like?
An img with srcset listing several widths and a sizes attribute so the browser picks the right one for the viewport, width and height always set to prevent layout shift, loading='lazy' for below-the-fold images (never the hero, which should load eagerly), and decoding='async' for non-critical images. For format negotiation, wrap sources in a picture element with AVIF first, WebP next, and a JPEG img as the fallback.
Should source files live with delivered assets?
No. Keeping sources and delivered assets in the same place is an anti-pattern: it makes masters hard to find, hard to regenerate, and hard to audit, and it risks serving a 50MB RAW file to users. Keep a source bucket separate from the delivered bucket, and keep source resolution at two to three times the largest delivered size so you can derive retina and larger variants later. Strip GPS and personal EXIF on delivery, but keep semantic metadata like alt text and attribution.
When do I need a real DAM versus a shared folder?
A simple shared folder works at low scale. A real digital asset management system becomes necessary above a few thousand assets, or whenever multiple teams are involved, because that is the point where tagging, search across metadata, version control, rights and licensing tracking, and a sunset workflow stop being optional. Below that threshold, a shared library with a tag taxonomy is usually enough.
How is this different from performance-optimization?
Media-asset-management designs the whole pipeline: how media is sourced, processed, delivered, and managed, plus the asset library that keeps it findable. Performance-optimization covers performance beyond media and single-image optimization, as part of broader Core Web Vitals work. Use this skill for the pipeline and the library; use performance-optimization when the question is page speed across the whole site rather than the media system specifically.