devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jannis Braun
2026-03-13 16:44:14 +01:00
parent 12b450b7b9
commit 3e97c2b0f5
19 changed files with 449 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/Message.tsx
+4 -1
View File
@@ -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
+4 -2
View File
@@ -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
+4 -2
View File
@@ -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
+1
View File
@@ -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
+8 -1
View File
@@ -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 {
packages/web/src/utils/assetUrls.ts
+7 -1
View File
@@ -43,7 +43,7 @@ export function normalizeUserAssets<T extends { avatar?: string | null; banner?:
* Rewrite user.avatar and attachment filenames on a message for remote origins.
* Also normalizes nested replyTo message assets. Mutates in-place.
*/
export function normalizeMessageAssets<T extends { user: { avatar?: string | null }; attachments?: { filename: string }[]; replyTo?: { user: { avatar?: string | null }; attachments?: { filename: string }[] } | null }>(
export function normalizeMessageAssets<T extends { user: { avatar?: string | null }; attachments?: { filename: string; thumbnailFilename?: string | null }[]; replyTo?: { user: { avatar?: string | null }; attachments?: { filename: string; thumbnailFilename?: string | null }[] } | null }>(
message: T,
origin: string,
): T {
@@ -52,6 +52,9 @@ export function normalizeMessageAssets<T extends { user: { avatar?: string | nul
if (message.attachments) {
for (const att of message.attachments) {
att.filename = resolveAssetUrl(att.filename, origin) ?? att.filename;
if (att.thumbnailFilename) {
att.thumbnailFilename = resolveAssetUrl(att.thumbnailFilename, origin) ?? att.thumbnailFilename;
}
}
}
// Normalize reply-to message assets (remote replies have relative URLs)
@@ -60,6 +63,9 @@ export function normalizeMessageAssets<T extends { user: { avatar?: string | nul
if (message.replyTo.attachments) {
for (const att of message.replyTo.attachments) {
att.filename = resolveAssetUrl(att.filename, origin) ?? att.filename;
if (att.thumbnailFilename) {
att.thumbnailFilename = resolveAssetUrl(att.thumbnailFilename, origin) ?? att.thumbnailFilename;
}
}
}
}
packages/web/src/utils/cropImage.ts
+59 -11
View File
@@ -5,20 +5,35 @@ export interface PixelCrop {
height: number;
}
export function cropImage(imageSrc: string, pixelCrop: PixelCrop, outputType = 'image/png'): Promise<Blob> {
interface CropOptions {
maxDimension?: number;
quality?: number;
outputType?: string;
}
export function cropImage(
imageSrc: string,
pixelCrop: PixelCrop,
outputType = 'image/webp',
options: CropOptions = {},
): Promise<Blob> {
const { maxDimension, quality = 0.85 } = options;
const finalType = options.outputType ?? outputType;
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = pixelCrop.width;
canvas.height = pixelCrop.height;
const ctx = canvas.getContext('2d');
if (!ctx) {
// Step 1: Draw the crop region at original size
const cropCanvas = document.createElement('canvas');
cropCanvas.width = pixelCrop.width;
cropCanvas.height = pixelCrop.height;
const cropCtx = cropCanvas.getContext('2d');
if (!cropCtx) {
reject(new Error('Failed to get canvas context'));
return;
}
ctx.drawImage(
cropCtx.drawImage(
img,
pixelCrop.x,
pixelCrop.y,
@@ -29,12 +44,45 @@ export function cropImage(imageSrc: string, pixelCrop: PixelCrop, outputType = '
pixelCrop.width,
pixelCrop.height,
);
canvas.toBlob(
// Step 2: Downscale if either dimension exceeds maxDimension
let outputCanvas = cropCanvas;
if (maxDimension && (pixelCrop.width > maxDimension || pixelCrop.height > maxDimension)) {
const scale = maxDimension / Math.max(pixelCrop.width, pixelCrop.height);
const scaledW = Math.round(pixelCrop.width * scale);
const scaledH = Math.round(pixelCrop.height * scale);
const scaledCanvas = document.createElement('canvas');
scaledCanvas.width = scaledW;
scaledCanvas.height = scaledH;
const scaledCtx = scaledCanvas.getContext('2d');
if (!scaledCtx) {
reject(new Error('Failed to get scaled canvas context'));
return;
}
scaledCtx.drawImage(cropCanvas, 0, 0, scaledW, scaledH);
outputCanvas = scaledCanvas;
}
// Step 3: Export to blob — try WebP first, fall back to PNG if unsupported
outputCanvas.toBlob(
(blob) => {
if (blob) resolve(blob);
else reject(new Error('Canvas toBlob returned null'));
if (blob) {
resolve(blob);
} else if (finalType === 'image/webp') {
// WebP not supported (old Safari) — fall back to PNG
outputCanvas.toBlob(
(pngBlob) => {
if (pngBlob) resolve(pngBlob);
else reject(new Error('Canvas toBlob returned null'));
},
'image/png',
);
} else {
reject(new Error('Canvas toBlob returned null'));
}
},
outputType,
finalType,
quality,
);
};
img.onerror = () => reject(new Error('Failed to load image'));