Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
24 views3 pages

Image Compression UI Documentation

This document outlines a project for automating image compression using the TinyPNG API, detailing both backend and frontend requirements. The script scans a directory for image files, compresses them, and saves the results while logging size information. The frontend should provide a user interface for folder selection, API key input, and display real-time logs and compression progress.

Uploaded by

abdulbasit99salah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views3 pages

Image Compression UI Documentation

This document outlines a project for automating image compression using the TinyPNG API, detailing both backend and frontend requirements. The script scans a directory for image files, compresses them, and saves the results while logging size information. The frontend should provide a user interface for folder selection, API key input, and display real-time logs and compression progress.

Uploaded by

abdulbasit99salah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

📦 Project: Image Compression using TinyPNG API

📜 Description
This script automates the process of compressing images in a folder (and its subfolders)
using the TinyPNG API. It:
- Recursively scans a directory for image files
- Sends them to TinyPNG for compression
- Downloads and saves the compressed versions to a new output folder
- Logs original and compressed sizes

🧠 What the Front-End Should Do


Build a UI that interacts with this backend functionality. Here's the breakdown:

1. Input Section (User chooses folders)


- 📁 Input Folder Picker: Allow user to select an input folder from their file system

- 📂 Output Folder Picker: Allow user to specify an output folder where compressed files will
be saved

2. Supported File Types


- .png
- .jpg
- .jpeg
- .webp

3. API Key Input


- 🔑 Input field for TinyPNG API Key
- This is saved in `.env` as: `TINYPNG_API_KEY=your_api_key_here`
- You may allow the user to enter it once and save it locally (e.g., in localStorage or write it
to .env).

4. Compress Button
- A button labeled "Start Compression"
- When clicked:
- Trigger backend logic
- Display a loader/progress bar

5. Live Logs Console


- Show real-time logs in the UI:
- Files being read
- Original and compressed size per image
- Final summary of total original and compressed sizes
6. Progress Visualization (Optional but cool)
- 📊 Show compression progress:
- Total number of images
- How many compressed
- Size reduction percentage (per file and overall)

7. Post-Compression Summary
- ✅ Total files processed
- 📉 Total original size (in MB)
- 📦 Total compressed size (in MB)
- 🧮 Overall compression ratio (e.g., “Reduced by 43%”)

🔌 Backend Integration
Here’s what the front-end would need to do:
- Call the script (Node.js) using:
- File paths
- API Key
- Monitor process via:
- Terminal logs
- Or enhanced IPC (if used in Electron)

If you're using Electron, this script can be wrapped as a background Node process. If you
want a web dashboard, you'll need to expose this via an Express.js API.

🔧 Technical Notes
- Ensure `dotenv` is loaded (used for the API key)

- Install required dependencies:

```bash
npm install axios dotenv
```

- Folder structure should have:

```
root/
├── input/ <-- images to be compressed
├── output/ <-- compressed images go here
├── .env <-- TINYPNG_API_KEY=...
├── index.js <-- this script
```

Future Frontend Ideas (Optional)


- Drag-and-drop image upload
- Image preview before and after compression
- Settings to overwrite original files
- Theme switcher (light/dark mode)

You might also like