November 2, 2025
When building AI-powered applications that handle image uploads from mobile devices, you'll quickly run into a constraint with Claude's API: the 5 MB limit. Here's the problem I encountered and how I solved it while building zurzai.com, a web app for tracking food, exercise, mindfulness, and hydration.
The Problem: Base64 Encoding Bloat
The Claude API has a 5 MB limit for image data. This seems reasonable at first—until you realize that images must be uploaded as base64-encoded data.
A typical iPhone photo might be 4.2 MB as a raw file. But once you base64 encode it, the size increases by approximately 33%. That 4.2 MB image suddenly becomes over 5.6 MB—too large for Claude to accept.
The Solution: Pre-resize to 1568 Pixels
The fix is surprisingly simple: resize your images so the longest edge is no longer than 1568 pixels before uploading.
Here's the key insight: Claude does this resizing internally anyway. When you pre-process the image yourself, you're simply doing what Claude would do on its end—except you avoid the upload failure entirely.
Why v0.dev Didn't Help (But Claude Does)
I was working on this feature in v0.dev, and I have to say, the AI should have caught this issue but didn't. Instead, I got generic gateway timeout errors. It took digging through logs to see that the image was too large, then consulting the Claude documentation to understand how Claude handles image preprocessing.
That said, once I gave v0.dev explicit instructions about the 1568 pixel limit and the base64 encoding issue, it handled the implementation just fine.
Watch Out for EXIF Orientation Data
Another important consideration: images sometimes store their orientation in EXIF metadata rather than rotating the actual image data. If orientation matters for your application (and it usually does for food photos), you need to read and apply the EXIF orientation data during your preprocessing step. Otherwise, your images might appear sideways or upside down even though they looked correct on the user's device.
The Result: Reliable Food Identification
Once I implemented dynamic image resizing and proper EXIF orientation handling before uploading directly to the Anthropic API, the results were excellent. Claude now identifies food items very reliably in my app, making the food tracking feature work seamlessly.
Key Takeaway
If you're building mobile applications that send images to Claude:
- Always resize images to a maximum of 1568 pixels on the longest edge
- Do this before base64 encoding
- Handle EXIF orientation data to ensure images display correctly
- This prevents timeout errors and failed uploads
- Your users get a faster, more reliable experience
The lesson here: understanding the API's preprocessing steps can save you significant debugging time.
← Back to Blog