Auto-convert uploaded images to WebP in admin panel

[Saackboi]

When the admin panel is implemented (see Phase 5 of Issue #81), every image uploaded through it must be automatically converted to WebP before being stored on the server, regardless of the original format (JPG, PNG, GIF, etc.). This eliminates the risk of heavy unoptimized images accumulating on the server and keeps the portfolio lightweight by default.

Architecture context: Firebase is used only as the data layer (Firestore stores document references like imageUrl: "https://server.com/img/cel.webp"). Images themselves are hosted on the project owner's own server. Firebase never touches image files.

The conversion happens client-side before upload — using the Canvas API or a lightweight library — so no server-side processing is needed. This keeps the pipeline simple, free, and fast.

---

Scope

• Client-side conversion: Use the browser Canvas API (or a library like browser-image-compression) to convert any uploaded image to WebP format before sending it to the server
• Automatic resize: Downscale images to a max width of 1200px (or configurable) — portfolio screenshots don't need to be larger than that
• Quality control: Default WebP quality at 80 (configurable), balancing visual fidelity and file size
• Multiple sizes (optional): Generate thumbnail (400px) and full (1200px) versions on upload for responsive <img srcset>
• Preview before confirm: Show the user the converted image and its final size before finalizing the upload, so they can see the savings
• Reject oversized files: Block uploads over a configurable limit (e.g., 5MB pre-conversion) to prevent abuse
• Format feedback: Display the original format, converted format, and size reduction percentage to the user after conversion
• Store path in Firestore: After upload, save the image URL/path in the Firestore project document — not the image itself

Constraints

• Must work entirely in the browser — no server/cloud function processing
• Must handle: JPG, JPEG, PNG, GIF, BMP, TIFF → WebP
• Fallback: if the browser doesn't support WebP encoding (very rare in modern browsers), fall back to compressed JPEG at quality 80
• The original file is never stored — only the optimized version on the server