Skip to content

readme.md

Latest commit

 

History

History
172 lines (122 loc) · 6.08 KB

readme.md

File metadata and controls

172 lines (122 loc) · 6.08 KB

Image Optimizer CLI (React) 🚀

A browser-based, "CLI-like" image optimization interface built as a React component. This UI simulates batch image compression and conversion workflows with a terminal-style control panel, queue management, and per-run results. It is intended as a demo / frontend for an image optimization workflow — the actual compression and file saving are simulated client-side.

File: image-optimizer-cli.tsx

Features

  • Drag & select multiple images into a file queue.
  • Queue management: add, remove, clear, and list queued files.
  • Simulated compression pipeline:
    • Reads images in the browser, calculates a simulated compression ratio and new file size.
    • Reports image dimensions, original format, optimized format, and space saved.
  • Results panel showing each optimized file with status and savings.
  • Terminal area that logs operations in CLI style with color-coded messages (info, success, error, command).
  • Built-in command input supporting:
    • help — show available commands
    • clear — clear terminal output
    • reset — reset app state (queue/results/terminal)
    • queue — show files in queue
    • settings — show current optimization settings
    • optimize — start the optimization process
  • Settings panel for customizing:
    • Output format: WebP / AVIF / JPEG / PNG
    • Quality (1–100)
    • Max width / height
    • Keep original (setting present in state; simulated usage)
  • Download simulation: "Prepare download package" (note: simulated — no real files are saved on disk).
  • Tailwind-friendly layout and lucide-react icons used for UI.

Important notes

  • This component simulates compression in-browser — it does not perform real format conversion or produce downloadable optimized files. It uses the FileReader API to read images (data URLs) and calculates a simulated compression ratio to demonstrate the UI and UX.
  • For a production-ready optimizer you would connect this UI to a backend optimizer (e.g., Sharp, libvips) or implement real client-side encoding (WebCodecs, Canvas → toBlob, encoding libs for WebP/AVIF) and implement an actual download/zip flow.

Tech / Dependencies

  • React (hooks) — component is a functional React component using useState/useRef
  • lucide-react — icons used throughout (Zap, Upload, CheckCircle, XCircle, Download, Settings, Trash2, FolderOpen, Info)
  • Tailwind CSS classes used in markup (the component assumes Tailwind or compatible styles are available)
  • Browser File APIs: FileReader, Image

File path in this repo:

  • image-optimizer-cli.tsx (component)

Source (component): https://github.com/Zortex-Tech-Solutions/Image-Optimizer-CLI/blob/main/image-optimizer-cli.tsx

Installation / Quick start

  1. Clone the repository (or copy the component into your project):
git clone https://github.com/Zortex-Tech-Solutions/Image-Optimizer-CLI.git
cd Image-Optimizer-CLI
  1. Install dependencies (example using npm):
npm install
# or
yarn install
  1. Ensure your React app has Tailwind (or adapt the styles) and install lucide-react:
npm install lucide-react
  1. Import and use the component in your app:
import React from 'react';
import ImageOptimizerCLI from './image-optimizer-cli';

function App() {
  return <ImageOptimizerCLI />;
}

export default App;
  1. Start your dev server:
npm run start
# or for CRA
npm run dev

Usage — UI & CLI commands

Use the UI to add images using the "Add Images" control or by programmatic file input.

Terminal commands (type into the command input and press Enter):

  • help — list available commands
  • clear — clears the terminal
  • reset — resets queue, results, and terminal
  • queue — prints files currently in the queue
  • settings — prints current optimization settings
  • optimize — runs the simulated optimization on queued files

Buttons:

  • Optimize Now — starts optimization (same as optimize command)
  • Download All — simulated "prepare download" action
  • Reset All — clears state and resets terminal
  • Trash icon — clear queue
  • X icon next to each file — remove that file from queue

Settings:

  • Quality: 1–100 (higher means better quality and larger output in simulation)
  • Format: webp, avif, jpg, png (affects the simulated compression factor)
  • Max Width / Max Height: numeric fields (displayed in settings and logged during optimization)
  • Keep original: flag in state (present but the demo doesn't actually preserve files since saving is simulated)

Extending to a real optimizer

To make this component perform real image conversions and downloads:

  • Integrate a server-side image optimizer:
    • Send queued files (FormData) to an API endpoint that runs Sharp/libvips for conversions and resizing.
    • Stream or zip optimized files for download.
  • Or implement client-side encoding:
    • Use Canvas / OffscreenCanvas to redraw images and then toBlob with chosen mime type.
    • For AVIF/WebP, consider browser support or WebAssembly encoders.
  • Replace the simulated compression logic (simulateCompression) with the real encoding pipeline and proper Blob handling.

Troubleshooting

  • Images failing to load in the browser (image.onerror) will be reported as a failed optimization in the terminal.
  • Large image files may take time to load and process in the browser — prefer server-side processing for heavy workloads.
  • Tailwind classes won't apply if you don't have Tailwind configured — style may look unstyled in that case.

Contributing

Contributions are welcome. Suggested improvements:

  • Real encoding and download support
  • ZIP/packaging of optimized files
  • Progress bars per-file
  • Drag & drop file support (if not already provided)
  • Unit tests & storybook for the component

Please open a PR against the main repository and follow typical contribution guidelines (create an issue first if the change is large).

License

Add a license to the repository as appropriate (MIT, Apache-2.0, etc.). This README does not include a license by itself.

Made with ❤️, and coffee...

If you want to support the work we do, star this repo!