skills.rest
ccediland
ccedilandCOMMUNITY
Explore all skills by this author →
GitHub

media-optimization

Configures build-time image optimization and tiered video hosting for Astro sites on Cloudflare Workers.

Updated Jun 17, 2026
Search Tags:#cloudflare workers#astro#responsive images#image optimization#sharp#lcp#video hosting
One-click install
npx skills add https://github.com/ccediland/web-stack-skills --skill media-optimization-ccediland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: media-optimization
Source: https://github.com/ccediland/web-stack-skills/tree/main/plugin/skills/media-optimization
Command: npx skills add https://github.com/ccediland/web-stack-skills --skill media-optimization-ccediland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Astro sites deployed to Cloudflare Workers silently route image optimization through the metered Cloudflare Images service, whose free tier fails closed at 5,000 transformations per month, and video has no native Astro path at all. This Skill locks in build-time image transforms and a verified video hosting ladder so media never becomes a runtime quota dependency. ## Core Features & Use Cases - Explicit compile image service: Pins imageService: 'compile' in the Cloudflare adapter so sharp transforms every image at build time, avoiding the metered default that flipped in @astrojs/cloudflare v13.0.0. - Global responsive images: One config (layout: 'constrained' + responsiveStyles: true) generates srcset/sizes for every image, with priority reserved for the single LCP image per page. - Tiered video ladder: Compressed H.264 mp4 in public/ under the 25 MiB Static Assets cap, escalating to R2 behind a custom domain, then Media Transformations derivatives, with Stream as the paid flip for long-form or live video. - Use Case: A marketing site's hero video exceeds 25 MiB and its LCP image loads lazily. Apply this Skill to mark the LCP image with priority, move the video to an R2 custom domain, and wire a reduced-motion-gated autoplay script. ## Quick Start Ask the AI to configure the Astro Cloudflare adapter with an explicit compile image service and set up responsive images with a priority LCP image for the site.

Frequently Asked Questions about media-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize images in Astro on Cloudflare Workers?▼

Set `imageService: 'compile'` explicitly in the `@astrojs/cloudflare` adapter config so sharp transforms images at build time. The adapter default routes through metered Cloudflare Images, whose free tier fails closed at 5,000 unique transformations per month.

How do I make responsive images in Astro with srcset and sizes?▼

Set `image.layout: 'constrained'` and `image.responsiveStyles: true` globally in astro.config, then use the Image component with imported local assets. Astro generates srcset and sizes automatically from the image dimensions and layout type.

Why is my LCP image loading slowly in Astro?▼

Astro lazy-loads every image by default and sets no priority attributes automatically. Add `priority` to exactly one above-the-fold LCP image per page, which sets eager loading, sync decoding, and high fetchpriority.

How do I host video on Cloudflare Workers Static Assets?▼

Compress an H.264 mp4 with ffmpeg (crf 28, faststart) and place it in `public/` under the 25 MiB per-file cap. Larger files escalate to an R2 bucket behind a custom domain, with Media Transformations for sized derivatives.

When should I use Cloudflare Stream instead of self-hosted video?▼

Use Stream when the brief requires long-form content, adaptive bitrate (HLS/DASH), or live streaming. It has no free tier at $5 per 1,000 minutes stored plus $1 per 1,000 minutes delivered, so it is a deliberate product decision.

Does the compile image service work for on-demand Astro routes?▼

On-demand routes under the compile service get passthrough images with no transforms. This is acceptable when the on-demand surface is API endpoints rather than image-bearing pages; genuinely dynamic imagery is the documented flip to the binding service on a paid plan.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

image-optimizer

Convert web images to WebP/AVIF formats and generate responsive sizes with picture markup.

Community
Intermediate
jacob-balslevjacob-balslev
1

performance-budgets

Define enforceable performance budgets with metric, threshold, percentile, and consequence.

Community
Intermediate
DexploarerDexploarer
6

security-header-generator

Generate security HTTP headers for Node.js, Next.js, Express, and nginx.

Community
Advanced
skills-ilskills-il
9

cloudinary-assets

Manages digital media assets via Cloudinary's REST API, including upload, transform, optimize, and delivery of images/videos.

Official
Intermediate