{"id":"69167842adcd0bfee0251f33","title":"2025 11 06 Issue 78","path":"how-to/committee/release-notes/2025-11-06-issue-78","contentMarkdown":"# 6th November 2025 — Client-Side Image Auto-Resize [#78](https://github.com/nbarrett/ngx-ramblers/issues/78)\n## [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)\n\nMove image auto-resize from server to client on file drop, eliminating network round trips and timeouts on slow connections with intelligent WebP conversion.\n\n**Where to Find It**\n\n- **Image Upload**: All drag-and-drop image uploads across the site\n- **Gallery**: Album image uploads\n- **Content Management**: Carousel and image row uploads\n\n**Benefits**\n\n- **Faster Uploads**: No server round trip needed for newly dropped images\n- **No Timeouts**: Client-side processing prevents slow connection failures\n- **Optimal Format**: Automatic PNG → WebP conversion when beneficial\n- **Smart Quality**: Binary search finds optimal quality to fit within size limit\n- **Fallback Available**: Server-side resize remains for already-saved images\n\n**Technical Details**\n\nResize Strategy:\n- Target base64 length matching UI display cap with 2% safety margin\n- Grow width up to original dimensions\n- Binary-search quality to stay just under byte cap\n- Prefer WebP for PNG/transparency cases\n- Try JPEG when safe to approach size cap\n\nImplementation:\n- Canvas-based downscaling to max width\n- Iterative quality reduction to fit max bytes\n- Add IMAGE_WEBP type and fileTypeAttributes entry\n- Server-side resize endpoint retained for existing images","contentHtml":"<h1>6th November 2025 — Client-Side Image Auto-Resize <a href=\"https://github.com/nbarrett/ngx-ramblers/issues/78\">#78</a></h1>\n<h2><a href=\"https://github.com/nbarrett/ngx-ramblers/actions/runs/19137184184\">build 351</a> — <a href=\"https://github.com/nbarrett/ngx-ramblers/issues/78\">Refs: #78</a> — <a href=\"https://github.com/nbarrett/ngx-ramblers/commit/32057c3\">commit 32057c3</a></h2>\n<p>Move image auto-resize from server to client on file drop, eliminating network round trips and timeouts on slow connections with intelligent WebP conversion.</p>\n<p><strong>Where to Find It</strong></p>\n<ul>\n<li><strong>Image Upload</strong>: All drag-and-drop image uploads across the site</li>\n<li><strong>Gallery</strong>: Album image uploads</li>\n<li><strong>Content Management</strong>: Carousel and image row uploads</li>\n</ul>\n<p><strong>Benefits</strong></p>\n<ul>\n<li><strong>Faster Uploads</strong>: No server round trip needed for newly dropped images</li>\n<li><strong>No Timeouts</strong>: Client-side processing prevents slow connection failures</li>\n<li><strong>Optimal Format</strong>: Automatic PNG → WebP conversion when beneficial</li>\n<li><strong>Smart Quality</strong>: Binary search finds optimal quality to fit within size limit</li>\n<li><strong>Fallback Available</strong>: Server-side resize remains for already-saved images</li>\n</ul>\n<p><strong>Technical Details</strong></p>\n<p>Resize Strategy:</p>\n<ul>\n<li>Target base64 length matching UI display cap with 2% safety margin</li>\n<li>Grow width up to original dimensions</li>\n<li>Binary-search quality to stay just under byte cap</li>\n<li>Prefer WebP for PNG/transparency cases</li>\n<li>Try JPEG when safe to approach size cap</li>\n</ul>\n<p>Implementation:</p>\n<ul>\n<li>Canvas-based downscaling to max width</li>\n<li>Iterative quality reduction to fit max bytes</li>\n<li>Add IMAGE_WEBP type and fileTypeAttributes entry</li>\n<li>Server-side resize endpoint retained for existing images</li>\n</ul>\n"}