Překresleno.cz: Převod obrázků bez nahrávání (WebAssembly)

Kdo někdy použil „online převodník obrázků“, většinou řešil dvě věci: soukromí (opravdu chci někam nahrávat osobní fotky?) a rychlost (proč to trvá tak dlouho?). Tenhle projekt obě nevýhody odstraňuje tím, že vše dělá tam, kde už vaše fotky jsou: přímo v prohlížeči.

Aplikace je moderní převodník, který běží kompletně na straně klienta. Vyberete fotky (včetně iPhone HEIC/HEIF a RAW souborů z fotoaparátu), zvolíte výstupní formát a nastavení a stáhnete výsledek—po jednom nebo hromadně jako ZIP. Bez uploadu. Bez účtu. Bez čekání na server.

Vyzkoušejte na Překresleno.cz.

Stručně

• Převodník obrázků s důrazem na soukromí, který běží 100% v prohlížeči (žádné nahrávání).
• Umí HEIC/HEIF z iPhonu a umí vytáhnout náhledy z mnoha RAW formátů.
• Exportuje PNG/JPEG/WebP/AVIF (+ JPEG XL beta) a zvládá dávky i ZIP ke stažení.

Co aplikace umí

• Převádí běžné formáty (JPEG/PNG/WebP/GIF) a navíc zvládá HEIC/HEIF i RAW vstupy.
• Exportuje do PNG, JPEG, WebP, AVIF a JPEG XL (beta).
• Podporuje dávkové převody s průběhem po souborech, náhledy a souhrnem převodu.
• Nabízí praktické zmenšení (max. rozlišení nebo max. megapixely) pro rozumné velikosti výstupu.
• U ztrátových formátů umožňuje nastavit kvalitu a má i „auto“ režim, který se přizpůsobí vstupu.
• Stahování je pohodlné: po jednom nebo vše jako ZIP.
• „Privacy first“: zpracování probíhá lokálně, bez odesílání souborů na backend.

Jak to použít (za ~30 sekund)

1. Otevřete aplikaci a přetáhněte fotky do upload zóny (nebo klikněte pro výběr).
2. Zvolte výstupní formát (JPEG, PNG, WebP, AVIF nebo JPEG XL).
3. (Volitelně) nastavte kvalitu (u ztrátových formátů) a limit zmenšení (pixely nebo megapixely).
4. Klikněte na Převést a stáhněte jednotlivé soubory nebo „Stáhnout vše“ jako ZIP.

Jak je to postavené (a proč je důležitá WebAssembly)

Hlavní cíl je jednoduchý: dělat reálné převody obrázků v prohlížeči, včetně moderních kodeků, a přitom nezamrazit UI.

1) Pipeline v prohlížeči: decode → resize → encode

Každý soubor prochází stejnými kroky:

1. Dekódování vstupu do pixelů (nebo do prohlížečové reprezentace jako ImageBitmap).
2. Zmenšení podle zvoleného limitu rozlišení/megapixelů.
3. Kódování do cílového formátu.
4. Vytvoření Blobu pro stažení (a případně zabalení více souborů do ZIPu).

2) HEIC a RAW bez serveru

Mnoho „online převodníků“ řeší HEIC/RAW na serveru. Tady to zůstává lokálně:

• HEIC/HEIF se dekóduje pomocí libheif ve WebAssembly (přes heic-to / heic-decode). Když prohlížeč neumí HEIC nativně, WASM dekodér ho převede na RGBA pixely a zbytek pipeline pokračuje normálně.
• RAW je řešen pragmaticky: místo plného RAW zpracování aplikace používá exifr a vytáhne vložený JPEG náhled, který většina fotoaparátů do RAWu ukládá. Je to rychlé, běží to v prohlížeči a často je to „dost dobré“ pro sdílení nebo rychlé konverze.

Omezení (dobré vědět)

• RAW podpora je extrakce náhledu, ne plný RAW workflow (žádné demosaicing, tónové křivky, detailní color science).
• AVIF a JPEG XL mohou být výpočetně náročné, takže velké dávky (nebo hodně megapixelové fotky) mohou trvat déle.
• Podpora formátů se liší podle prohlížeče/zařízení (hlavně AVIF/JPEG XL) a extrémně velké obrázky mohou narazit na limity paměti.

3) Web workery udržují UI plynulé

Kódování (hlavně AVIF/JPEG XL) je náročné. Aby se hlavní vlákno nezaseklo, aplikace posílá těžkou práci do module web workeru:

• Worker si dynamicky načítá enkodér podle cílového formátu (WebP/AVIF/JXL/JPEG).
• Pixely se předávají přes transferovatelné ArrayBuffery, aby se zbytečně nekopírovala paměť.
• Když worker selže, aplikace umí rozumně spadnout na kódování na hlavním vlákně.

4) WebAssembly kodeky v prohlížeči

Klíčový „enabler“ je WebAssembly: implementace kodeků, které by jinak běžely jako nativní binárky, mohou bezpečně běžet v sandboxu prohlížeče.

Projekt používá rodinu @jsquash/* pro moderní formáty jako WebP, AVIF a JPEG XL. Prakticky to znamená:

• Dostanete poctivé implementace kodeků běžící v prohlížeči.
• Nepotřebujete serverovou farmu na CPU náročnou práci.
• Citlivé konverze (osobní fotky, dokumenty) uděláte bez toho, aby data někam odcházela.

5) Kodeky jako offline-ready vendor balíčky

WASM kodeky a „těžší“ knihovny jsou připravené jako vendor balíčky a cacheované pro offline použití:

• Setup skript nachystá kodeky do public/vendor/.
• Service worker si přednačte důležité soubory aplikace a vendor balíčky, takže to funguje i při horším internetu.

Výsledek: po prvním načtení se převodník chová spíš jako nainstalovaný nástroj než jako běžná webová stránka.

Rychlé srovnání: jak si stojí formáty

Reálné výsledky závisí na obsahu (fotka vs. screenshot), rozlišení a nastavení kvality, ale pro výběr formátu se dá řídit osvědčenými vzory.

Praktické „pravidlo od oka“ pro typickou fotku (bez průhlednosti):

Jaký formát vybrat?

• Zvolte JPEG, když chcete kompatibilitu všude a rychlý převod (hlavně pro fotky).
• Zvolte WebP, když chcete menší soubory pro web bez nejpomalejšího kódování.
• Zvolte AVIF, když je nejdůležitější velikost a nevadí delší kódování.
• Zvolte PNG pro screenshoty, grafiku a průhlednost (nebo když chcete bezeztrátově).
• Zvolte JPEG XL (beta), pokud experimentujete nebo víte, že ho váš workflow podporuje.

Závěr: proč to dává smysl

Lokální převod v prohlížeči (s WebAssembly) přináší konkrétní výhody:

• Soukromí jako default: soubory zůstávají u vás, není co nahrávat ani co uniknout.
• Rychlost a škálování: pracuje váš CPU, takže se aplikace nezpomalí podle vytížení serveru.
• Offline-friendly: cacheované assety umožní převádět i bez spolehlivého připojení.
• Moderní formáty na jedno kliknutí: WebP/AVIF/JPEG XL jsou snadno dostupné i z HEIC.
• Nižší provozní náklady: žádná serverová pipeline na image processing, kterou musíte provozovat a zabezpečit.

Stručně: je to „online nástroj“, který se chová jako lokální aplikace—protože technicky vzato lokální je.