Automatic Image Resizing - Never Get “File Too Large” Errors Again!

💡 Updates and Feedback Release Notes
1

:triangular_ruler: Automatic Image Resizing - Never Get “File Too Large” Errors Again!

Hey everyone! Just shipped a major UX improvement for pattern creation - automatic client-side image resizing.

The Problem

We’ve all been there: you take a gorgeous photo of your latest tie with your phone, go to upload it, and BAM - “File too large. Maximum 10MB allowed.” Then you have to find some online image resizer, download it, re-upload… frustrating!

Modern phone cameras create HUGE files (often 15-30MB), way bigger than needed for web display.

The Solution

We now automatically resize images before uploading. No more errors, no more manual resizing, no more friction.

What You’ll See

When you select images to upload:

  1. “Resizing 3 images… 2 of 3 complete” - happens in 1-2 seconds
  2. “Uploading 3 images… 67%” - real upload progress with actual percentage

That’s it! The whole process is seamless.

Technical Details (for the nerds)

Resizing Logic:

  • Max dimension: 2000px (perfect for web, still looks amazing)
  • Quality: 90% (you can’t tell the difference from original)
  • Only resizes if needed (>10MB or >2000px)
  • Uses HTML5 Canvas API (works on all browsers, desktop + mobile)

Real-World Examples:

  • :mobile_phone: iPhone 15 Pro photo: 6000x4000, 18MB → 2000x1333, 1.2MB (15x smaller!)
  • :camera: DSLR image: 4000x3000, 12MB → 2000x1500, 900KB
  • :framed_picture: Already-optimized image: 800x600, 200KB → No change (why waste CPU?)

Why This Matters:

  • Faster uploads: 10-20x smaller files = much faster on slow connections
  • Better mobile UX: Phone photos just work now
  • Saves bandwidth: Great for users on limited data plans
  • Industry standard: Instagram, Discord, Twitter, WhatsApp all do this

Paired with Real Upload Progress

This pairs perfectly with yesterday’s real upload progress feature. Now you get:

  • Accurate file size reduction (see it in browser console: “:triangular_ruler: Resized photo.jpg: 18.2MB → 1.2MB”)
  • Real byte-level progress during upload
  • Total transparency into what’s happening

Error Handling

If resizing fails for any reason (shouldn’t happen, but you never know):

  • Falls back to original file
  • Still attempts upload
  • No data loss, no crashes

Performance

Desktop: Instant (even multiple large images)
Mobile: 1-2 seconds per large image (barely noticeable)

The resize happens locally on your device using your GPU - doesn’t touch our servers until the actual upload.

This is best practice in modern web apps. You should never have to think about file sizes when uploading photos - the app should handle it for you. That’s exactly what we’re doing now.

Let me know if you notice any issues, but this should be a pure quality-of-life improvement! :tada: