Reshape - Image Compression Tool

Compress and optimize your images with precision

🚀 Overview

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.

✨ Key Features

• 🔄 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)

🛠️ Tech Stack

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

📋 Prerequisites

Before running this application, make sure you have:

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

🚀 Quick Start

1. Clone the Repository

git clone <your-repo-url>
cd reshape

2. Install Dependencies

npm install

3. Run in Development Mode

Web Version (Astro)

npm run dev

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

Desktop Version (Electron)

npm run electron

4. Build for Production

# Build web version
npm run build

# Build desktop version
npm run electron:build

🎯 How to Use

Step 1: Upload Images

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

Step 2: Configure Settings

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

Step 3: Process Images

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

Step 4: Repeat or Reset

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

📁 Project Structure

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

🔧 Configuration

Environment Variables

No environment variables are required for local development.

Build Configuration

The application is configured through:

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

🚀 Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run electron	Start Electron app
npm run electron:build	Build Electron app

🐛 Troubleshooting

Common Issues

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

🙏 Acknowledgments

• 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

---

Built with ❤️ using modern web technologies

Reshape - Transform your images, simplify your workflow