fix: update compression to be more aggressive

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

compressImageInBrowser in image.ts updated for more aggressive image compression with new default settings and optional configuration.

• Behavior:
  • compressImageInBrowser in image.ts now uses more aggressive default compression options: maxSizeMB reduced to 0.2, maxWidthOrHeight reduced to 512, and quality set to 0.6.
  • Automatically compresses images with stricter limits for faster uploads and reduced bandwidth.
• Configuration:
  • Added optional compressionOptions parameter to compressImageInBrowser for flexible tuning of compression settings.

^{This description was created by for cbc3f98. You can customize this summary. It will automatically update as commits are pushed.}

---

Summary by CodeRabbit

• New Features
  • Improved image handling in chat: dropped or pasted images are now automatically compressed with stricter limits on size and dimensions for faster uploads and reduced bandwidth.
  • Delivers more consistent image quality while keeping files lightweight, improving performance and responsiveness in the chat panel.
• Chores
  • Added configuration support for image compression, enabling flexible tuning of size, dimensions, and quality for future adjustments without impacting existing workflows.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ready	Preview	Comment	Oct 6, 2025 7:19pm
web	Ready	Preview	Comment	Oct 6, 2025 7:19pm

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Added optional compression options to the in-browser image compression utility and updated the chat input to call it with specific constraints (size, dimensions, quality).

Changes

Cohort / File(s)	Summary
Image compression utility packages/utility/src/image.ts	compressImageInBrowser now accepts an optional compressionOptions object (maxSizeMB, maxWidthOrHeight, quality). Merges provided options with previous defaults (2 MB, 2048 px). Function signature updated accordingly; processing and error handling unchanged.
Web chat input integration apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-input/index.tsx	Updated calls to compressImageInBrowser to pass explicit options: maxSizeMB: 0.2, maxWidthOrHeight: 512, quality: 0.6.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant CI as ChatInput (Web)
  participant IU as Image Utility

  U->>CI: Drop/Paste image file
  CI->>IU: compressImageInBrowser(file, {maxSizeMB:0.2, maxWidthOrHeight:512, quality:0.6})
  Note right of IU: Merge options with defaults<br/>Perform compression
  IU-->>CI: Compressed image (Blob/File) or error
  CI-->>U: Proceed with upload/send or show error

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A nibble of bytes, a squeeze so slight,
I thump my paws—your pixels light!
From lofty megs to tidy crumbs,
I crunch and hush the heavy hums.
Hippity-hop, your images slim—
Pack light, ship fast, now trim and prim.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description includes the required template headings but all sections are left empty without any summary of changes, related issue links, type of change selections, or testing details, making it largely incomplete.	Please populate each template section by writing a concise description of the changes, linking related issue(s), selecting the appropriate type(s) of change, outlining the tests or steps used to verify your work, and adding screenshots or additional context where applicable.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly states the primary change to the code, namely making the image compression more aggressive, and does so in a concise format without extraneous details or noise.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/aggressive-image-compression

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[graphite-app]

There appears to be a discrepancy between the PR description and implementation. The PR description states that the default compression values should be:

• maxSizeMB: 2
• maxWidthOrHeight: 2048
• quality: 0.8

However, the implementation sets more aggressive defaults:

• maxSizeMB: 0.2
• maxWidthOrHeight: 512
• quality: 0.6

These more aggressive defaults will result in smaller file sizes but potentially lower image quality than what was specified in the PR description. Consider aligning the implementation with the documented defaults to ensure consistent behavior.

Suggested change

	maxSizeMB: compressionOptions?.maxSizeMB ?? 0.2,
	maxWidthOrHeight: compressionOptions?.maxWidthOrHeight ?? 512,
	quality: compressionOptions?.quality ?? 0.6,
	maxSizeMB: compressionOptions?.maxSizeMB ?? 2,
	maxWidthOrHeight: compressionOptions?.maxWidthOrHeight ?? 2048,
	quality: compressionOptions?.quality ?? 0.8,

Spotted by Diamond



Is this helpful? React 👍 or 👎 to let us know.