Přehled
Většina online kompresorů nejprve nahraje soubor na vzdálený server. PerfectSizeMe jej místo toho zpracuje v prohlížeči pomocí WebAssembly (WASM).
Uživatel může vložit celou dávku obrázků, zvolit způsob komprese a porovnat výsledek. Soubory neopustí zařízení a aplikace funguje i bez internetového připojení.
Hlavní funkce
WebAssembly a lokální zpracování
Jádro aplikace obchází tradiční zpracování na serveru. Využívá předkompilované WASM binárky pro spouštění kompresních algoritmů přímo v paměti prohlížeče.
- Nulová latence: Odpadají časy pro nahrávání a stahování; velké dávky zpracuje tak rychle, jak to dovolí lokální CPU.
- Soukromí: Aplikace neposílá data souborů do API, funguje offline a data zůstávají u uživatele.
Paralelní architektura s workery
Aby UI nezamrzalo při náročných výpočtech, implementoval jsem vlastní systém Worker Pool.
- Dynamická souběžnost: Aplikace detekuje počet hardwarových vláken (např. 4 jádra na desktopu, 1 na mobilu) a spustí optimální počet dedikovaných Web Workerů.
- Load balancing: Frontový systém efektivně distribuuje úlohy mezi dostupné workery, aby nedocházelo k pádu paměti na slabších zařízeních.
Správa stavu
Zpracování rychlých aktualizací z více paralelních workerů vyžadovalo sofistikovanou architekturu React stavu.
- Atomické aktualizace: Funkcionální aktualizace stavu zabraňují race conditions při simultánním dokončení více obrázků.
- Detailní zpětná vazba: Systém „Heartbeat" sub-stavů (např. Ve frontě → WASM Engine → Rendering) udržuje UI responzivní a uživatele informované o přesném průběhu.
- Timeout: Systém automaticky přeskočí soubory zpracovávané déle než 60 sekund. Jeden poškozený soubor tak nezablokuje celou dávku.
Nástroje pro porovnání
Aplikace obsahuje detailní sadu nástrojů pro kontrolu kvality.
- „Blink" porovnání: Vedle standardního posuvníku lze podržením přepínat mezi oběma verzemi a hledat artefakty komprese.
- Prevence vizuálních posunů: Layoutové skoky při přepínání obrázků jsou eliminovány předmontováním pohledů a správou viditelnosti přes CSS místo odmontovávání z DOM.
Použité technologie
- Frontend: Next.js 16 (App Router)
- Jádro: WebAssembly (WASM), Web Workers (Comlink)
- Stylování: Tailwind CSS, Lucide Icons
- Utility: JSZip pro hromadné stahování, Canvas API pro dynamická pozadí