Image Optimization
for Developers
The same engine that powers opti.pictures — available as an npm package, CLI tool, Figma plugin, and browser extension. Zero server-side infrastructure. Zero privacy trade-offs.
Available now & coming soon
@optipic/core — npm Package
Availablenpm install @optipic/coreTypeScript library for Node.js and browser. Compress, convert, and resize images using sharp (Node) or Canvas API + WASM (browser).
@optipic/cli — Terminal Tool
Availablenpx @optipic/cli compressProcess images from the terminal with glob patterns, a clean output table, and all the same format/quality controls.
Figma Plugin
AvailableCompress and export frames directly from Figma. Supports WebP, AVIF, JPEG, PNG at 1x / 2x / 3x. Everything stays in your browser.
Browser Extension
AvailableRight-click any image on the web. Optimize with OptiPic appears in the context menu. Download the compressed version instantly.
REST API
Coming SoonA hosted API for server-side workflows. Same compression quality, with authentication, usage metering, and webhooks. Launching in Phase 15.
@optipic/core
Zero-dependency TypeScript library. Works in Node.js via sharp and in the browser via Canvas API + WASM encoders — same API, both environments.
npm install @optipic/core sharpCompress a JPEG to WebP:
import { compress } from '@optipic/core'
import { readFile, writeFile } from 'fs/promises'
const input = new Uint8Array(await readFile('photo.jpg'))
const result = await compress(input, {
format: 'webp',
quality: 80,
stripExif: true,
})
await writeFile('photo.webp', result.buffer)
console.log(`${result.originalSize} → ${result.compressedSize} bytes`)
console.log(`Saved ${result.savingsPercent.toFixed(1)}%`)Convert and resize:
import { convert, resize } from '@optipic/core'
// Convert PNG → AVIF
const converted = await convert(input, { to: 'avif', quality: 75 })
// Resize to 800px wide, keep aspect ratio
const resized = await resize(input, {
width: 800,
fit: 'contain',
format: 'webp',
quality: 85,
})ImageResult shape
interface ImageResult {
buffer: Uint8Array // compressed image bytes
mimeType: string // e.g. 'image/webp'
originalSize: number // bytes
compressedSize: number // bytes
width: number
height: number
savingsPercent: number // e.g. 42.3
}@optipic/cli
Process images from the terminal. Use glob patterns to batch-process entire directories. Prints a result table per file — original size, compressed size, and savings percentage.
# Compress a single file
npx @optipic/cli compress photo.jpg --format webp --quality 80
# Batch compress a folder
npx @optipic/cli compress "./images/*.png" --format avif --quality 75 --out ./dist
# Convert format
npx @optipic/cli convert logo.png --to webp
# Resize to 800px wide
npx @optipic/cli resize photo.jpg --width 800 --format jpeg --quality 85All options
--formatjpeg · png · webp · avif--quality1–100 (default: 80)--outOutput directory--strip-exifRemove EXIF metadata--width / --heightResize dimensions (px)--fitcontain · cover · fill--overwriteReplace source files (prompts confirmation)Compress & Export from Figma
Select frames or components in Figma, pick your format, and export optimized images without leaving the design tool. Compression runs in the plugin's UI iframe — your pixels never leave the browser.
Select layers
Pick one or more frames, components, or groups in Figma.
Choose format + quality
WebP, AVIF, JPEG, or PNG. Scale: 1x / 2x / 3x.
Export & Compress
Download compressed files directly from the popup.
Install (development)
# 1. Clone or download packages/figma-plugin/
# 2. Install deps and build
cd packages/figma-plugin
npm install
npm run build
# 3. In Figma desktop:
# Plugins → Development → Import plugin from manifest
# Select: packages/figma-plugin/manifest.jsonRight-click any image on the web
Adds an "Optimize with OptiPic" option to the right-click context menu on any image. Compresses in the popup using Canvas API — no server, no upload.
Install in Chrome (unpacked)
# 1. Download packages/browser-extension/
# 2. Open Chrome and go to:
# chrome://extensions
# 3. Enable Developer mode (toggle top-right)
# 4. Click "Load unpacked"
# 5. Select the browser-extension/ directoryManifest V3
Built on the latest Chrome extension API — service worker, storage session API, and context menus.
CORS-aware
Cross-origin images are proxied through the service worker, so any image on the web can be fetched.
Format + quality controls
WebP, AVIF, JPEG, or PNG. Quality slider. Download in one click.
Private by design
Everything runs in the extension popup — no data ever leaves your browser.
Hosted API
A REST API for server-side workflows — image pipelines, CI/CD, backend services. Same compression quality as the web app. Launching in the next phase.
What the API will look like:
POST https://api.opti.pictures/v1/compress
Authorization: Bearer op_live_xxxxxxxxxxxx
Content-Type: application/json
{
"url": "https://example.com/photo.jpg",
"format": "webp",
"quality": 80,
"strip_exif": true
}{
"id": "req_01HXXXXXXXXXXXXX",
"url": "https://cdn.opti.pictures/out/01HXXX.webp",
"original_size": 524288,
"compressed_size": 187432,
"savings_percent": 64.3,
"format": "image/webp",
"width": 1920,
"height": 1080,
"expires_at": "2026-06-05T00:00:00Z"
}Join the waitlist
The API launches in Phase 15. Leave your email and you'll be the first to get access.
Request API accessZero-upload by design
Every opti.pictures tool — including the npm package and CLI — processes images locally. Browser tools use Canvas API and WebAssembly (jsquash). The Node.js package uses sharp. No image bytes are transmitted to any server.
GDPR-safe
No personal data processed on our infrastructure.
No rate limits
For client-side use, there is nothing to rate-limit.
Works offline
The web app is a full PWA. Works with no network.