Feature: Implement client-side image optimization and compression

[3m1n3nc3]

Summary

Implement client-side image optimization to reduce file sizes before upload.

---

Context

Large images slow down uploads and page loads. Client-side optimization helps.

Dependencies: Requires Issue 023 (Media Upload Component).

---

Goal

Reduce image sizes to <500KB while maintaining acceptable quality.

---

Scope

In Scope:

• Image compression
• Resizing to max dimensions
• WebP conversion (if supported)
• Thumbnail generation
• Quality slider (optional)

Out of Scope:

• Server-side optimization
• CDN integration
• Video compression

---

Tasks

• Install image compression library (browser-image-compression)
• Compress images before upload
• Resize images to max 1200x1200
• Convert to WebP if browser supports
• Maintain aspect ratio
• Generate thumbnails (300x300)
• Add compression quality slider (optional)
• Show before/after file size
• Test with various image sizes
• Document optimization settings

---

Acceptance Criteria

• Images compressed before upload
• Max size reduced to <500KB
• Maintains acceptable quality (80%+)
• Works on all modern browsers
• Shows compression progress/result
• Aspect ratio preserved

---

Technical Notes / Constraints

import imageCompression from 'browser-image-compression';

const compressImage = async (file: File): Promise<File> => {
  const options = {
    maxSizeMB: 0.5,
    maxWidthOrHeight: 1200,
    useWebWorker: true,
    fileType: 'image/webp', // if supported
  };

  try {
    return await imageCompression(file, options);
  } catch (error) {
    console.error('Compression failed:', error);
    return file; // Return original on failure
  }
};

Settings:

• Max size: 500KB
• Max dimensions: 1200x1200px
• Quality: 80-85%
• Format: WebP (fallback to JPEG)

---

Testing Requirements

• Test with large images (>5MB)
• Test with small images (<500KB)
• Test with various formats
• Test compression quality
• Test on different browsers
• Test performance

---

Difficulty

🟠 Advanced

---

Resources:

• Figma Design

[Clement-coder]

@Clement-coder has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi! I’d like to take this issue on.

I’m a frontend developer focused on building performant and user-friendly web applications. I have experience implementing client-side optimizations and handling large media efficiently in the browser.

For this task, I’ll:

• Integrate browser-image-compression to compress images before upload
• Resize images to a maximum of 1200x1200 while maintaining aspect ratio
• Convert images to WebP if supported, with JPEG fallback
• Generate thumbnails (300x300) for quick previews
• Optionally add a compression quality slider for user control
• Display before/after file size and compression progress
• Test across various image sizes, formats, and modern browsers to ensure quality ≥80% and max size <500KB
• Document the optimization settings clearly for maintainability

I’ll ensure the implementation is smooth, efficient, and enhances the user experience without breaking the existing upload flow.

Please assign this to me..

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Clement-coder to this issue.

[Ekene001]

@Ekene001 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, can i work on this issue?, I can handle the client-side image optimization and have it ready in under 24 hours. I’ve worked extensively with browser-image-compression and Web Workers, so I know how to reduce file sizes to under 500KB without locking the UI thread or losing too much quality.

My approach:

I’ll implement the compressImage utility to handle the 1200x1200px resizing and WebP conversion as a primary format. I’ll make sure the aspect ratio is preserved during thumbnail generation and add a clear progress indicator so users aren't left guessing during the compression. I’ll also pay close attention to the 80% quality threshold to ensure the images still look sharp and I'll provide a screen recording/screenshots of the mobile and desktop view showing the before/after file sizes to verify the results.

Please assign this to me, Thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ekene001 to this issue.

[Joewizy]

@Joewizy has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

GM, I'm a backend and blockchain engineer creating DeFi protocols and production-grade smart contracts. I would be delighted to work on this problem.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Joewizy to this issue.