Perf/optimize images before upload

[AmzBG]

Description

• Optimize JPEG, PNG, and WebP images in the browser before uploading them.
• Convert optimized static images to WebP while progressively reducing dimensions and quality to produce a smaller payload.
• Apply purpose-specific limits for profile crops, original profile pictures, project logos, and project screenshots.
• Preserve GIF animation and unsupported image formats by uploading those files unchanged.
• Fall back to the original file whenever browser decoding or canvas encoding fails, or when optimization does not produce a smaller result.
• Clarify the project screenshot upload copy to explain optimization and the final 5 MB limit.

Link to issue or ticket

• Upstream change: perf: optimize images before upload chrisshaddad/bootcamp-starter#236

Steps to QA

1. Upload a large JPEG or PNG profile picture and confirm the cropped and original files upload successfully.
2. Verify the resulting upload request uses smaller WebP files when optimization reduces their size.
3. Upload a large project logo and confirm it is optimized and saved normally.
4. Upload a project screenshot and confirm it is optimized before the request and remains below the final 5 MB limit when possible.
5. Upload an animated GIF and confirm it is sent unchanged and remains animated.
6. Upload a small image that would grow after WebP conversion and confirm the original file is used.
7. Confirm a decoding or canvas failure falls back to the original file without blocking the upload.

Validation completed:

• npx turbo run lint
• npx turbo run check-types
• npm run format:check

Screenshots

Found here: chrisshaddad/bootcamp-starter#236