📸 PixelBench — Mobile Image Compression Benchmark Suite

Project Overview

PixelBench is a demo app for the rn-image-compressor TurboModule, focused on repeatable image compression benchmarks and UI performance reporting.

A reusable high-performance React Native TurboModule (rn-image-compressor) paired with a visual benchmarking tool (PixelBench) to evaluate, compare, and optimize image compression strategies on real devices.

---

---

📚 Table of Contents

• 🚀 Executive Summary
• 🧩 System Overview
• 🏗 Architecture & Pipeline
• ⚙️ Technical Deep Dive
• 📈 Benchmarking & Metrics
• 🧪 Demo & Visuals
• 🛠 Developer Setup
• 🧠 Design Decisions
• 🚀 What Makes This Unique
• 🔮 Future Enhancements
• 📄 License

---

🎬 Demo Videos

See PixelBench in action across its two core flows: benchmarking image compression and real-world single/batch compression.

---

🖼 Image Compression Flow End-to-end image compression workflow optimized for mobile performance. Highlights Image selection + preview Compression configuration Optimized output generation Real-world validation flow

⚡ Benchmarking & Results Demo Run compression benchmarks, compare outputs, and analyze performance metrics in a single flow. Highlights Compression benchmark execution Before/after comparison Size reduction + timing metrics Exportable performance insights

---

⬆️ Back to top

---

🚀 Executive Summary

Mobile applications increasingly depend on image-heavy workflows—document capture, uploads, OCR pipelines, and media sharing. However, image compression is often:

• Slow (JS-bound processing)
• Inconsistent across platforms
• Hard to measure and optimize

🔧 Solution

PixelBench addresses this through a two-part system:

1. RNImageCompressor (Reusable TurboModule)

• High-performance native compression engine
• Designed as a drop-in library for any React Native app
• Built on JSI for near-zero bridge overhead

2. PixelBench (Benchmarking Tool)

• Visual interface to compare compression strategies

• Enables developers to optimize for their specific use case

  • Latency (speed)
  • Storage savings
  • Compression ratio
  • Throughput

👉 Together, this forms a developer-facing performance toolkit, not just an implementation.

⬆️ Back to top

---

🧩 System Overview

RNImageCompressor (Reusable Native Module)
                +
PixelBench (Benchmark + Visualization App)
                =
Full Performance Evaluation Platform

🎯 Key Positioning

• Library → Use RNImageCompressor in production apps
• Tool → Use PixelBench to decide how to use it

---

🏗 Architecture & Pipeline

Image Input (Camera / Gallery)
        ↓
Preprocessing (optional resize, normalization)
        ↓
RNImageCompressor (TurboModule - Native Layer)
        ↓
Compression Execution (JPEG/WebP)
        ↓
Metrics Collection
        ↓
PixelBench Aggregation Layer
        ↓
UI Visualization + JSON Export

---

⚙️ Technical Deep Dive

🧱 Core Stack

Mobile

• React Native 0.74+
• TypeScript
• Ignite CLI

Native Layer

• iOS: Swift / Objective-C++
• Android: Kotlin / C++
• JSI bindings

---

🧠 RNImageCompressor (Reusable Module)

Designed as a production-ready, reusable TurboModule:

Capabilities

• Compress images with adjustable quality
• Support for multiple formats (JPEG, WebP)
• Batch processing support
• Deterministic output

Why Native Layer?

• Access to platform-optimized encoders
• Avoid JS thread bottlenecks
• Utilize hardware acceleration where available

---

⚡ Why TurboModules (JSI)?

Traditional bridge:

• JSON serialization overhead
• Async bottlenecks

TurboModules:

• Direct native calls
• Lower latency
• Higher throughput

👉 Critical for high-frequency operations like image processing

---

📈 Benchmarking & Metrics

PixelBench is a developer-facing decision tool, not just a demo.

📊 What You Can Measure

• Compression time (latency)
• Output size reduction
• Compression ratio
• Throughput
• Failure rates

---

🧪 Use Case

What compression quality gives me the best tradeoff between speed and file size for my app? How much will the UI stressor/animations affect the compression speeds Which compression might be better for cetain plaforms, devices, or situations.

PixelBench is visual playground for testing.

---

📊 Example Output

{
  "originalSizeKB": 4200,
  "compressedSizeKB": 820,
  "compressionRatio": 0.195,
  "durationMs": 47,
  "quality": 0.7
}

---

💡 Real Impact

• Optimize uploads dynamically
• Reduce backend costs
• Improve UX (faster interactions)
• Tune pipelines for OCR/ML workloads

⬆️ Back to top

---

🧪 Demo & Visuals

📱 Benchmark UI

---

🛠 Developer Setup

📦 Install

git clone <repo>
cd pixelbench
pnpm install

---

▶️ Run

pnpm ios
pnpm android

---

📲 Latest Release

Download APK from the latest Release

---

🔌 Using RNImageCompressor in Your App

import { compressImage } from "react-native-image-compressor"

const result = await compressImage(uri, {
  quality: 0.7,
  format: "jpeg",
})

🔌 Using PixelBench for compression benchmarking

How to reproduce benchmarks

1. Open the PixelBench screen.
2. Pick 10 images.
3. Preset: social, Concurrency: 2, Repeat runs: 5, Stress: ON.
4. Run benchmark.
5. Copy Markdown “PixelBench Results”.

Benchmark windows include baseline (3s before), during (iteration), and recovery (3s after).

Running Benchmarks in Release

• iOS: run a Release scheme (or use your Ignite/Expo release build flow) and disable remote debugging.
• Android: run a release variant (e.g., assembleRelease + install) or your release build flow.
• Debug builds can distort timings; always compare like-for-like release runs.

PixelBench Results Example

Results are generated from the in-app exporter and pasted here.

Results example will be added soon!

⬆️ Back to top

---

🧠 Design Decisions

Why Split Module + Tool?

• Keeps core module lightweight and reusable
• Enables experimentation without polluting production code

---

Why Real Device Benchmarking?

• Performance varies by device
• Simulators are misleading
• Provides ground-truth metrics

---

Why Focus on Metrics?

• Compression is a tradeoff problem
• Developers need visibility, not guesses

---

🚀 What Makes This Unique

• Reusable TurboModule library + benchmarking platform
• Real-world performance testing (not synthetic)
• Developer-centric tooling
• Cross-platform native optimization
• Data-driven compression tuning

⬆️ Back to top

---

🔮 Future Enhancements

• Adaptive compression (network-aware)
• GPU acceleration
• Integration with Optical Character Recognition and Optical Object Detection pipelines

---

📄 License

MIT License — feel free to use and adapt.

⬆️ Back to top