vela Get started

Imagerry: Crafting a Privacy‑First, Client‑Side Image Suite

July 22, 20265 min read

Key takeaways

  • Imagerry processes images entirely on the client, eliminating privacy concerns and reducing latency.
  • WebAssembly (via libvips) and HTML5 Canvas provide fast, high‑quality format conversion and scaling.
  • WebGPU enables GPU‑accelerated filters for desktop apps, while WebGPU/ONNX Runtime Web can power future AI features.
  • Adding AI models introduces trade‑offs: larger initial download, higher memory usage, but offers powerful new capabilities.
  • A modular, optional‑add‑on approach lets users keep the core app lightweight while opting into AI tools if desired.

Introduction\n\nWhen I first posted **Show HN: Imagerry** on Hacker News, the response was a mix of curiosity and enthusiasm. People love tools that let them edit, convert, and resize images without ever sending a file to the cloud. In a world where privacy concerns dominate headlines, a 100 % client‑side solution feels almost revolutionary. This post dives into the design decisions behind Imagerry, the technical stack that makes it possible, and the strategic questions surrounding future features like on‑device AI models. \n## Why Client‑Side Matters\n\nTraditional image‑processing services rely on server‑side pipelines: a user uploads a file, the backend runs conversion or resizing, and the result is sent back. While this model is simple, it raises two major pain points:\n\n1. **Privacy** – Every upload is a potential data leak. Even reputable services can be compromised or subject to legal requests.\n2. **Latency** – Large files travel across the internet, adding upload and download time, especially on slower connections.\n\nImagerry eliminates both by performing every operation locally. The browser becomes the execution environment, and the user retains full control over their files. This approach aligns with the growing “privacy‑first” movement and leverages the impressive performance gains of modern web APIs. \n## Core Features of Imagerry\n\n### 1. Format Conversion & Resizing\n- **Supported formats**: PNG, JPEG, WebP, AVIF, SVG.\n- **High‑quality scaling**: Powered by the `pica` library, which implements Lanczos resampling for crisp results.\n\n### 2. Utility Tools\n- **Code Snippet Beautifier** – Turns raw CSS/HTML into nicely formatted snippets.\n- **App Icon Studio** – Generates all required icon sizes for iOS, Android, and desktop platforms.\n- **Social OG Card Generator** – Creates Open Graph images tailored for Twitter, Facebook, and LinkedIn.\n- **Passport Photo Arranger** – Aligns and crops photos to meet official passport specifications.\n\n### 3. Cross‑Platform Availability\n- **Progressive Web App (PWA)** – Installable on any modern browser with offline support.\n- **Electron Desktop App** – Bundles the same codebase for Windows, macOS, and Linux, exposing native file dialogs and system shortcuts.\n\n## Technical Deep Dive\n\n### HTML5 Canvas + WebAssembly\nThe heavy lifting—decoding and encoding image formats—runs inside a WebAssembly (WASM) module compiled from libvips, a fast image processing library written in C. Canvas acts as the bridge between WASM and the DOM, allowing us to render previews instantly.\n\n### WebGPU for Desktop‑Only Enhancements\nWhile the core workflow works on any device, the desktop version can tap into **WebGPU** for GPU‑accelerated filters and transformations. WebGPU offers a low‑level, Vulkan‑style API that delivers near‑native performance without the security concerns of native plugins.\n\n### ONNX Runtime Web (Future)\nIf we decide to add AI‑powered tools—like upscaling or background removal—we’ll likely use **ONNX Runtime Web**. This runtime can execute pre‑trained neural networks directly in the browser, leveraging either WebGPU or WebGL for acceleration. The trade‑off is the initial model download size, which can range from 20 MB to 50 MB depending on the architecture. \n## The AI Model Debate\n\n### Benefits\n- **Enhanced capabilities** – AI upscalers can double resolution with minimal artifacts; background removers can isolate subjects without manual masking.\n- **Competitive edge** – Few client‑side image tools offer AI features, so this could differentiate Imagerry in a crowded market.\n\n### Drawbacks\n- **Download overhead** – A 30 MB model adds noticeable latency on first launch, especially for users on metered connections.\n- **Memory footprint** – Running a neural network in the browser consumes additional RAM, which may affect older machines.\n- **Complexity** – Maintaining model compatibility across browsers and handling fallback paths increases code complexity.\n\n### Decision Framework\n1. **Target audience** – Desktop‑only users who already expect a larger install size may tolerate the extra megabytes.\n2. **Privacy vs. convenience** – Users who value zero‑cloud processing may appreciate a one‑time download that stays on their device.\n3. **Modular architecture** – By keeping AI features behind an optional “Add‑ons” menu, we let power users opt‑in while keeping the base app lightweight.\n\n## Landing Page Design Tips\nA compelling landing page should visually convey the “before‑and‑after” power of Imagerry. Here are a few suggestions:\n\n- **Hero carousel** – Show a split‑screen comparison of an original image and its converted/resized version. Use subtle animation to draw attention.\n- **Interactive demo** – Embed a tiny instance of the editor that lets visitors upload a sample image and try a conversion instantly.\n- **Feature icons** – Use concise, universally recognizable icons for each utility tool (e.g., a palette for the Code Beautifier, a passport for the Photo Arranger).\n- **Trust signals** – Highlight the “100 % client‑side, no uploads” promise with a lock icon and a short privacy statement.\n\n## Future Roadmap\n- **Modular AI add‑ons** – Release a background‑removal model as an optional download for desktop users.\n- **Batch processing** – Enable users to queue dozens of files for conversion, leveraging Web Workers to keep the UI responsive.\n- **Community templates** – Allow users to share OG‑card layouts or icon packs via a public repository, fostering an ecosystem around the tool.\n\n## Conclusion\nImagerry proves that modern web standards are powerful enough to replace many traditional desktop utilities. By keeping every operation on the client, we protect user privacy, cut latency, and open the door to innovative features that run entirely in the browser. The next big question—whether to embed AI models—will hinge on balancing download size, user expectations, and the desire to stay ultra‑lightweight. Whatever the path, the foundation is solid: a privacy‑first, cross‑platform image suite built with HTML5 Canvas, WebAssembly, and (where appropriate) WebGPU.

Sources: https://imagerry.com/

More field notes

Start smaller than feels respectable.