{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreifmftp3hzy6cd6rcxqnbfrslgy6hemmizegtvjqcwm4nemnk53ecm",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpmcjn4j3yu2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreif3zg4nxrvhfji4ccbqmnsfhi6sab234g6d35hocnkdch4emgf75e"
    },
    "mimeType": "image/webp",
    "size": 69258
  },
  "path": "/amanuel_snit_e92602511eb4/how-i-built-a-free-image-toolkit-freeimgkit-nextjs-webassembly-47g",
  "publishedAt": "2026-07-01T19:24:53.000Z",
  "site": "https://dev.to",
  "tags": [
    "webdev",
    "nextjs",
    "showdev",
    "javascript",
    "@imgly",
    "freeimgkit.com"
  ],
  "textContent": "I recently launched FreeImgKit — a collection of free\nonline image tools that run entirely in the browser.\nNo server processing, no account needed.\n\nHere's what I built and the technical decisions behind it.\n\n##  What it does\n\nFreeImgKit has 6 tools:\n\n  * Image compressor (JPG, PNG, WebP)\n  * Image resizer with aspect ratio lock\n  * Photo cropper with preset ratios\n  * Format converter (PNG↔JPG↔WebP)\n  * Social media resizer (all platform presets)\n  * AI background remover\n\n\n\n##  The core technical decision: client-side only\n\nMost image tools upload your file to a server,\nprocess it, and send it back. This has two problems:\n\n  1. Privacy — your images are stored on someone's server\n  2. Speed — upload time adds latency\n\n\n\nI decided everything would run in the browser instead.\n\n##  How each tool works\n\n**Compression, resizing, cropping, converting**\n\nThese all use the browser's built-in Canvas API:\n\n\n\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    canvas.width = targetWidth;\n    canvas.height = targetHeight;\n    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);\n    canvas.toBlob((blob) => {\n      // blob is the processed image\n    }, 'image/webp', quality);\n\n\nFor compression I used the `browser-image-compression`\nnpm package which handles the quality/size tradeoff\nautomatically.\n\n**AI Background Removal via WebAssembly**\n\nThis was the most interesting part. Background removal\nneeds a real ML model — but I didn't want to send\nimages to a server.\n\nThe solution: `@imgly/background-removal` — a package\nthat runs a segmentation model via WebAssembly directly\nin the browser.\n\n\n\n    import { removeBackground } from '@imgly/background-removal';\n\n    const blob = await removeBackground(imageFile);\n    // blob is a transparent PNG — no server involved\n\n\nThe first run downloads the model (~50MB) to the\nbrowser cache. After that it's instant. The quality\nis comparable to paid tools like remove.bg for most\nsubjects.\n\n##  Tech stack\n\n  * **Next.js 14** App Router + TypeScript\n  * **Tailwind CSS** for styling\n  * **Canvas API** for image processing\n  * **@imgly/background-removal** for AI bg removal\n  * **browser-image-compression** for compression\n  * **Vercel** for deployment\n  * **Cloudflare** for CDN\n\n\n\n##  SEO architecture\n\nEach tool is a separate page with its own URL:\nEach page has unique metadata, FAQ schema markup,\nand detailed SEO content explaining when and why\nto use that specific tool. This programmatic SEO\napproach means each conversion pair targets its\nown search query.\n\n##  Results so far\n\nLaunched 5 weeks ago:\n\n  * 13 pages indexed by Google\n  * 845 impressions in first month\n  * Already ranking for \"png to jpg\", \"crop photo online\"\n  * 69 unique visitors in first 28 days\n\n\n\nStill early but the organic growth curve is heading\nin the right direction.\n\n##  What I'd do differently\n\n  1. Build the conversion pages first — they get more search traffic than the general tools\n  2. Add the FAQ schema from day one — Google detected it immediately and it boosts CTR\n  3. Submit sitemap earlier — I waited 3 weeks before submitting and lost indexing time\n\n\n\n##  Try it\n\n👉 freeimgkit.com\n\nAll tools are free, no account needed, and your\nimages never leave your device.\n\nWould love feedback from the dev community —\nespecially on the WASM background removal\nperformance on different devices.",
  "title": "How I Built a Free Image Toolkit : freeimgkit (Next.js + WebAssembly)"
}