# 6th November 2025 — Client-Side Image Auto-Resize [#78](https://github.com/nbarrett/ngx-ramblers/issues/78)
## [build 351](https://github.com/nbarrett/ngx-ramblers/actions/runs/19137184184) — [Refs: #78](https://github.com/nbarrett/ngx-ramblers/issues/78) — [commit 32057c3](https://github.com/nbarrett/ngx-ramblers/commit/32057c3)

Move image auto-resize from server to client on file drop, eliminating network round trips and timeouts on slow connections with intelligent WebP conversion.

**Where to Find It**

- **Image Upload**: All drag-and-drop image uploads across the site
- **Gallery**: Album image uploads
- **Content Management**: Carousel and image row uploads

**Benefits**

- **Faster Uploads**: No server round trip needed for newly dropped images
- **No Timeouts**: Client-side processing prevents slow connection failures
- **Optimal Format**: Automatic PNG → WebP conversion when beneficial
- **Smart Quality**: Binary search finds optimal quality to fit within size limit
- **Fallback Available**: Server-side resize remains for already-saved images

**Technical Details**

Resize Strategy:
- Target base64 length matching UI display cap with 2% safety margin
- Grow width up to original dimensions
- Binary-search quality to stay just under byte cap
- Prefer WebP for PNG/transparency cases
- Try JPEG when safe to approach size cap

Implementation:
- Canvas-based downscaling to max width
- Iterative quality reduction to fit max bytes
- Add IMAGE_WEBP type and fileTypeAttributes entry
- Server-side resize endpoint retained for existing images