Compress and optimize your images with precision

Reshape is a modern, minimalist image compression application built with Astro and Electron. It provides a streamlined workflow for compressing multiple images simultaneously with advanced format conversion and quality control.

• 🔄 Drag & Drop Interface - Simple and intuitive file upload
• ⚡ Fast Processing - Client-side compression using Canvas API
• 🎯 Format Conversion - Support for WebP and AVIF formats
• 📏 Smart Resizing - Automatic width optimization with aspect ratio preservation
• 💾 Batch Download - Single ZIP file with all compressed images
• 🎨 Dark Theme - Modern black & white interface with green accents
• 📱 Responsive Design - Optimized for desktop use (500×500px)

• Frontend: Astro + TypeScript + Tailwind CSS v4
• Desktop: Electron
• Image Processing: Canvas API + JSZip
• Build Tool: Vite
• Package Manager: npm

Before running this application, make sure you have:

• Node.js (v18 or higher)
• npm (v8 or higher)
• Git (for cloning the repository)

git clone <your-repo-url>
cd reshape

npm install

npm run dev

The application will be available at http://localhost:4321/

npm run electron

# Build web version
npm run build

# Build desktop version
npm run electron:build

• Drag and drop your image files onto the upload area
• Supported formats: JPEG, PNG, GIF, WebP, AVIF, SVG

• Output Format: Choose between WebP or AVIF
• Compression Quality: Adjust from 1% to 100%
• Maximum Width: Set the maximum width (maintains aspect ratio)

• Click "Transform" to start compression
• Images are processed automatically
• Download starts immediately as a ZIP file

• Stay on the config screen for multiple batches
• Use "Back" button to return to upload screen
• All settings are preserved between sessions

reshape/
├── public/                 # Static assets
│   ├── icons/             # Application icons
│   ├── favicon.svg        # Website favicon
│   └── reshape.png        # Logo files
├── src/
│   ├── components/        # Astro components
│   │   └── ImageCompressor/
│   │       ├── ImageCompressor.astro
│   │       ├── ImageCompressor.css
│   │       └── ImageCompressor.ts
│   ├── layouts/           # Page layouts
│   ├── pages/             # Application pages
│   └── styles/            # Global styles
├── main.cjs               # Electron main process
├── package.json           # Dependencies and scripts
└── README.md              # This file

No environment variables are required for local development.

The application is configured through:

• astro.config.ts - Astro and Vite configuration
• main.cjs - Electron window settings
• package.json - Build scripts and dependencies

Port already in use

# Kill process using port 4321
lsof -ti:4321 | xargs kill -9

Electron won't start

# Clear Electron cache
rm -rf ~/Library/Application\ Support/reshape

Build errors

# Clear dependencies and reinstall
rm -rf node_modules package-lock.json
npm install

• Astro team for the amazing framework
• Electron team for desktop app capabilities
• Tailwind CSS for the utility-first CSS framework
• JSZip for ZIP file creation