Transforme suas imagens com elegância e precisão. Converta, redimensione e otimize diretamente no navegador com uma UI refinada e responsiva, processamento 100% local e foco total em performance e privacidade.

🚀 Live Demo · Instalação · Recursos · Roadmap · Contribuir

• Formatos: JPG, PNG, WebP, BMP, AVIF
• Lote: processe várias imagens de uma vez
• Qualidade: controle fino (JPEG)
• Privacidade: 100% local, sem upload

• Modos: fit (encaixar) e fill (preencher)
• Aspect Ratio: manter/alterar proporções
• Dimensões custom + preview em tempo real

• Design responsivo (mobile‑first)
• Tema claro/escuro com auto‑detecção
• Drag & Drop, toasts, barra de progresso
• Painéis redimensionáveis e UI coesa (Radix UI)

• Context API com reducer para estado global
• Validação de arquivos (tipo/tamanho)
• Histórico de conversões
• Exportação em lote

Frontend: Next.js 14 (App Router) · React 18 · TypeScript · Tailwind CSS · Radix UI

UX & utilitários: Tailwind CSS Animate · Lucide · Sonner · React Hook Form · Zod · React Resizable Panels · next-themes · date-fns · Recharts

1. Upload: arraste e solte ou selecione arquivos
2. Configuração: escolha formato, redimensionamento e qualidade
3. Processamento: clique em Converter e acompanhe o progresso
4. Download: baixe individualmente ou em lote

• Node.js 18+
• npm, yarn ou pnpm

git clone https://github.com/aMathyzinn/ImgC.git
cd ImgC
npm i
npm run dev
# abra http://localhost:3000

conversor/
├── app/                    # App Router do Next.js
│   ├── globals.css         # Estilos globais
│   ├── layout.tsx          # Layout principal
│   └── page.tsx            # Página inicial
├── components/             # Componentes React
│   ├── actions/            # Ações globais
│   ├── feedback/           # Notificações e progresso
│   ├── files/              # Gerenciamento de arquivos
│   ├── layout/             # Componentes de layout
│   ├── theme-provider.tsx  # Provedor de tema
│   ├── ui/                 # Componentes de UI
│   └── upload/             # Área de upload
├── contexts/               # Contextos React
│   └── ImageConverterContext.tsx
├── hooks/                  # Hooks customizados
├── lib/                    # Utilitários
├── utils/                  # Funções utilitárias
│   ├── imageUtils.ts       # Conversão de imagens
│   └── resizeUtils.ts      # Redimensionamento
└── public/                 # Arquivos estáticos

{
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

export type ImageFormat = "jpeg" | "png" | "webp" | "bmp" | "avif";
const quality = targetFormat === "jpeg" ? 0.9 : undefined;

export type ResizeMode = "fit" | "fill";
interface ResizeSettings {
  width?: number;
  height?: number;
  maintainAspectRatio: boolean;
  mode: ResizeMode;
  enabled: boolean;
}

const [state, dispatch] = useReducer(reducer, initialState);

• Tema claro/escuro automático
• Cores ajustáveis via Tailwind
• Componentes desacoplados e reutilizáveis

• Desktop: todos os recursos
• Tablet: layout otimizado
• Mobile: experiência fluida e gestos touch

• Processamento local (Web APIs)
• Sem upload para servidores externos
• Revogação automática de URLs de objeto

0.8

• TIFF e GIF
• Filtros e efeitos
• Compressão inteligente
• Histórico refinado

0.9

• API REST para lote
• Integrações com nuvem
• Plugins para editores
• Metadados EXIF

1.0

• Editor embutido
• Vídeo básico
• Colaboração em tempo real
• IA para otimização

Imagens saem do meu dispositivo? Não. Todo o processamento é feito no navegador.

Funciona offline? As conversões rodam localmente; o app pode ser adaptado para PWA.

Qualidade cai ao converter? Para JPEG você controla a qualidade; formatos como PNG/WebP seguem parâmetros ideais.

1. Faça fork
2. Crie uma branch: git checkout -b feature/nome
3. Commit: git commit -m "feat: ..."
4. Push: git push origin feature/nome
5. Abra um PR

Siga padrões de código, adicione testes quando possível e mantenha a documentação atualizada.

Licenciado sob MIT — veja LICENSE.

• Issues: GitHub Issues
• Discussions: GitHub Discussions

Feito com ❤️ e ☕ — se este projeto te ajudou, deixe uma ⭐