Format Conversion Workflows

Learn how to convert assets between different formats and when to use each format type.

Image Format Conversion

When to Use Each Format

  • WebP: Modern format, best compression, use for photos and complex images
  • AVIF: Even better compression than WebP, use when browser support allows
  • SVG: Vector graphics, logos, icons, illustrations
  • PNG: Transparency required, screenshots, simple graphics
  • JPEG: Photos without transparency, older browser support

Conversion Tools

Command Line Tools

ImageMagick:

# Convert PNG to WebP
convert input.png -quality 85 output.webp

# Batch convert all PNGs in directory
for file in *.png; do convert "$file" -quality 85 "${file%.png}.webp"; done

# Create multiple sizes
convert input.jpg -resize 1920x1080 hero-1080p.jpg
convert input.jpg -resize 1280x720 hero-720p.jpg

Sharp (Node.js):

// In your build script
const sharp = require('sharp');

await sharp('input.png')
  .webp({ quality: 85 })
  .toFile('output.webp');

// With multiple formats
await sharp('input.png')
  .resize(1200, 800)
  .toFormat('webp')
  .toFile('output.webp');

Nuxt Image Module

Install and configure:

npm install --save-dev @nuxt/image

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    formats: ['webp', 'avif'],
    quality: 85
  }
})

Usage in components:

<template>
  <NuxtImg
    src="/images/hero-background.jpg"
    format="webp"
    quality="85"
    alt="Hero background"
  />
</template>

Video Format Conversion

  • WebM: Best for web, VP9 codec
  • MP4: Wide compatibility, H.264 codec
  • Multiple formats: Provide both for maximum compatibility

FFmpeg Commands

# Convert to WebM
ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 output.webm

# Convert to optimized MP4
ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium output.mp4

# Create thumbnail
ffmpeg -i input.mp4 -ss 00:00:01 -vframes 1 thumbnail.jpg

Font Format Conversion

Modern Font Stack

  • WOFF2: Primary format, best compression
  • WOFF: Fallback for older browsers
  • TTF/OTF: Original format, keep for reference

Conversion Process

Using fonttools:

# Install fonttools
pip install fonttools brotli

# Convert TTF to WOFF2
pyftsubset input.ttf --output-file=output.woff2 --flavor=woff2

Automated Workflow Integration

Nuxt Build Hook

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'build:before': async () => {
      // Your conversion logic here
      await convertAssets();
    }
  }
})

GitHub Actions Example

name: Process Assets
on:
  push:
    paths:
      - 'public/images/**'
jobs:
  convert:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Convert to WebP
        run: |
          sudo apt-get install imagemagick
          ./scripts/convert-images.sh

Best Practices

  • Always keep original files in a separate directory
  • Document your conversion process
  • Use version control for converted assets
  • Test converted assets across browsers
  • Monitor file sizes and quality

Next Steps

Table of Contents