I have a thing about uploading files to random websites. Call it paranoia, call it good practice — either way, I built a bunch of image tools that work 100% in your browser. No server. No account. No "processing on our end."
Here's what's available and how they work under the hood.
Image Compressor
devtools-site-delta.vercel.app/image-compress
This one gets the most use from me personally. I compress screenshots and blog images before uploading them anywhere. The tool uses the Canvas API to re-encode images at a lower quality setting:
function compressImage(file, quality = 0.7) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(resolve, 'image/jpeg', quality);
};
img.src = URL.createObjectURL(file);
});
}
The quality parameter (0 to 1) controls the compression level. At 0.7, you usually get 60-80% file size reduction with barely visible quality loss. The tool gives you a slider so you can find the sweet spot for each image.
What I like about this approach: the Canvas API is built into every modern browser. No external libraries needed. Your image gets drawn onto a canvas element, then re-exported as a blob with your chosen quality.
Image Resizer
devtools-site-delta.vercel.app/image-resize
Same Canvas API approach, different use case. Need a 1200x630 image for an Open Graph tag? Need to scale down a 4000px photo for your blog? Punch in the dimensions, done.
The resizer preserves aspect ratio by default (you can unlock it if you want exact dimensions). It also shows you the original and new file sizes side by side so you know exactly what you're getting.
function resizeImage(file, maxWidth, maxHeight) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
let { width, height } = img;
// Maintain aspect ratio
if (width > maxWidth) {
height = (height * maxWidth) / width;
width = maxWidth;
}
if (height > maxHeight) {
width = (width * maxHeight) / height;
height = maxHeight;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
canvas.toBlob(resolve, file.type);
};
img.src = URL.createObjectURL(file);
});
}
Image Converter
devtools-site-delta.vercel.app/image-converter
PNG to JPG. JPG to WebP. WebP to PNG. Whatever you need.
The trick here is that canvas.toBlob() accepts a MIME type as the second argument. Want WebP? Pass 'image/webp'. Want JPEG? 'image/jpeg'. The browser handles the encoding natively.
This is especially useful for converting to WebP. Most sites should be serving WebP images (they're typically 25-35% smaller than equivalent JPEGs), but a lot of design tools still export PNG or JPEG by default.
Background Remover
devtools-site-delta.vercel.app/background-remover
This is the flashiest one. Drop in a photo, get back the subject with a transparent background. It uses a pre-trained ML model that runs in the browser via ONNX Runtime or TensorFlow.js.
The model downloads once and then runs locally. Your images never leave your machine. It works surprisingly well for product photos, headshots, and simple compositions. Complex scenes with hair or translucent objects can be trickier, but for most everyday use cases, it gets the job done.
Image Cropper
devtools-site-delta.vercel.app/image-cropper
Visual cropping with preset aspect ratios (1:1 for Instagram, 16:9 for YouTube thumbnails, 4:3 for presentations) or freeform. Drag the crop area, preview the result, download. Nothing fancy, just works.
Extract Colors from Images
devtools-site-delta.vercel.app/image-colors
This one's handy for design work. Upload an image and it extracts the dominant color palette. I use it when I'm building a landing page and want colors that match a hero image. It reads pixel data from the canvas and clusters similar colors together.
Why Browser-Based?
Honestly? Three reasons.
1. Privacy. Your images might contain GPS metadata, sensitive content, or just stuff you don't want on someone's server. Client-side processing means the data stays on your device.
2. Speed. No upload time, no waiting for server processing, no download time. For a 5MB image, that can save 10-15 seconds compared to a server-based tool.
3. No limits. No file size caps, no "5 free conversions per day," no watermarks. Process as many images as your browser can handle.
Part of a Bigger Toolkit
These image tools are part of devtools-site-delta.vercel.app, where I've built 500+ free tools for developers and anyone who's tired of ad-heavy utility sites. PDF tools, JSON formatters, text utilities, color pickers, and a lot more.
Everything's free. No sign-ups. Bookmark whatever you use regularly.
Links: