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/chat/Message.tsx

@@ -263,11 +263,14 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
                 {message.attachments.map((att) => {
                   const isImage = att.mimetype.startsWith('image/');
                   const attUrl = att.filename.startsWith('http') ? att.filename : `/api/uploads/${att.filename}`;
+                  const thumbUrl = att.thumbnailFilename
+                    ? (att.thumbnailFilename.startsWith('http') ? att.thumbnailFilename : `/api/uploads/${att.thumbnailFilename}`)
+                    : null;
                   if (isImage) {
                     return (
                       <div key={att.id} className="max-w-fit mt-1 rounded-lg overflow-hidden border border-white/[0.06]">
                         <img
-                          src={attUrl}
+                          src={thumbUrl ?? attUrl}
                           alt={att.originalName}
                           className="max-w-full max-h-[350px] object-contain cursor-pointer hover:brightness-95 transition-all"
                           onClick={() => openImagePreview(attUrl)}

packages/web/src/components/modals/settingsPanels/AccountPanel.tsx

@@ -139,7 +139,7 @@ export function AccountPanel() {
     const previewUrl = URL.createObjectURL(blob);
     setAvatarPreview(previewUrl);
     setAvatarCropSrc(null);
-    const file = new File([blob], 'avatar.png', { type: 'image/png' });
+    const file = new File([blob], 'avatar.webp', { type: blob.type || 'image/webp' });
     setUploadingAvatar(true);
     try {
       const attachment = await api.uploads.upload(file);
@@ -158,7 +158,7 @@ export function AccountPanel() {
     const previewUrl = URL.createObjectURL(blob);
     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 attachment = await api.uploads.upload(file);
@@ -737,6 +737,7 @@ export function AccountPanel() {
         title="Crop Avatar"
         cropShape="round"
         aspectRatio={1}
+        maxOutputDimension={512}
       />
       <ImageCropModal
         isOpen={bannerCropSrc !== null}
@@ -746,6 +747,7 @@ export function AccountPanel() {
         title="Crop Banner"
         cropShape="rect"
         aspectRatio={3}
+        maxOutputDimension={1920}
       />
 
       <DeleteAccountModal

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}
       />
     </>
   );

packages/web/src/components/ui/Avatar.tsx

@@ -105,6 +105,7 @@ export function Avatar({ src, name, size = 40, status, className = '', onClick,
             src={(src.startsWith('http') || src.startsWith('blob:') || src.startsWith('data:'))
               ? src : `/api/uploads/${src}`}
             alt={name}
+            loading="lazy"
             className="w-full h-full rounded-full object-cover"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none';

packages/web/src/components/ui/ImageCropModal.tsx

@@ -11,6 +11,8 @@ interface ImageCropModalProps {
   title?: string;
   aspectRatio?: number;
   cropShape?: 'round' | 'rect';
+  maxOutputDimension?: number;
+  outputType?: string;
 }
 
 export function ImageCropModal({
@@ -21,6 +23,8 @@ export function ImageCropModal({
   title = 'Crop Image',
   aspectRatio = 1,
   cropShape = 'round',
+  maxOutputDimension,
+  outputType,
 }: ImageCropModalProps) {
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
@@ -35,7 +39,10 @@ export function ImageCropModal({
     if (!croppedAreaPixels) return;
     setIsProcessing(true);
     try {
-      const blob = await cropImage(imageSrc, croppedAreaPixels);
+      const blob = await cropImage(imageSrc, croppedAreaPixels, outputType ?? 'image/webp', {
+        maxDimension: maxOutputDimension,
+        outputType,
+      });
       onCropComplete(blob);
       onClose();
     } catch {