# OneImage - Complete Documentation ## Overview OneImage is a suite of privacy-focused, browser-based image processing tools. Every tool runs entirely in the user's browser using modern web technologies like WebAssembly, Canvas API, and Web Workers. No images are ever uploaded to servers, ensuring complete privacy and security. ## Mission & Philosophy ### Privacy First - **Zero Server Uploads**: All processing happens client-side - **No Data Collection**: We don't see, store, or analyze your images - **Open Source**: Transparent codebase for audit - **GDPR Compliant**: No tracking, no cookies for images ### Free & Accessible - **No Subscriptions**: All tools completely free - **No Registration**: Use immediately without accounts - **No Limits**: Process unlimited images - **Multi-language**: English and Chinese support ### Professional Quality - **Modern Tech**: WebAssembly for performance - **High Quality**: No quality loss (unless compression) - **Fast**: Real-time processing - **Reliable**: Works offline once loaded ## Tool Suite ### 1. Blur Tool **URL**: https://oneimage.co/blur **Purpose**: Privacy protection through selective image blurring **Features**: - Manual brush blurring with size/intensity control - Automatic face detection and blur - Real-time preview - Undo/redo support - High-quality output **Common Uses**: - Blur faces in group photos - Redact sensitive documents - Hide license plates - Background blur for focus - Privacy on social media **Technology**: HTML5 Canvas, optional TensorFlow.js for face detection --- ### 2. Overlay Tool **URL**: https://oneimage.co/overlay **Purpose**: Add watermarks, logos, and text to images **Features**: - Multiple image overlay layers - Text overlays with font control - Drag, resize, rotate, opacity control - Layer management - PNG transparency support **Common Uses**: - Copyright watermarks - Brand logos on marketing materials - Social media graphics - Event branding - Photo signatures **Technology**: HTML5 Canvas with layer compositing --- ### 3. Crop Tool **URL**: https://oneimage.co/crop **Purpose**: Crop and resize images with precision **Features**: - Freeform and fixed ratio cropping - Preset aspect ratios (1:1, 16:9, 4:3, etc.) - Rotation (90°, 180°, custom angles) - Flip horizontal/vertical - Grid overlay for alignment **Common Uses**: - Social media formatting - Profile picture creation - Remove unwanted areas - Prepare images for print - Thumbnail creation **Technology**: HTML5 Canvas with geometric transformations --- ### 4. EXIF Remover Tool **URL**: https://oneimage.co/exif **Purpose**: Remove metadata and GPS data from photos **Features**: - View all EXIF metadata - Complete or selective removal - Batch processing - GPS location warnings - Original quality maintained **Common Uses**: - Privacy protection - Remove location data - Anonymous publishing - Security-sensitive sharing - Clean metadata for web **Technology**: EXIF.js library with binary rewriting --- ### 5. Compress Tool (Squoosh) **URL**: https://oneimage.co/compress **Purpose**: Advanced image compression and format conversion **Features**: - Multiple formats: MozJPEG, WebP, AVIF, PNG - Quality slider with real-time preview - Side-by-side comparison - Advanced codec settings - Format conversion **Common Uses**: - Web performance optimization - Reduce file sizes - Convert to modern formats - Bandwidth savings - Storage optimization **Technology**: WebAssembly codecs (MozJPEG, libwebp, rav1e, OxiPNG) --- ## Technical Architecture ### Frontend Stack - **Framework**: Next.js 15 (React 19) - **Language**: TypeScript - **Styling**: Tailwind CSS - **Internationalization**: next-intl - **Monorepo**: pnpm workspaces ### Processing Technologies - **Canvas API**: Core image manipulation - **WebAssembly**: High-performance codecs - **Web Workers**: Background processing - **File API**: Local file handling - **Service Workers**: Offline capability (future) ### Deployment - **Platform**: Cloudflare Pages - **CDN**: Global edge network - **Domains**: Subdomain per tool - **SSL**: Automatic HTTPS - **Performance**: ~50ms TTFB globally ### Project Structure ``` oneimage/ ├── apps/ │ ├── main/ # Landing page (oneimage.co) │ ├── blur/ # Blur tool │ ├── overlay/ # Overlay tool │ ├── crop/ # Crop tool │ ├── exif/ # EXIF remover │ └── squoosh/ # Compression tool ├── packages/ │ ├── widgets/ # Shared components │ ├── i18n/ # Internationalization │ ├── ui/ # UI components │ └── tailwind-config/ └── lib/ # Shared utilities ``` ## Browser Compatibility ### Desktop - **Chrome/Edge**: Full support (recommended) - **Firefox**: Full support - **Safari**: Full support (some format limitations) - **Opera**: Full support ### Mobile - **iOS Safari**: Good support - **Chrome Mobile**: Full support - **Firefox Mobile**: Full support - **Samsung Internet**: Good support ### Requirements - Modern browser (last 2 versions) - JavaScript enabled - Canvas API support - File API support - ~50MB RAM for large images ## Performance ### Processing Speed - **Small images** (< 1MB): Real-time - **Medium images** (1-5MB): < 2 seconds - **Large images** (5-20MB): 2-10 seconds - **Batch operations**: Parallel processing ### Memory Usage - **Per Image**: ~2-4x file size in memory - **Large Images**: Up to 100MB RAM - **Optimization**: Automatic cleanup after processing ### File Size Limits - **Practical Limit**: ~50MB per image - **Browser Limit**: Varies (typically 100-500MB total) - **No Artificial Limits**: Only browser constraints ## Privacy & Security ### Data Handling - **Client-Side Only**: 100% browser processing - **No Server Upload**: Files never transmitted - **No Storage**: No localStorage, no cookies (for images) - **No Analytics**: No tracking on image content - **Memory Cleanup**: Immediate after processing ### Security Measures - **HTTPS Only**: All connections encrypted - **CSP Headers**: Content Security Policy - **XSS Protection**: Input sanitization - **Open Source**: Public audit possible - **Regular Updates**: Security patches ### Compliance - **GDPR**: Fully compliant (no data collection) - **CCPA**: Compliant - **Privacy by Design**: Built-in from start ## Use Cases by Industry ### Content Creators - Compress images for faster uploads - Crop for different platforms - Add watermarks for protection - Remove metadata before sharing ### Photographers - Quick privacy edits - Watermark portfolios - EXIF data management - Format conversion ### Web Developers - Optimize images for web - Generate thumbnails - Convert to modern formats - Test compression quality ### Journalists & Activists - Protect source identity - Remove location data - Blur faces in photos - Anonymous publishing ### E-commerce - Product photo preparation - Watermark inventory photos - Optimize for web - Consistent sizing ### Social Media Managers - Format for different platforms - Add branding - Privacy protection - Batch processing ## SEO & Discovery ### Primary Keywords - Free online image tools - Browser-based image editor - Privacy image processing - Client-side image tools - WebAssembly image tools ### Target Audiences 1. Privacy-conscious users 2. Content creators 3. Web developers 4. Photographers 5. Social media managers 6. Businesses 7. Journalists ### Unique Value Propositions 1. **Privacy First**: Never upload images 2. **Free Forever**: No hidden costs 3. **Professional Quality**: Not a toy 4. **Modern Tech**: WebAssembly performance 5. **Open Source**: Trustworthy ## Roadmap & Future Features ### Planned Tools - **Watermark Tool**: Dedicated watermark app (in development) - **Convert Tool**: Format converter (in development) - **Resize Tool**: Batch resize utility - **Collage Tool**: Image collage maker ### Planned Features - Batch processing across all tools - Save/load presets - Browser extension - CLI tools for developers - API for automation (privacy-preserved) - Progressive Web App (PWA) - Offline mode with service workers - Dark mode refinements ### Technology Improvements - WebGPU for faster processing - Better mobile performance - Reduced bundle sizes - Lazy loading optimization - Advanced caching strategies ## Development & Contribution ### Tech Stack - Next.js 15 (App Router) - React 19 - TypeScript 5 - Tailwind CSS 4 - pnpm workspaces ### Getting Started ```bash git clone https://github.com/AlixWang/oneimage cd oneimage pnpm install pnpm --filter main dev ``` ### Development Commands - `pnpm --filter dev`: Start dev server - `pnpm --filter build`: Production build - `pnpm -r lint`: Lint all packages - `pnpm --filter squoosh test`: Run tests ### Contributing - Fork repository - Create feature branch - Follow coding conventions - Add tests if applicable - Submit pull request ## Support & Community ### Resources - **Main Site**: https://oneimage.co - **GitHub**: https://github.com/AlixWang/oneimage - **Documentation**: This file and individual llms-full.txt - **Issues**: GitHub Issues for bug reports ### Contact - **Bug Reports**: GitHub Issues - **Feature Requests**: GitHub Discussions - **General Inquiries**: Via website contact form ### Community Guidelines - Respectful communication - Constructive feedback - Privacy-respecting suggestions - Open source ethos ## License ### Code License - MIT License (for OneImage enhancements) - Apache 2.0 (for Squoosh base) ### Usage Rights - Free for personal use - Free for commercial use - Attribution appreciated but not required - No warranty (as-is) ## Credits & Attribution ### Original Works - **Squoosh**: Google Chrome Labs (Apache 2.0) - **Icons**: Lucide Icons (ISC License) - **Fonts**: System fonts ### Built With - Next.js by Vercel - React by Meta - Tailwind CSS - TypeScript - WebAssembly codecs (various authors) ### Team - Developed by AlixWang and contributors - Open source community contributions - Built with ❤️ for privacy --- Last Updated: 2025-10-12 Version: 1.0 Project: OneImage Suite