Skip to content

Create Class-Based Image Optimization Utility (ImageOptimizer) #25

@abhishek-nexgen-dev

Description

@abhishek-nexgen-dev

📘 Summary

Build a reusable utility class ImageOptimizer that helps developers compress, resize, and convert image formats easily. It should work by calling:

await ImageOptimizer.optimizeFromBuffer({...})
await ImageOptimizer.optimizeFromFile({...})
await ImageOptimizer.optimizeFromUrl({...})

This utility should accept images in any form (buffer, file path, or external URL), apply compression and formatting, and return the result as a buffer, base64, or saved file — based on user need.


🎯 What This Will Do

✅ This ImageOptimizer class will help you:

📉 Compress image size

🔄 Convert image format (e.g., PNG → WebP)

📐 Resize image to specific width/height

📤 Accept input from:

Buffer (e.g., from req.file.buffer)

File path (from disk)

External URL

💾 Return optimized output:

As a buffer (for DB or streaming)

As base64 (for embedding)

Or save it to disk


💡 Why It's Useful

💼 Use Case ✅ Benefit

File upload optimization Save server storage and speed up frontend loads
Resizing for different screens Generate thumbnails, previews, banners, etc.
Format conversion Use WebP or AVIF for better compression
Works anywhere FastKit, Express, Next.js, Nest, CLI – all good
Easy to use Just one function call to handle image processing


📦 Tools & Packages

sharp – for image processing

axios – (optional) to fetch images from URLs

fs/promises – for file saving

TypeScript – types and structure


📁 Folder Structure

src/
└──


✨ Class: ImageOptimizer

✅ Methods to Add:

ImageOptimizer.optimizeFromBuffer(options)
ImageOptimizer.optimizeFromFile(options)
ImageOptimizer.optimizeFromUrl(options)

All methods should:

Take compression options (format, width, height, quality)

Return either:

Buffer

Base64 string

Or save file to disk (and return file path)


🔧 Supported Options

Option Type Example Description

format 'webp' 'jpeg' 'png' width number 800 Resize width height number 600 Resize height quality number (0–100) 75 Compression quality returnType 'buffer' 'base64' 'file'`
outputPath string (optional if returnType=buffer) 'optimized/image.webp' Destination if saving file


✅ Tasks

[ ] Install sharp and axios

[ ] Create ImageOptimizer.ts with static methods

[ ] Add:

[ ] optimizeFromBuffer()

[ ] optimizeFromFile()

[ ] optimizeFromUrl()

[ ] Support all formats and return types

[ ] Handle default options via constants

[ ] Create TypeScript interfaces in imageOptimizer.types.ts

[ ] Add clear error messages and validation

[ ] Create example demo file for quick test


🧪 Example Code

📤 Upload and Optimize Image from Buffer

const result = await ImageOptimizer.optimizeFromBuffer({
buffer: req.file.buffer,
width: 300,
height: 300,
format: 'webp',
returnType: 'file',
outputPath: 'optimized/profile.webp',
});

🌐 Download and Optimize Image from URL

await ImageOptimizer.optimizeFromUrl({
imageUrl: 'https://example.com/img.jpg',
width: 500,
format: 'avif',
outputPath: 'optimized/remote.avif',
});

📂 Optimize from Existing File

await ImageOptimizer.optimizeFromFile({
inputPath: 'uploads/photo.jpg',
outputPath: 'compressed/photo.webp',
quality: 80,
});


🔥 Final Result

Easy-to-use class with static methods

Accepts any image (from buffer, file, or URL)

Optimizes it with correct settings

Can be used anywhere (API, scripts, dashboards, etc.)


🏷 Suggested GitHub Labels

feature, image, utility, typescript, sharp, performance, pluggable, class-based


Would you like me to now generate the actual ImageOptimizer.ts class code for this issue?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions