Asset Optimization

Asset Optimization

Optimize design assets for production deployment across platforms. Apply format-specific compression, resolution scaling, and bundle optimization techniques.

Optimization Techniques

SVG Optimization (SVGO)

Apply SVGO for vector graphics:

# Install
npm install -g svgo

# Optimize single file
svgo input.svg -o output.svg

# Optimize directory
svgo -f ./icons/ -o ./icons-optimized/

# With config
svgo --config svgo.config.js input.svg

SVGO Configuration:

// svgo.config.js
module.exports = {
  multipass: true,
  plugins: [
    'preset-default',
    'removeDimensions',
    {
      name: 'removeAttrs',
      params: { attrs: '(stroke|fill)' }
    },
    {
      name: 'addAttributesToSVGElement',
      params: { attributes: [{ fill: 'currentColor' }] }
    }
  ]
}

Typical Results:

PNG Optimization

Use multiple tools for best results:

pngquant (lossy):

# Install
brew install pngquant

# Optimize with quality range
pngquant --quality=65-80 --speed 1 --output output.png input.png

# Batch process
pngquant --quality=65-80 --ext .png --force *.png

oxipng (lossless):

# Install
brew install oxipng

# Optimize
oxipng -o 4 -i 0 --strip safe input.png

# Batch with parallel processing
oxipng -o 4 -i 0 --strip safe -r ./images/

Combined approach:

# First lossy, then lossless
pngquant --quality=70-85 input.png -o temp.png
oxipng -o 4 temp.png -o output.png

Typical Results:

WebP Conversion

Convert to WebP for web deployment:

# Install
brew install webp

# Convert from PNG
cwebp -q 80 input.png -o output.webp

# Convert from JPEG
cwebp -q 85 input.jpg -o output.webp

# Batch conversion
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

sharp (Node.js):

const sharp = require('sharp');

// Convert with quality
await sharp('input.png')
  .webp({ quality: 80, effort: 6 })
  .toFile('output.webp');

// Resize and convert
await sharp('input.png')
  .resize(800, 600)
  .webp({ quality: 85 })
  .toFile('output.webp');

Typical Results:

JPEG Optimization

Use MozJPEG for best quality/size:

# Install
brew install mozjpeg

# Optimize
cjpeg -quality 85 -optimize -progressive input.bmp > output.jpg

# From existing JPEG (re-compress)
djpeg input.jpg | cjpeg -quality 85 -optimize > output.jpg

ImageMagick:

# Convert and optimize
magick input.png -quality 85 -strip output.jpg

# Resize for different scales
magick input.png -resize 50% -quality 85 output@1x.jpg
magick input.png -quality 85 output@2x.jpg

Resolution Scaling

Generate multi-resolution assets:

iOS Scales:

# From @3x source
magick hero@3x.png -resize 66.67% hero@2x.png
magick hero@3x.png -resize 33.33% hero@1x.png

Android Densities:

# Generate all densities
magick icon-xxxhdpi.png -resize 75% icon-xxhdpi.png
magick icon-xxxhdpi.png -resize 50% icon-xhdpi.png
magick icon-xxxhdpi.png -resize 37.5% icon-hdpi.png
magick icon-xxxhdpi.png -resize 25% icon-mdpi.png

Sprite Generation

Combine icons into sprite sheets:

SVG Sprite:

# Install
npm install -g svg-sprite

# Generate sprite
svg-sprite --mode symbol --dest ./sprites ./icons/*.svg

Configuration:

// svg-sprite.config.js
module.exports = {
  mode: {
    symbol: {
      dest: '.',
      sprite: 'sprite.svg',
      inline: true
    }
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false
  }
}

CSS Sprite (PNG):

# Using spritesmith
npx spritesmith ./icons/*.png --destImage sprite.png --destCSS sprite.css

Platform-Specific Guidelines

iOS

Asset Catalog Requirements:

• Use PDF for vector icons (resolution independent)
• PNG for raster images at 1x, 2x, 3x
• Maximum 500KB per asset recommended
• sRGB color space

Contents.json Template:

{
  "images": [
    { "filename": "icon.png", "scale": "1x", "idiom": "universal" },
    { "filename": "icon@2x.png", "scale": "2x", "idiom": "universal" },
    { "filename": "icon@3x.png", "scale": "3x", "idiom": "universal" }
  ],
  "info": { "author": "xcode", "version": 1 }
}

Android

Resource Guidelines:

• VectorDrawable for icons (API 21+)
• WebP for images (API 18+, lossless API 14+)
• Maximum 100KB per drawable recommended

VectorDrawable Conversion:

# Convert SVG to VectorDrawable
npx svg2vectordrawable input.svg output.xml

# Or use vd-tool (Android SDK)
vd-tool -c -in icon.svg -out icon.xml

Web

Modern Approach:

<!-- Responsive images with fallback -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Hero" loading="lazy">
</picture>

<!-- Responsive with sizes -->
<img
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="hero-800.webp"
  alt="Hero"
>

Icon Usage:

<!-- SVG sprite usage -->
<svg class="icon">
  <use href="sprite.svg#icon-home"></use>
</svg>

<!-- Inline SVG for critical icons -->
<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z"/>
</svg>

Quality Validation

Visual Comparison

Compare before/after for quality loss:

# Generate comparison with ImageMagick
magick compare original.png optimized.png diff.png

# Calculate SSIM (structural similarity)
magick compare -metric SSIM original.png optimized.png null:

Acceptable Thresholds:

File Size Targets

Automation Scripts

Batch Optimization Script

#!/bin/bash
# optimize-assets.sh

INPUT_DIR="${1:-.}"
OUTPUT_DIR="${2:-./optimized}"

mkdir -p "$OUTPUT_DIR"

# Optimize SVGs
find "$INPUT_DIR" -name "*.svg" -exec sh -c '
  svgo "$1" -o "$2/$(basename "$1")"
' _ {} "$OUTPUT_DIR" \;

# Optimize PNGs
find "$INPUT_DIR" -name "*.png" -exec sh -c '
  pngquant --quality=70-85 "$1" -o "$2/$(basename "$1")"
  oxipng -o 4 "$2/$(basename "$1")"
' _ {} "$OUTPUT_DIR" \;

# Generate WebP
find "$OUTPUT_DIR" -name "*.png" -exec sh -c '
  cwebp -q 80 "$1" -o "${1%.png}.webp"
' _ {} \;

echo "Optimization complete: $OUTPUT_DIR"

Node.js Pipeline

const sharp = require('sharp');
const { optimize } = require('svgo');
const fs = require('fs').promises;
const path = require('path');

async function optimizeAssets(inputDir, outputDir) {
  const files = await fs.readdir(inputDir);

  for (const file of files) {
    const ext = path.extname(file).toLowerCase();
    const input = path.join(inputDir, file);
    const output = path.join(outputDir, file);

    if (ext === '.svg') {
      const svg = await fs.readFile(input, 'utf8');
      const result = optimize(svg, { multipass: true });
      await fs.writeFile(output, result.data);
    } else if (ext === '.png') {
      await sharp(input)
        .png({ quality: 80, compressionLevel: 9 })
        .toFile(output);

      // Also generate WebP
      await sharp(input)
        .webp({ quality: 80 })
        .toFile(output.replace('.png', '.webp'));
    }
  }
}

Tool Dependencies

Install required tools:

# macOS
brew install svgo pngquant oxipng webp imagemagick mozjpeg

# npm tools
npm install -g svgo svg-sprite sharp

Integration with Pipeline

The asset-optimization skill is used by:

• asset-pipeline agent: Applies optimizations during batch processing
• /export-assets command: Optimization flag triggers these techniques
• design-system-architect: Optimizes assets as part of full system generation