Převádět formáty obrázků _

Jak funguje převod obrázků v prohlížeči

Každý převod je čtyřkrokový pipeline běžící ve vašem prohlížeči. U JPEG a PNG zpracovává kódování přímo Canvas API prohlížeče. Pro WebP v Safari a AVIF ve všech prohlížečích stránka načte lehký WebAssembly codec na vyžádání — stále vše lokálně, vaše obrázky neopouštějí zařízení.

1. Načte každý nahraný soubor jako Blob a vytvoří objektové URL, aby jej prohlížeč mohl dekódovat lokálně, aniž by kopíroval bajty na server nebo na disk.
2. Vykreslí dekódovaný obrázek na offscreen Canvas prvek, aplikuje případné omezení velikosti při zachování původního poměru stran. Pokud jste zvolili max. šířku nebo max. rozměr, zde probíhá downscale.
3. Zavolá canvas.toBlob(callback, targetMimeType, quality) pro překódování pixelů pro PNG, JPEG a Chrome/Firefox WebP. Pro Safari WebP a AVIF kódování se WebAssembly codec worker načte při prvním použití a zpracuje kódování na pozadí. PNG výstup je vždy bezztrátový; JPEG, WebP a AVIF respektují slider kvality, který se mapuje přímo na kvantizační nastavení kodéru.
4. Zobrazí náhled před/po s výstupními rozměry a velikostí souboru, pak nabídne tlačítko pro stažení jednotlivého obrázku nebo jeden ZIP pro celou dávku. ZIP je sestaven v paměti pomocí fflate, 8 KB knihovny běžící zcela v záložce.

Proč převádět formáty obrázků?

• Přepnutí z PNG na WebP snižuje typické velikosti souborů o 25 až 35 % bez viditelné ztráty kvality při kvalitě 0,8, což přímo snižuje váhu stránky a zlepšuje Core Web Vitals LCP skóre. Na typické stránce produktu s osmi hero obrázky je to rozdíl mezi 4 MB prvním vykreslením a 2,6 MB.
• PNG zachovává průhlednost tam, kde ji JPEG zahazuje. Převod PNG na JPEG vykresluje transparentní pixely na bílém pozadí, což je přesně to, co chcete, když cíl (e-mailový klient, starší CMS, tisková šablona) PNG v první řadě nepřijímá.
• Sociální platformy a reklamní sítě mají přísné požadavky na formáty. Facebook a LinkedIn preferují JPEG pro nahrávání fotek, Twitterův OG náhledový pipeline přijímá WebP a některé programatické reklamní servery odmítají cokoli, co není JPEG. Rychlý převod před nahráním zabrání ping-pongu odmítnutých kreativ.
• Sjednocení dávky smíšených formátů (PNG screenshoty, JPEG fotky, WebP exporty z designeru) do jediného výstupního formátu před nahráním do CMS nebo DAM odstraňuje větve zpracování formátů z ingest pipeline. Jeden formát dovnitř, jeden ven, mnohem méně podmíněných cest v kódu.

Běžná použití

Převod formátů přichází na řadu vždy, když zdrojový formát a očekávání cíle nesouhlasí. Tři vzorce, které vidíme znovu a znovu.

• Příprava produktových fotografií pro Shopify nebo WooCommerce. JPEGy se převádějí na WebP v kvalitě 0,85 pro veřejný storefront, zatímco PNG kopie jsou uchovávány pro tiskové exporty a tržiště, která WebP stále odmítají.
• Převod PNG exportů od designérů na JPEG nebo WebP před vstupem do React nebo Next.js buildu. Obrazový pipeline frameworku přebírá menší zdroj a produkční build posílá méně bajtů na trasu.
• Dávkové zpracování složky screenshotů z QA běhu. PNG na JPEG v kvalitě 0,9 typicky zmenší archiv 50 screenshotů z cca 120 MB na pod 20 MB před připojením k bug tracker ticketu.

Příklad: 2 MB PNG na 300 KB WebP

2 MB PNG hero obrázek v rozlišení 2400×1600 pixelů je běžný soubor na marketingových landing pages. Je to spravedlivý benchmark úspor při převodu na reálné stránce.

Přetáhněte PNG do nahrávací zóny, vyberte WebP jako cílový formát, nastavte kvalitu na 0,8 a max. šířku na 1200 pro snížení pixelových rozměrů na polovinu. Canvas pipeline vykreslí obrázek v 1200×800 se zachovaným poměrem, pak překóduje do WebP. Výstupní karta zobrazí výsledek, typicky v rozsahu 280 až 320 KB, což je zhruba 85% snížení oproti originálu. Klikněte na Stáhnout na kartě pro stažení jednoho souboru nebo klikněte na Stáhnout .zip ve spodní části panelu, pokud jste převedli několik obrázků najednou. Celý proces od přetažení po stažení trvá u obrázku této velikosti pár set milisekund a nespotřebovává žádnou šířku pásma po načtení stránky.

Které formáty jsou podporovány?

Na vstupu je přijímán jakýkoli formát, který prohlížeč dokáže dekódovat: PNG, JPEG, WebP, GIF a BMP pokrývají prakticky všechny soubory, které designer nebo screenshot nástroj vytvoří. Výstupní formáty jsou PNG (vždy bezztrátový), JPEG, WebP a AVIF. AVIF výstup je podporován přes WebAssembly kodér, který se načte na vyžádání v každém prohlížeči — není potřeba nativní Canvas kodér.

Probíhá to na mém zařízení?

Ano, plně. Stránka používá nativní Canvas API prohlížeče a Web File API k dekódování a překódování každého obrázku v paměti. Žádná data obrázku nejsou odeslána na server, žádné dočasné nahrávání, žádná cloudová komunikace. Můžete si to ověřit: otevřete DevTools, přepněte na panel Network a spusťte převod. Jediné odchozí požadavky, které uvidíte, jsou počáteční načtení stránky a reklamní volání. Nic ve tvaru obrázku neopouští záložku.

Jaký je kvalitativní kompromis mezi PNG a JPEG?

PNG je bezztrátový formát. Každý pixel přežije cyklus kódování přesně, což dělá PNG správnou volbou pro screenshoty, UI snímky a jakékoli obrázky s ostrými hranami nebo velkými plochami jednolité barvy. JPEG používá DCT kompresi a zahazuje jemné detaily, které oko zřídka postřehne, což z něj dělá správnou volbu pro fotografie. Kvalita 0,8 je běžný sweet spot, kde je vizuální rozdíl od originálu těžko postřehnutelný, ale soubor je 4 až 6krát menší než ekvivalentní PNG. WebP může pracovat v bezztrátovém i ztrátovém režimu; slider kvality zde řídí ztrátový kodér a při kvalitě 0,85 WebP typicky překonává JPEG o 25 až 30 % u obsahu s přírodními fotografiemi.

Jak funguje AVIF výstup?

AVIF kódování používá WebAssembly codec, který se načte na vyžádání při prvním výběru formátu AVIF — žádný plugin, žádný příznak prohlížeče, žádné čekání na budoucí Chrome release. WASM binární soubor je poskytován z naší vlastní domény, kóduje váš obrázek zcela na pozadí a vrací standardní image/avif blob připravený ke stažení. Jediný síťový požadavek je jednorázové načtení samotného kodéru; žádná data obrázku nikdy neopouštějí vaše zařízení. Po načtení zůstává kodér v cache po dobu relace, takže následující převody jsou rychlejší. AVIF soubory jsou typicky o 20–30 % menší než WebP a o 50 % menší než JPEG při ekvivalentní kvalitě, což z nich dělá nejlepší volbu pro weby citlivé na výkon.

Přetáhněte své obrázky, vyberte formát, převeďte. Vše běží ve vaší záložce. Žádné nahrávání, žádný účet, žádné čekání na frontu serveru.