Quick Start

Get started with Pixu in minutes.

Basic Compression

Try it live

Pick a sample or upload your own image

Try a sample image

import { compress } from '@pantanal/pixu';

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const result = await compress(file, {
    quality: 0.8,
  });

  console.log('Compressed:', result);
});

With Resize

Try it live

Pick a sample or upload your own image

Try a sample image

const result = await compress(file, {
  quality: 0.8,
  maxWidth: 1920,
  maxHeight: 1080,
});

Using Presets

Try it live

Pick a sample or upload your own image

Try a sample image

const result = await compress(file, {
  preset: 'web',
});

With Progress Tracking

Try it live

Pick a sample or upload your own image

Try a sample image

const result = await compress(file, {
  quality: 0.8,
  onProgress: (progress) => {
    console.log(`Progress: ${(progress * 100).toFixed(0)}%`);
  },
});

Web Worker

import { WorkerCompressor } from 'pixu/worker/client';

const worker = new WorkerCompressor('/path/to/pixu.worker.esm.js');

const result = await worker.compress(file, {
  quality: 0.8,
});

Batch Processing

import { compressBatch } from '@pantanal/pixu';

const results = await compressBatch(files, {
  quality: 0.8,
  concurrency: 3,
});

Error Handling

try {
  const result = await compress(file, {
    quality: 0.8,
  });
} catch (error) {
  if (error instanceof Error) {
    console.error('Compression failed:', error.message);
  }
}

Using PIXU Format (Best Compression)

Try it live

Pick a sample or upload your own image

Try a sample image

import { compress } from '@pantanal/pixu';

const result = await compress(file, {
  quality: 0.8,
  format: 'image/pixu', // Revolutionary format, 30-60% better than JPEG
});

Complete Example

import { compress } from '@pantanal/pixu';

async function compressImage(file: File) {
  try {
    const result = await compress(file, {
      quality: 0.8,
      maxWidth: 1920,
      maxHeight: 1080,
      format: 'image/pixu', // Using PIX for best compression
      stripMetadata: true,
      onProgress: (progress) => {
        console.log(`Progress: ${(progress * 100).toFixed(0)}%`);
      },
    });

    console.log(`Original: ${result.originalSize} bytes`);
    console.log(`Compressed: ${result.compressedSize} bytes`);
    console.log(`Ratio: ${(result.compressionRatio * 100).toFixed(1)}%`);

    return result.file;
  } catch (error) {
    console.error('Compression failed:', error);
    throw error;
  }
}

Framework Examples

Ready-to-run apps with real sample photos and UI components:

npm run build
cd examples/vue   # or react, angular, svelte, jacare
npm install && npm run dev

Framework	Port	Guide
Vue	3000	/examples/vue
React	3001	/examples/react-example
Angular	4200	/examples/angular
Svelte	3002	/examples/svelte
Jacaré	3003	/examples/jacare

Full overview →