Asset Optimization Pipeline

OpenClaw skill for automated image and asset optimization with CDN deployment support.

Features

• ✨ Image Compression - PNG, JPG, WebP, AVIF with 70-88% size reduction
• 🔄 Format Conversion - Convert between formats seamlessly
• 📱 Responsive Images - Generate multiple sizes automatically
• 🎨 SVG Optimization - SVGO integration for vector graphics
• 🔤 Icon Fonts - Generate web fonts from SVG icons
• 🧩 Sprite Sheets - Combine images into sprite sheets
• ☁️ CDN Upload - Deploy to S3/CloudFront automatically

Installation

npm install @openclaw/asset-optimization-pipeline

Quick Start

# Compress images
asset-optimize compress ./images --output ./optimized --quality 85

# Convert to WebP
asset-optimize convert ./images --format webp --quality 90

# Generate responsive images
asset-optimize resize hero.jpg --sizes 640,1024,1920 --formats webp,avif

# Create icon font
asset-optimize icon-font ./icons --name my-icons --output ./fonts

# Upload to CDN
asset-optimize upload ./optimized --bucket my-assets --cdn

API Usage

import { AssetPipeline } from '@openclaw/asset-optimization-pipeline';

const pipeline = new AssetPipeline({
  quality: 85,
  outputDir: './dist',
});

// Compress
const result = await pipeline.compress('./images');
console.log(`Saved ${result.totalSavingsPercent}%`);

// Convert
await pipeline.convert('./image.png', {
  format: 'webp',
  quality: 90,
});

// Responsive
await pipeline.responsive('./hero.jpg', {
  sizes: [640, 1024, 1920],
  formats: ['webp', 'avif'],
});

// Icon font
await pipeline.iconFont('./icons', {
  name: 'my-icons',
  output: './fonts',
  formats: ['woff2', 'woff'],
});

Performance

Typical compression savings:

• PNG: 76% (pngquant)
• JPG: 77% (mozjpeg)
• WebP: 83% vs PNG
• AVIF: 88% vs PNG
• SVG: 76% (SVGO)

CI/CD Integration

# .github/workflows/optimize-assets.yml
name: Optimize Assets
on:
  push:
    paths: ['assets/**']
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm i -g @openclaw/asset-optimization-pipeline
      - run: asset-optimize compress ./assets --output ./dist
      - run: asset-optimize upload ./dist --bucket ${{ secrets.S3_BUCKET }}
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

License

MIT