PureJsImage

Browser image viewer + converter

Open an image. Choose what to do.

View any supported image with pan and zoom, or switch to Convert and create JPEG, PNG, WebP, AVIF, TIFF, and other first-party output. The selected mode never changes when you choose a file.

No server uploadYour files stay in this tab. Public samples load from their named source only when you click Open here.

Image viewportDrop a file or open a sample
Not available
Waiting for a local image.No region selected

Operation log

Detection, directory selection, viewport reads, exports, validation, errors, timings, and available memory observations appear here.

purejsimage://browser-operation
    What “max memory” means here. Chromium exposes an estimated current JavaScript heap size, so this demo records the maximum observed value at operation checkpoints. It is not process RSS and can miss short-lived allocations while JavaScript is running. Firefox and Safari do not expose a comparable value, so the UI says “Not exposed” instead of inventing one. Input and output file bytes are reported separately and exactly.

    Use it in a site

    How this demo loads PureJsImage

    This page serves a deterministic ESM bundle generated from src/browser.ts, the explicit all-codec entry, and the optional JPEG WASM entry on the same repository commit. The TypeScript path remains the default; the WASM module is fetched from this site only after you enable it and submit eligible work.

    For an application, install from npm and let your bundler resolve the browser export. For a quick no-build experiment, the pinned npm package is also available from jsDelivr. Raw GitHub file URLs are not used because they are not a dependable JavaScript package CDN.

    npm CDN · pinned release
    import { createImageLibrary } from
  'https://cdn.jsdelivr.net/npm/purejsimage@0.17.0/dist/browser.js'
import { allCodecs } from
  'https://cdn.jsdelivr.net/npm/purejsimage@0.17.0/dist/codec-entries/all.js'

const images = createImageLibrary(allCodecs)
const image = await images.open(file)
const output = await image.webp({ quality: 82 }).toBlob()