A high-performance image optimization toolkit.
This toolkit provides professional-grade image optimization (resizing and JPEG/WebP encoding) that runs entirely on the client side or in a native build-time environment.
@think-grid-labs/snapbolt: The core library containing React hooks and WASM bindings.@think-grid-labs/snapbolt-cli: Native CLI for bulk optimization and WASM asset synchronization.
- Butter-Smooth Scrolling: By shrinking images to the exact size needed in the UI, we drastically reduce browser RAM usage, preventing "jank" and crashes on mobile devices.
- Ultra-Fast Uploads: Optimize images before they leave the user's device. Reduces bandwidth consumption and speeds up upload times by up to 90%.
- Zero Server Overhead: Shift the heavy lifting of image processing to the client side. No more expensive cloud-functions for basic resizing.
- Privacy First: Process sensitive images locally without ever sending unoptimized high-res data to your servers.
JPEG, JPG, PNG, WebP (GIF/SVG/TIFF skipped automatically).
npm install @think-grid-labs/snapbolt
Because WASM binaries are served as separate files, you must ensure the .wasm file is available in your project's public (or static) folder so the browser can download it.
Use our CLI to automatically find and copy the binary from node_modules to your target directory:
npx @think-grid-labs/snapbolt-cli sync ./public
Tip: Add this to your postinstall script in package.json to keep it synchronized automatically.
If you prefer not to use the CLI, manually copy the file:
- Source:
node_modules/@think-grid-labs/snapbolt/pkg/snapbolt_bg.wasm - Destination:
your-project/public/snapbolt_bg.wasm
If you are using Next.js and see Module not found errors:
- Transpile the Package:
Update
next.config.jsornext.config.ts:const nextConfig = { transpilePackages: ['@think-grid-labs/snapbolt'], // ... } - Sync WASM: Ensure the
.wasmfile is in yourpublicfolder (see above).
The simplest way to optimize images on the fly. Pass a URL or a Blob.
import { useImageOptimizer } from '@think-grid-labs/snapbolt';
const SmartImage = ({ src }) => {
// src can be a URL string or a File/Blob
// quality: 0-100 (default: 75)
// maxWidth: target width in pixels (default: 300)
const { optimizedUrl, loading, error } = useImageOptimizer(src, 75, 300);
if (loading) return <div className="spinner" />;
return <img src={optimizedUrl || src} alt="Optimized" />;
};
Optimize a file on the client side before sending it to your server to save bandwidth and storage.
import { useImageOptimizer } from '@think-grid-labs/snapbolt';
const UploadForm = () => {
const [file, setFile] = useState<File | null>(null);
const { optimizedBlob, loading } = useImageOptimizer(file, 80, 1200);
const handleUpload = async () => {
if (!optimizedBlob) return;
const formData = new FormData();
// Send the tiny optimized version instead of the massive original!
formData.append('image', optimizedBlob, 'image.jpg');
await fetch('/api/upload', { method: 'POST', body: formData });
};
return (
<div>
<input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)} />
<button onClick={handleUpload} disabled={loading || !optimizedBlob}>
{loading ? 'Optimizing...' : 'Upload Tiny Image'}
</button>
</div>
);
};
For custom integrations or non-React environments.
import init, { optimize_image_sync } from '@think-grid-labs/snapbolt/browser';
async function optimize(bytes) {
// Ensure the WASM is initialized (path relative to your public root)
await init('/snapbolt_bg.wasm');
// Optimize: returns a Uint8Array
const optimizedData = optimize_image_sync(bytes, 75, 300);
return new Blob([optimizedData], { type: 'image/jpeg' });
}
Resize high-res images (e.g., 5MB Avatars, KYC docs) on the client before uploading.
- Benefit: 99% bandwidth saving on uploads. Zero server CPU usage.
Perfect for Web3 DApps, IPFS, or PWAs where you don't have a centralized backend to optimize images.
- Benefit: Professional optimization running entirely in the browser.
Instantly generate highly optimized blob: URLs for CMS or blog editors while the real upload happens in the background.
- Benefit: The UI feels instant and responsive.
Process sensitive images locally (Medical, Secure Messaging) without ever sending unencrypted high-res data to a third-party cloud.
Downscale 4K images to 1080p WebP before display or upload to save battery and data for users on spotty connections.
Native tool for high-speed local image processing.
Recursively scan and shrink images in your local public folder before deployment:
npx @think-grid-labs/snapbolt-cli scan ./public
Synchronize the required WASM binaries to your web project:
npx @think-grid-labs/snapbolt-cli sync ./public
If your images come from a CDN/S3 and are not optimizing:
- Check Headers: The server MUST return
Access-Control-Allow-Origin. - Enable Mode: Pass
{ crossOrigin: 'anonymous' }touseImageOptimizer.
If you see Module not found:
- Add
transpilePackages: ['@think-grid-labs/snapbolt']tonext.config.js.
We are committed to making @think-grid-labs/snapbolt the gold standard for decentralized image optimization.
- SIMD Support: Optimize WASM binaries with SIMD for 2x faster processing on modern browsers.
- Blur-up Helpers: Generate tiny (4x4) Base64 placeholders automatically for "Instant-Load" UI patterns.
- Automatic Quality: Content-aware optimization that keeps text sharp while compressing textures harder.
- Advanced Config Props: Support for passing custom
image-wasmconfig directly to hooks and components.
- AVIF Encoding: Implementation of AVIF for even better compression ratios.
- Smart Cropping: AI-powered saliency detection to ensure the most important part of the subject is always centered.
- Web Worker Orchestration: Offload processing to background threads automatically to keep the UI at 60fps.
- Plugin System: Watermarking, custom filters, and edge-function templates.
- Framework Natives: Deep integration with Next.js Server Components and Vite build-time hooks.
- Video Processing: Client-side video thumbnail extraction and lightweight transcoding (WebCodecs).
- Edge Deployment: Pre-built templates for Cloudflare Workers and Vercel Edge.
MIT