Image Tools

A fast, privacy-first batch image resizer powered by WebAssembly. Resize images directly in your browser — no server uploads, no data leaves your device.

Demo: https://image-tools-4er.pages.dev/

Features

• Batch Resizing — Process multiple images at once
• Multiple Output Sizes — Predefined sizes + custom dimensions
• WebAssembly Powered — Uses Photon WASM for native-speed processing
• Privacy First — Images never leave your browser
• ZIP Download — Bundle all resized images into a single ZIP
• Dark/Light Theme — Supports system preference and manual toggle

Tech Stack

• Vue 3 — Composition API with <script setup>
• Vite — Fast dev server and build tool
• TailwindCSS v4 — Utility-first CSS
• Photon WASM — Rust-based image processing compiled to WebAssembly
• Pinia — State management
• JSZip — Client-side ZIP generation

Project Structure

image_tools/
├── frontend/                 # Vue 3 frontend application
│   ├── src/
│   │   ├── components/       # Reusable Vue components
│   │   │   ├── ImageUploader.vue
│   │   │   ├── ResizeOptions.vue
│   │   │   └── DownloadZip.vue
│   │   ├── views/            # Page components
│   │   │   ├── UploadView.vue
│   │   │   ├── ResizeView.vue
│   │   │   ├── DownloadView.vue
│   │   │   ├── SizeRecordsView.vue
│   │   │   └── AboutView.vue
│   │   ├── stores/           # Pinia stores
│   │   │   └── images.ts
│   │   ├── router/           # Vue Router config
│   │   └── App.vue
│   └── package.json
└── photon/                   # Photon WASM library (cloned)
    └── crate/pkg/            # Built WASM package

Getting Started

Prerequisites

• Node.js 20.19+ or 22.12+
• Bun (recommended) or npm

Setup

1. Clone the repository with Photon:

   git clone https://github.com/silvia-odwyer/photon.git photon
   cd photon/crate
   wasm-pack build --target web
   cd ../..

2. Install frontend dependencies:

   cd frontend
   bun install
   bun install file:../photon/crate/pkg

3. Start development server:

   bun run dev

4. Build for production:

   bun run build

User Flow

1. Upload — Drag & drop, browse files, paste from clipboard, or load from URL
2. Resize — Select predefined sizes or create custom dimensions
3. Download — Export as ZIP or download images individually

License

MIT