Começando

O Pixu entrega a melhor compressão perceptual para a web ao otimizar a Entropia Reconstrutiva Contextual — $L(x\mid M,C,\epsilon )$ — via o formato PIXU. Zero dependências, TypeScript completo, ciência honesta com Shannon.

Leia a teoria TECR para o modelo completo.

Instalação

npm install @pantanal/pixu

yarn add @pantanal/pixu

pnpm add @pantanal/pixu

Primeira compressão

Try it live

Pick a sample or upload your own image

Try a sample image

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

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

const result = await compress(file, {
  format: 'image/pixu',
  enableSmartQuality: true,
  stripMetadata: true,
});

console.log(`${result.originalSize} → ${result.compressedSize} bytes`);
console.log(`${(result.compressionRatio * 100).toFixed(1)}% reduction`);

Opções de compressão

const result = await compress(file, {
  quality: 0.8,
  maxWidth: 1920,
  maxHeight: 1080,
  format: 'auto',
  stripMetadata: true,
  fixOrientation: true,
  enableSmartQuality: true,
});

Formatos de saída

Formato	MIME	Extensão	Melhor para
PIXU	image/pixu	.webp / .jpg	Caminho TECR; saída nativa WebP ou JPEG
WebP	image/webp	.webp	Navegadores modernos
AVIF	image/avif	.avif	Pipelines nativos AVIF
JPEG	image/jpeg	.jpg	Compatibilidade universal
PNG	image/png	.png	Transparência, gráficos
Auto	auto	—	O Pixu escolhe PIX quando possível

import { compress, PIXU_MIME_TYPE, buildDownloadName } from '@pantanal/pixu';

const result = await compress(file, { format: PIXU_MIME_TYPE });
console.log(result.format); // "image/webp" ou "image/jpeg"
console.log(buildDownloadName('out', result.format));

Saiba mais: Formato PIXU · Formatos suportados

Modos de compressão

Modo qualidade

await compress(file, { mode: 'quality', quality: 0.8 });

Modo tamanho

await compress(file, { mode: 'size', targetSize: 500 * 1024 });

Modo adaptativo

await compress(file, { mode: 'adaptive' });

Modos de redimensionamento

await compress(file, {
  width: 1920,
  height: 1080,
  resize: 'contain',
});

Modo	Comportamento
none	Sem redimensionar
contain	Cabe na caixa, mantém a proporção
cover	Preenche a caixa, corta se necessário
fit	Igual a contain
fill	Dimensões exatas, pode distorcer

Experimente imagens de exemplo

Os exemplos de framework incluem fotos reais que você pode clicar para comprimir na hora:

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

const res = await fetch('/photo-landscape.jpg');
const blob = await res.blob();
const file = new File([blob], 'photo-landscape.jpg', { type: blob.type });

const result = await compress(file, { format: 'image/pixu' });

Ou use um componente de UI com amostras embutidas:

<PixuCompressor
  :samples="sampleImages"
  :options="{ quality: 0.85, format: 'image/pixu' }"
  @compress="onDone"
/>

Exemplos por framework

Prefere um app completo? Escolha sua stack:

Framework	Guia
Vue 3	Exemplos Vue
React	Exemplos React
Angular	Exemplos Angular
Svelte	Exemplos Svelte
Jacaré	Exemplos Jacaré

Execute qualquer projeto:

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

Próximos passos

• Início rápido — presets, workers, batch
• Componente Vue — UI com drag & drop
• Presets de compressão
• Smart Quality
• API: compress()