skills.rest
zm2231
zm2231COMMUNITY
Explore all skills by this author →
GitHub

asset-optimization

Convert design assets to WebP, AVIF, and responsive variants.

Updated Apr 8, 2026
Search Tags:#webp#svg#cdn#image-optimization#responsive-images#asset-management
One-click install
npx skills add https://github.com/zm2231/personal-os-cowork --skill asset-optimization-zm2231
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: asset-optimization
Source: https://github.com/zm2231/personal-os-cowork/tree/main/.claude/skills/asset-optimization
Command: npx skills add https://github.com/zm2231/personal-os-cowork --skill asset-optimization-zm2231

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many design assets are oversized, inconsistent, or poorly organized, causing slow page loads, increased bandwidth costs, and friction between designers and developers; this Skill streamlines asset optimization to improve performance and handoff quality.

Core Features & Use Cases

  • Image Compression & Format Conversion: Reduce file sizes and convert to modern formats (WebP, AVIF) while preserving visual quality.
  • Responsive Resizing & Art Direction: Generate device-specific image variants and art-directed crops for mobile, tablet, and desktop.
  • SVG & Icon Optimization: Minify and clean SVGs, assemble icon sets for efficient delivery.
  • Delivery & Automation: Plan lazy loading, CDN-friendly caching, asset versioning, and CI/CD optimization pipelines.
  • Use Case: Audit a product page with heavy imagery, convert hero images to modern formats, create responsive variants, optimize SVG icons, and measure load time reductions to meet a performance budget.

Quick Start

Optimize 20 product images for web performance by compressing them, converting the hero image to WebP, and generating responsive variants for mobile, tablet, and desktop.

Frequently Asked Questions about asset-optimization

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

FAQPage Schema
How do I convert images to WebP and generate responsive variants for mobile and desktop?▼

SVG optimization minifies and cleans SVG files by removing unnecessary data, then assembles them into efficient icon sets for CDN delivery. This reduces file size and ensures icons load quickly across web and mobile applications.

What is the best way to set up lazy loading and CDN caching for design assets?▼

Yes, you can measure load time reductions by auditing product pages with heavy imagery, converting and resizing assets, and comparing results against a defined performance budget to ensure your web and mobile assets meet technical requirements.

How do I optimize SVG icon sets for efficient web delivery?▼

SVG optimization minifies and cleans SVG files by removing unnecessary data, then assembles them into efficient icon sets for CDN delivery. This reduces file size and ensures icons load quickly across web and mobile applications.

What's the best way to automate image compression and format conversion in a CI/CD pipeline?▼

The best way to automate image optimization in a CI/CD pipeline is to plan asset versioning and optimization steps that automatically compress images, convert formats like WebP and AVIF, and generate responsive variants during deployment.

Can I create art-directed crops for different devices when resizing images?▼

Yes, you can create art-directed crops when resizing images. The process generates device-specific image variants with tailored crops for mobile, tablet, and desktop views to improve responsive loading performance.

Why do I need asset versioning for web and mobile product assets?▼

Asset versioning is needed to manage updates and ensure CDN-friendly caching works correctly. It prevents users from seeing stale images after updates and reduces friction between designers and developers during handoff.

Related Skills

Explore More Design & Creative Skills→
kaanygitkaanygit
1

png-to-svg

Convert PNG/JPG icons and logos into SVG with automated algorithm selection.

Community
Intermediate
finsilabsfinsilabs
44

image-optimization-cdn

Resize and convert e-commerce product images to WebP/AVIF for CDN delivery.

Official
Intermediate
omeraltnomeraltn

agency-technical-artist

Define and enforce shader, VFX, and asset pipeline standards across Unity, Unreal, and Godot.

Community
Advanced
jholhewresjholhewres
3

image-tools

Resizes, converts, compresses, crops, rotates, and applies effects to images via ImageMagick command-line tools.

Community
Intermediate