Překresleno.cz: převod obrázků bez odesílání fotek na server

Fotka má špatný formát. Potřebujete JPEG do přílohy, menší obrázek na web nebo rychlý náhled RAWu z fotoaparátu. Drobná práce na chvíli, jenže řada online převodníků po vás nejdřív chce, abyste originál odeslali na jejich server.

Chtěl jsem nástroj, který převod zvládne přímo na zařízení, kde už soubor mám. Tak vzniklo Překresleno.cz: vyberete obrázky, nastavíte formát a velikost a stáhnete výsledek. Obrázky se zpracují přímo v prohlížeči. Nepotřebujete účet a fotky se nikam neodesílají.

Od složky fotek k použitelnému výsledku

Aplikace načítá JPEG, PNG, WebP a GIF, ale i fotky v HEIC/HEIF a podporované RAW soubory z fotoaparátů. Výsledky umí uložit jako PNG, JPEG, WebP, AVIF a experimentálně také JPEG XL. Můžete převést více souborů najednou, sledovat průběh převodu a stáhnout je jednotlivě nebo společně v ZIPu.

Třeba u fotek z telefonu, které chcete poslat e-mailem, je postup jednoduchý:

1. Otevřete aplikaci a vyberete fotky nebo je přetáhnete do okna.
2. Jako výstupní formát zvolíte JPEG.
3. Pokud příjemce nepotřebuje plné rozlišení, nastavíte maximální rozměr.
4. Spustíte převod, prohlédnete si výsledky a stáhnete je.

Na velikost souboru má zmenšení rozměrů často stejný vliv jako změna formátu. Fotka o rozměrech 6000 × 4000 obsahuje 24 milionů pixelů. Při zmenšení na 3000 × 2000 jich zbude 6 milionů: poloviční šířka a výška znamenají čtvrtinový počet pixelů. Soubor nemusí být přesně čtyřikrát menší, protože komprese závisí i na obsahu snímku, ale při kódování se zpracovává podstatně méně obrazových dat.

Nastavit lze buď maximální šířku či výšku, nebo počet megapixelů. První možnost se hodí, když znáte potřebný rozměr obrázku. Druhá omezuje celkový počet pixelů i u fotek s různým poměrem stran.

Co zůstává na vašem zařízení

Prohlížeč vybrané soubory přečte, dekóduje a vytvoří z nich nové. Originál nemusí nejdřív putovat na server. Odpadá tak čekání na odeslání fotek; náročnější kodek ale může na pomalejším zařízení zabrat dost času.

Tohle platí pro zpracování obrázků. Při otevření stránky se samozřejmě stahuje kód aplikace a kodeky. Pokud povolíte volitelnou diagnostiku, mohou se odesílat statistiky převodů, například formáty, velikosti souborů a doba zpracování. Obsah obrázků se neodesílá. Když u fotky se souřadnicemi GPS otevřete panel metadat, aplikace může dohledat adresu přes službu Nominatim od OpenStreetMap. Ta přitom dostane příslušné souřadnice.

Před sdílením výsledku je potřeba zkontrolovat i jeho metadata. Ve fotce může být datum pořízení, údaje o fotoaparátu i poloha. Aplikace nabízí odstranění metadat; jejich zachování podporuje pouze u výstupu do JPEGu. Převod na vlastním zařízení a odstranění metadat řeší dvě různé situace. První se týká zpracování originálu, druhá údajů připojených k souboru, který posíláte dál.

K čemu je tu WebAssembly

Převod má pět hlavních kroků:

Načtení souboru -> dekódování na pixely -> případné zmenšení -> kódování -> stažení

Dekódování převede komprimovaný soubor na pixely, se kterými může aplikace pracovat. Kódování z nich vytvoří soubor ve zvoleném výstupním formátu. Část těchto operací umí prohlížeč sám, ale jeho vestavěná podpora nepokrývá všechny potřebné formáty.

Pokud prohlížeč daný formát podporuje, aplikace k dekódování využívá jeho vestavěné funkce, například createImageBitmap. HEIC/HEIF zpracovává jinak: knihovny heic-to a heic-decode zpřístupňují dekódování pomocí libheif, včetně implementace ve WebAssembly. U RAW souborů se získává vložený náhled, o kterém píšu níže.

Pro výstup slouží mimo jiné kodeky @jsquash/*, které umožňují kódování do WebP, AVIF a JPEG XL. WebAssembly dovoluje spouštět zkompilovaný kód kodeků přímo v prohlížeči. Aplikace tak může využít i výstupní formáty a nastavení, které vestavěné funkce prohlížeče nenabízejí.

Náročná práce se tam, kde to jde, přesouvá do web workerů. Worker běží odděleně od vlákna, které vykresluje rozhraní, takže převod nemusí zablokovat tlačítka ani průběžné zobrazování stavu. Přenos objektů ArrayBuffer mezi vlákny navíc pomáhá omezit zbytečné kopírování velkých bloků obrazových dat. Rozhraní díky tomu lépe reaguje, ale nároky samotného převodu na procesor a paměť nezmizí.

Podpora RAW znamená získání náhledu z fotoaparátu

RAW soubor obsahuje data ze snímače, ale může v něm být i JPEG náhled, který už zpracoval fotoaparát. Překresleno.cz tento náhled z podporovaných souborů získává pomocí knihovny exifr.

To se hodí, když si chcete snímek rychle prohlédnout nebo ho někomu poslat. Nezískáte tím možnosti úpravy expozice, vyvážení bílé nebo obnovy detailů ve světlech jako v RAW editoru. O podobě náhledu už rozhodl fotoaparát a jeho rozměry i kvalita závisejí na tom, co do souboru uložil.

Samotná přípona RAWu tedy nezaručuje použitelný výsledek. Pokud soubor obsahuje jen malý náhled, převodník z něj nezíská detaily v plném rozlišení. Ani uložení takového náhledu do PNG nevrátí informace, které se při původní kompresi JPEGu ztratily. RAW originál má smysl ponechat pro pozdější úpravy.

Jak vybrat výstupní formát

Začněte tím, kde chcete výsledek použít. Úspora místa závisí na obsahu obrázku, rozměrech a nastavení kodéru. Udávaná procenta úspory proto o konkrétní fotce moc neřeknou.

Formát	Kdy se hodí	S čím počítat
JPEG	Fotky do příloh a co nejširší kompatibilita	Ztrátová komprese, bez průhlednosti
PNG	Snímky obrazovky, ostrý text a bezeztrátový výstup s průhledností	U fotografií může být soubor velký
WebP	Obrázky na web, pokud ho cílová služba přijímá	Ověřte podporu v aplikaci nebo službě, kde výsledek použijete
AVIF	Malé soubory, když tolik nezáleží na době převodu	Kódování může být pomalé, hlavně u velkých obrázků
JPEG XL (beta)	Zkoušení experimentálního kodéru v prostředí, které formát podporuje	Ověřte, že výsledek půjde v cílové aplikaci otevřít

Podrobnosti o možnostech formátů a podpoře v prohlížečích najdete v přehledu obrazových formátů na MDN (anglicky).

Ani hodnota kvality není univerzální stupnice. JPEG s kvalitou 80 a AVIF se stejným nastavením nemusí vypadat stejně ani mít podobnou velikost. Nejdřív převeďte jednu typickou fotku a prohlédněte si ji v rozměrech, ve kterých ji budete používat. Zaměřte se na drobný text, hrany a barevné přechody. Před velkou dávkou je taková kontrola užitečnější než výběr podle názvu formátu.

Limity převodu v prohlížeči

Velikost komprimovaného souboru může klamat. Obraz s 24 megapixely potřebuje při uložení v RGBA s 8 bity na každý ze čtyř kanálů (4 bajty na pixel) přibližně 96 MB na jediný nekomprimovaný blok pixelů. Dekódování, zmenšování, náhledy a kódování mohou vyžadovat další paměť. I složka poměrně malých JPEGů tak dokáže kartu prohlížeče pořádně zatížit.

AVIF a JPEG XL mohou být také výrazně náročnější na procesor než rychlé uložení do JPEGu. Pokud se dávku nedaří zpracovat, zkuste méně souborů najednou nebo menší výstupní rozměry. Je to nástroj na běžné převody a jeho praktické možnosti pořád určuje zařízení, na kterém běží.

Service worker ukládá soubory aplikace a vybrané knihovny do mezipaměti. To pomáhá při práci offline, ale nezaručuje, že bez připojení půjde každý převod: dostupný musí být i potřebný kodek. Při první návštěvě je připojení nutné a pozdější dostupnost záleží na tom, zda prohlížeč uložené soubory zachová.

Pro mě je na tom přitažlivé hlavně to, že server nemusí přijímat, ukládat ani zpracovávat cizí fotky. Server jen doručí aplikaci, obrazová data zpracuje zařízení uživatele. Na drobné, opakující se převody, kvůli kterým Překresleno.cz vzniklo, to stačí.