Optimize gallery image loading with streaming and proper lazy loading

[Copilot]

Gallery images were blocking the main app during loading, preventing navigation and interaction until all images loaded.

Changes

Image component (Image.svelte)

• Fixed responsive image selection: changed sizes to media queries for proper source selection
• Added fetchpriority="low" to prevent blocking main thread

Image server endpoint (/image/[name]/+server.ts)

• Streaming: Non-cached images now stream via ReadableStream instead of buffering entire file
• ETag support: Conditional requests return 304 Not Modified
• Early headers: Cache headers (max-age=31536000, immutable) sent immediately with response
• Background caching: Files cached to memory while streaming to client

// Stream directly from disk, cache in background
const fileStream = createReadStream(filePath);
const webStream = nodeStreamToWebStream(fileStream);

fs.readFile(filePath)
  .then((buffer) => memoryCache.set(filePath, buffer))
  .catch(() => {});

return new Response(webStream, {
  headers: getCacheHeaders(fileExtension, fileInfo.size, etag)
});

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.