Open Source ★ —

The composable image workflow engine

Generate with AI. Transform with precision. Save anywhere. All in one pipeline.

Try Studio Read the Docs

Charts

Pipeline

Charts

Pipeline

Browse workflow templates →

See It in Action

Choose your use case

AI-generated hero image resized for social platforms

Generate a hero image with AI, then resize it for every social platform in one pipeline. No more manual exports.

import floimg from '@teamflojo/floimg';
import openai from '@teamflojo/floimg-openai';

floimg.use(openai());

// Generate hero, then create all social sizes
const hero = await floimg.generate('openai', {
  prompt: 'Minimal gradient background, soft purple to blue',
});

const sizes = {
  twitter: [1200, 675],
  linkedin: [1200, 627],
  instagram: [1080, 1080],
};

for (const [platform, [w, h]] of Object.entries(sizes)) {
  await floimg.pipeline(hero)
    .resize({ width: w, height: h, fit: 'cover' })
    .save(`hero-${platform}.png`);
}

# Generate hero image with AI
floimg generate openai \
  --prompt "Minimal gradient background, soft purple to blue" \
  --out hero.png

# Create all social media sizes
floimg resize hero.png 1200x675 --fit cover -o hero-twitter.png
floimg resize hero.png 1200x627 --fit cover -o hero-linkedin.png
floimg resize hero.png 1080x1080 --fit cover -o hero-instagram.png

name: Social Media Hero
steps:
  - kind: generate
    generator: openai
    params:
      prompt: "Minimal gradient background, soft purple to blue"
    out: hero

  - kind: transform
    in: hero
    op: resize
    params: { width: 1200, height: 675, fit: cover }
    out: hero-twitter.png

  - kind: transform
    in: hero
    op: resize
    params: { width: 1200, height: 627, fit: cover }
    out: hero-linkedin.png

  - kind: transform
    in: hero
    op: resize
    params: { width: 1080, height: 1080, fit: cover }
    out: hero-instagram.png

Fluent API Docs → OpenAI Plugin →

CLI Reference → OpenAI Plugin →

Pipeline Guide → Try in Studio →

Turn any image into a responsive srcset. Automatic WebP conversion, optimized sizes, ready for your <picture> element.

import floimg from '@teamflojo/floimg';

const source = await floimg.load('./uploads/hero.jpg');

// Generate responsive srcset in one pass
const widths = [320, 640, 1280, 1920];

await Promise.all(
  widths.map(w =>
    floimg.pipeline(source)
      .resize({ width: w })
      .sharpen({ amount: 0.5 })
      .convert({ format: 'webp', quality: 85 })
      .save(`public/hero-${w}.webp`)
  )
);

// Output: hero-320.webp, hero-640.webp, ...

# Generate responsive srcset from any image
floimg resize hero.jpg 320 --sharpen 0.5 --format webp -q 85 -o hero-320.webp
floimg resize hero.jpg 640 --sharpen 0.5 --format webp -q 85 -o hero-640.webp
floimg resize hero.jpg 1280 --sharpen 0.5 --format webp -q 85 -o hero-1280.webp
floimg resize hero.jpg 1920 --sharpen 0.5 --format webp -q 85 -o hero-1920.webp

# Or use batch mode
floimg batch hero.jpg --widths 320,640,1280,1920 \
  --sharpen 0.5 --format webp -q 85

name: Responsive Srcset
input: hero.jpg
steps:
  - kind: transform
    op: resize
    params: { width: 320 }
    then:
      - op: sharpen
        params: { amount: 0.5 }
      - op: convert
        params: { format: webp, quality: 85 }
    out: hero-320.webp

  - kind: transform
    op: resize
    params: { width: 640 }
    then:
      - op: sharpen
        params: { amount: 0.5 }
      - op: convert
        params: { format: webp, quality: 85 }
    out: hero-640.webp

  # ... 1280, 1920

Fluent API Docs → Transform Reference →

CLI Reference → Batch Processing →

Pipeline Guide → Try in Studio →

Process user uploads at scale. Crop, resize, optimize, and store—all in a single workflow that runs on every upload.

import floimg from '@teamflojo/floimg';

export async function processUserAvatar(upload: Buffer) {
  const image = await floimg.load(upload);

  // Crop to square, create standard sizes, optimize
  const processed = await floimg.pipeline(image)
    .crop({ aspect: '1:1', gravity: 'face' })
    .resize({ width: 256 })
    .sharpen()
    .convert({ format: 'webp', quality: 90 });

  // Save to cloud storage
  const url = await floimg.save(processed, {
    destination: 's3://avatars',
    filename: `${userId}-256.webp`,
  });

  return url;
}

# Process avatar: crop to square, resize, optimize
floimg pipeline avatar-upload.jpg \
  --crop "1:1" --gravity face \
  --resize 256 \
  --sharpen \
  --format webp -q 90 \
  -o processed-avatar.webp

# Upload to S3
aws s3 cp processed-avatar.webp s3://avatars/user-123.webp

name: Avatar Processor
input: $upload
steps:
  - kind: transform
    op: crop
    params:
      aspect: "1:1"
      gravity: face

  - kind: transform
    op: resize
    params: { width: 256 }

  - kind: transform
    op: sharpen

  - kind: transform
    op: convert
    params: { format: webp, quality: 90 }

  - kind: save
    destination: s3://avatars
    filename: "${userId}-256.webp"

Fluent API Docs → Storage Plugins →

CLI Reference → Pipeline Mode →

Pipeline Guide → Try in Studio →