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