LotusGuild/cinny
3
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

"Compress image before uploading" turns transparent WebP/GIF backgrounds black and animated GIF/WebP into a still JPEG #331

New Issue
Closed
opened 2026-10-05 23:20:22 -04:00 by jared · 0 comments
jared commented 2026-10-05 23:20:22 -04:00
Owner
Copy Link
Copy Source

The per-file Compress image before uploading switch on the upload card (UploadCardRenderer.tsx; src/app/utils/imageCompression.ts) is offered for every raster type except SVG. It re-encodes through a canvas to JPEG. It skips PNG to protect transparency, but nothing else, and the code itself says "GIF animation is lost on canvas".

Measured (the real compressImage in the browser):

transparent 64×64 WebP with a red square → image/jpeg; transparent corner became rgba(0,0,0,255) (black), centre red
image/png                                → skipped (✔)
isCompressible('image/gif')              → true

So turning the switch on for a transparent WebP sticker, logo or screenshot gives a black background. For an animated GIF or animated WebP, the result is a single still frame. The card only shows the new size, so the user finds out after sending.

Fix:

  • Hide the switch, or make compressImage return null, for image/gif, image/apng and animated WebP (check the ANIM chunk).
  • For WebP (and any type) with alpha, either skip it or composite onto white before toBlob('image/jpeg'). Better still, encode to WebP, which keeps alpha, where canvas.toBlob('image/webp') is supported.
  • Add unit cases: transparent WebP keeps alpha or is skipped; GIF isn't compressible.

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

The per-file **Compress image before uploading** switch on the upload card (`UploadCardRenderer.tsx`; `src/app/utils/imageCompression.ts`) is offered for **every raster type except SVG**. It re-encodes through a canvas to JPEG. It skips PNG to protect transparency, but nothing else, and the code itself says *"GIF animation is lost on canvas"*. **Measured** (the real `compressImage` in the browser): ``` transparent 64×64 WebP with a red square → image/jpeg; transparent corner became rgba(0,0,0,255) (black), centre red image/png → skipped (✔) isCompressible('image/gif') → true ``` So turning the switch on for a transparent WebP sticker, logo or screenshot gives a **black background**. For an **animated GIF or animated WebP**, the result is a single still frame. The card only shows the new size, so the user finds out after sending. **Fix:** - Hide the switch, or make `compressImage` return null, for `image/gif`, `image/apng` and animated WebP (check the `ANIM` chunk). - For WebP (and any type) with alpha, either skip it or composite onto white before `toBlob('image/jpeg')`. Better still, encode to WebP, which keeps alpha, where `canvas.toBlob('image/webp')` is supported. - Add unit cases: transparent WebP keeps alpha or is skipped; GIF isn't compressible. --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
jared added the bugpriority: lowarea: media labels 2026-10-05 23:20:22 -04:00
jared closed this issue 2026-10-18 07:23:10 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels area: media bug priority: low
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#331