skills.rest
Firzus
FirzusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-assets-optimization

Optimize web assets with format-specific conversions and responsive markup.

1|Updated May 12, 2026
Search Tags:#web performance#asset optimization#responsive images#lcp#video encoding#svg optimization#font subsetting
One-click install
npx skills add https://github.com/Firzus/agent-skills --skill web-assets-optimization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-assets-optimization
Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/web-assets-optimization
Command: npx skills add https://github.com/Firzus/agent-skills --skill web-assets-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you reduce web app asset weight, prevent layout shifts, and deliver images, video, fonts, and SVGs in formats that load faster and display more consistently.

Core Features & Use Cases

  • Image optimization: Creates modern AVIF/WebP/JPEG or PNG variants, adds responsive markup, and preserves dimensions for stable rendering.
  • Video and animation delivery: Re-encodes videos, replaces bulky GIFs with better formats, and generates posters and playback-friendly markup.
  • Font and SVG handling: Subsets and self-hosts fonts as WOFF2, applies preload and fallback strategies, and optimizes SVGs without breaking responsiveness.
  • Use Case: A marketing site with slow hero media can use this Skill to shrink the LCP image, improve loading priority, and remove unnecessary heavy originals.

Quick Start

Ask the skill to audit the project’s assets, identify the LCP candidate, and produce optimized replacements with clean markup updates.

Frequently Asked Questions about web-assets-optimization

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

FAQPage Schema
How do I optimize web assets and improve LCP in a Next.js project?▼

To optimize web assets and improve LCP, the Skill audits your project to identify the LCP candidate, creates modern AVIF or WebP image variants, and updates responsive markup to shrink asset weight and improve loading priority.

What is the best way to convert bulky GIFs to video and generate poster images?▼

To convert bulky GIFs to video and generate posters, the Skill re-encodes animated media into playback-friendly formats and generates matching poster images to ensure faster and more consistent delivery.

Can I self-host and subset fonts as WOFF2 using Vite or Astro?▼

Yes, you can self-host and subset fonts as WOFF2 in frameworks like Vite or Astro; the Skill applies font subsetting strategies and generates preload and fallback markup for efficient delivery.

Does this approach work for optimizing SVGs without breaking responsiveness in SvelteKit?▼

Yes, SVG optimization in SvelteKit is supported; the Skill reduces SVG file size while preserving responsive scaling behavior to maintain layout stability across your application.

How do I clean up unoptimized original images after generating WebP and AVIF variants?▼

To clean up unoptimized originals, the Skill performs an asset inventory and removes unnecessary heavy original files after generating optimized AVIF, WebP, JPEG, or PNG replacements and updating the corresponding markup.

Related Skills

Explore More Software Engineering Skills→
Ouro-labsOuro-labs
14

vercel-optimize

Analyze Vercel metrics to recommend cost and performance optimizations.

Official
Advanced
guillermoscriptguillermoscript
21

optimize

Analyzes web page loads and recommends optimizations for faster performance.

Community
Advanced
oakossoakoss
14

asset-manager

Organize design assets with directory structures, naming conventions, and Git LFS.

Official
Intermediate
IgorVaryvodaIgorVaryvoda

image-optimization

Select modern image formats and configure responsive delivery with fallbacks.

Community
Basic