Jak funguje komprese obrázků v prohlížeči
Každý kompresní krok probíhá 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í.
- 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.
- Vykreslí dekódovaný obrázek na offscreen Canvas prvek v původních pixelových rozměrech, připravený k překódování.
- Zavolá
canvas.toBlob(callback, mimeType, quality)pro překódování pixelů u JPEG, PNG 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í. V režimu kvality se hodnota slideru mapuje přímo na kvantizační nastavení kodéru; v režimu cílové velikosti stránka půlí hodnotu kvality, dokud se výstupní blob nevejde pod váš rozpočet. - Zobrazí srovnání před/po s původní velikostí, komprimovanou velikostí a úsporou v procentech a nabídne stažení jednotlivého obrázku nebo jednoho ZIPu pro celou dávku. ZIP je sestaven v paměti pomocí fflate, 8 KB knihovny načtené při prvním použití.
Proč komprimovat obrázky?
- Menší obrázky se načítají rychleji. Zmenšení 4 MB hero obrázku na 600 KB přímo zlepšuje Largest Contentful Paint, což je jedna z metrik Core Web Vitals, kterou Google používá pro řazení. Na stránce s několika fotografiemi se úspora sčítá do rychlejšího prvního vykreslení.
- A pak jsou tu limity pro nahrávání. Spousta CMS platforem, ticketingových nástrojů a e-mailových systémů odmítá cokoli nad 1 nebo 2 MB a rychlá komprese dostane fotografii pod limit, aniž byste museli otevírat plný editor.
- Šířka pásma a úložiště stojí peníze ve velkém. Doručování WebP v kvalitě 0,8 místo plného PNG může snížit objem obrázků o třetinu i více, což snižuje účty za CDN egress a mobilní data pro vaše návštěvníky.
- Některé obrázky by se neměly nahrávat vůbec. Protože vše běží ve vašem prohlížeči, skeny průkazů, lékařské snímky a interní screenshoty zůstávají na vašem zařízení. V řetězci není žádný server třetí strany jako TinyPNG, kterého byste se museli obávat.
Běžná použití
Komprese přichází na řadu vždy, když je obrázek větší než místo, kam ho umisťujete. Tři vzorce, které vidíme znovu a znovu.
- Příprava produktových fotografií pro online obchod. JPEGy se komprimují na kvalitu 0,8 (nebo cíl 200 KB), aby storefront zůstal rychlý a splnil Core Web Vitals na mobilech.
- Zmenšování screenshotů před připojením k bug trackeru nebo wiki. Dávka PNG převedená na JPEG v kvalitě 0,85 často klesne z desítek megabajtů na pár.
- Dostat fotografii pod limit pro nahrávání — portál pro pracovní nabídky, který odmítá soubory nad 1 MB, e-mailový systém s přísným limitem příloh nebo fórum s omezením velikosti avataru.
Příklad: 4 MB JPEG na 400 KB
4 MB JPEG rovnou z telefonu je běžný soubor, který naráží na limity a zpomaluje stránky. Je to spravedlivý benchmark úspor při kompresi.
Přetáhněte JPEG do nahrávací zóny, ponechte formát na JPEG a buď posuňte slider kvality dolů na 0,7 nebo přepněte do režimu cílové velikosti a zadejte 400 KB. V režimu kvality Canvas pipeline překóduje jednou a zobrazí výsledek, typicky kolem 500 až 700 KB podle fotografie. V režimu cílové velikosti stránka vyzkouší několik hodnot kvality, najde nejvyšší, která se ještě vejde pod 400 KB, a zobrazí procento úspory. Kliknutím na Stáhnout na kartě získáte jeden soubor nebo kliknutím na Stáhnout .zip, pokud jste komprimovali více obrázků najednou. Celý proces trvá u obrázku této velikosti zlomek vteřiny a spotřebuje nulovou šířku pásma poté, co se stránka sama načte.
Jaký je rozdíl mezi režimem kvality a režimem cílové velikosti?
Režim kvality nabízí jeden slider od 0,1 do 1,0, který se mapuje na kvantizační nastavení kodéru JPEG nebo WebP — nižší čísla znamenají menší soubory a viditelnější artefakty. Režim cílové velikosti problém obrací: zadáte velikost v kilobajtech a stránka půlí kvalitu, kóduje několikrát, dokud nenajde nejvyšší kvalitu, která se ještě vejde pod váš limit. Cílová velikost je užitečná, když záleží na pevném limitu (např. 1 MB); režim kvality je rychlejší a lepší, když chcete jen předvídatelný vizuální výsledek. PNG je bezztrátový, takže se na něj ani jeden režim nevztahuje.
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, neprobíhá dočasné nahrávání ani cloudová komunikace. Můžete si to ověřit sami: otevřete DevTools, přepněte na panel Network a spusťte kompresi. 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.
Proč se PNG při kompresi někdy téměř nezmenší?
PNG je bezztrátový formát, takže Canvas API nemůže zahodit detaily, aby ho zmenšilo — může pouze přebalit stejné pixely. U fotografií je PNG již velké a bezztrátové překódování ušetří málo. Skutečný přínos přichází při přepnutí výstupního formátu na JPEG nebo WebP, které používají ztrátovou kompresi vhodnou pro fotografie a běžně dosahují 4 až 10násobného zmenšení. PNG používejte pouze tehdy, když potřebujete bezztrátovou kvalitu nebo průhlednost; jinak volte JPEG pro fotografie nebo WebP pro nejlepší poměr velikost/kvalita.
Který formát bych měl zvolit?
Pro fotografie nabízí WebP v kvalitě 0,8 nejlepší poměr velikosti a kvality a je podporován všemi prohlížeči vydanými od roku 2021; JPEG je bezpečný univerzální fallback, když je cíl starší nebo přísnější. PNG volte pouze při potřebě bezztrátové kvality nebo alfa kanálu — perokresby, UI screenshoty, loga s průhledností. Pokud optimalizujete pro rychlost stránky a vaše publikum používá moderní prohlížeče, WebP je téměř vždy správná volba; pokud plníte starý CMS nebo tiskový pipeline, který WebP odmítá, zůstaňte u JPEG.
Nahrajte své obrázky, vyberte úroveň kvality nebo cílovou velikost, komprimujte. Vše běží ve vaší záložce. Žádné nahrávání, žádný účet, žádné čekání na frontu serveru.