feat: image optimization — client-side resize + server-side thumbnails

Avatars/banners now resize to max 512px/1920px and convert to WebP before
upload (zero server cost). Chat image uploads generate an 800px-wide WebP
thumbnail via Sharp; the feed shows the thumbnail, click opens the full-res
original. Adds lazy loading to avatars. Federation-compatible: remote
instances without this feature fall back gracefully.

packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx

@@ -110,7 +110,7 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
     setIconPreview(previewUrl);
     setCropSrc(null);
 
-    const file = new File([blob], 'icon.png', { type: 'image/png' });
+    const file = new File([blob], 'icon.webp', { type: blob.type || 'image/webp' });
     setUploadingIcon(true);
     try {
       const spaceApi = getApiForOrigin(space._instanceOrigin);
@@ -148,7 +148,7 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
     setBannerPreview(previewUrl);
     setBannerCropSrc(null);
 
-    const file = new File([blob], 'banner.png', { type: 'image/png' });
+    const file = new File([blob], 'banner.webp', { type: blob.type || 'image/webp' });
     setUploadingBanner(true);
     try {
       const spaceApi = getApiForOrigin(space._instanceOrigin);
@@ -601,6 +601,7 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
         title="Crop Space Icon"
         cropShape="round"
         aspectRatio={1}
+        maxOutputDimension={512}
       />
 
       <ImageCropModal
@@ -611,6 +612,7 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
         title="Crop Space Banner"
         cropShape="rect"
         aspectRatio={16 / 9}
+        maxOutputDimension={1920}
       />
     </>
   );