Client-Side Image Resizing: Faster Uploads, Less Bandwidth

I've always found it frustrating when publishing tools make me manage image sizes. You take a photo on your phone, it's massive, and suddenly you're stuck juggling Photoshop, compression tools, or online services just to post it. That shouldn't be necessary.

So when building Jottings, I decided to handle this problem for you, right in your browser. No extra steps, no external tools—just upload and forget.

The Problem We Solved

Most microblogging platforms ask you to optimize images yourself. Some accept uploads at any size and do server-side processing (which costs money and adds latency). Others put the burden on you: resize first, then upload.

Meanwhile, your phone camera takes 12MB photos. Your screenshot tool produces massive files. And your browser dutifully uploads all of it, wasting your time and consuming bandwidth—whether it's yours or the platform's.

We took a different approach: optimize before upload.

How Client-Side Resizing Works

When you upload an image to Jottings, your browser handles everything:

  1. Smart Dimension Scaling: We resize the longest dimension down to 1200px maximum. That's perfect for Retina displays paired with our 600px content container—crisp at 2x pixel density, no wasted megabytes.

  2. Format Handling: We detect file types and handle them intelligently:

    • JPEG/WebP: Compressed to 85% and 80% quality respectively (imperceptible to human eyes)
    • PNG: Lossless compression (for screenshots and graphics where quality matters)
    • Animated GIFs/WebP: Passed through unchanged (we won't destroy your animations)
  3. Size Limits: We cap uploads at 15MB for animated media. Most images? Usually 200-500KB after optimization.

  4. Real-Time Feedback: You see the size reduction as it happens. A 12MB phone photo becomes 400KB—that's 97% smaller. You know immediately that you're good to go.

Why This Matters

Speed: Your upload completes in seconds, not minutes. We've all been there—hitting that publish button and watching the spinner for what feels like forever.

Cost: Smaller files mean less storage, less bandwidth, lower infrastructure costs. We pass those savings along by keeping Jottings free and ad-free.

Privacy: Everything happens locally in your browser. Your original image never leaves your device. We never see the full-resolution photo, and you're not sending gigabytes of data across the internet.

Consistency: Because every image is optimized the same way, your site looks polished. No random huge images breaking your layout, no accidental 20MB uploads causing slow load times for your readers.

The Technical Details

Under the hood, we use the Canvas API to handle resizing and compression. It's fast (happens in milliseconds), doesn't require any plugins, and works offline. Once we've optimized your image, we send it to Cloudflare R2 for storage and delivery via our CDN.

The entire flow is transparent to you. Upload, done. No "processing" step, no waiting around.

Special Cases

What about animations? Animated GIFs and WebP files larger than 15MB are rejected (with a friendly message). Most animated content doesn't need to be larger anyway. If you have a genuine use case, let us know—we're open to adjusting this.

What if I want the original quality? Honestly? For a microblog, the optimized version looks identical on any device. But if you need archival quality, keep your originals locally. Jottings is about the story, not storage.

Mobile photos are huge—how much will you actually compress? A typical iPhone photo (6MB) becomes 300-500KB. Android? Similar story. It's dramatic, but that's the point—client-side optimization is powerful.

The Bigger Picture

Image optimization is one of those technical problems that shouldn't require user effort. Like password hashing or SSL certificates, it should just work behind the scenes.

When I designed Jottings, I wanted to remove friction everywhere. Write what you're thinking, hit publish, and move on. If you're including a photo, same thing—upload it, and we'll make sure it's perfect.

This is the kind of detail that makes platforms feel premium. Not flashy features, but thoughtful engineering that respects your time.

Try It Yourself

Next time you're crafting a post with a photo, notice how fast the upload completes. That's no accident—that's client-side resizing doing its job.

If you haven't started your microblog yet, create your Jottings site and give it a try. Upload a few photos, see how quick it is, and focus on what actually matters: your writing.

Your bandwidth (and our infrastructure) will thank you.

—Vishal