Volba formátu obrázku často ovlivňuje rychlost webu víc než většina technických úprav. Online PNG optimalizátor OptiBot je jeden z nástrojů, které přicházejí na řadu po správném výběru formátu. Jenže dřív je potřeba vědět, kdy PNG vůbec použít a kdy sáhnout po JPEG nebo WebP. Tenhle článek projde rozdíly mezi třemi nejrozšířenějšími formáty, ukáže, kde se každý z nich hodí, a vysvětlí, jak z nich vytěžit co nejmenší velikost souboru bez viditelné ztráty kvality.
Jak funguje komprese a proč na výběru formátu záleží
Každý obrázkový formát komprimuje data jinak. Část z nich pracuje bezeztrátově, kdy výsledný soubor je přesnou kopií originálu, jen uloženou efektivněji. Jiné formáty část informace záměrně zahazují, přičemž se spoléhají na to, že lidské oko rozdíl nepostřehne. Výsledek je menší soubor, nicméně opakovaným ukládáním se kvalita postupně zhoršuje.
Správný výběr formátu neznamená vybrat ten „nejlepší“ obecně, ale vybrat ten, který pro daný typ obsahu přinese nejmenší soubor při přijatelné vizuální kvalitě. Rozdíly mezi formáty a vliv barevných prostorů RGB, sRGB a CMYK na výslednou velikost souboru jsou přitom témata, která spolu úzce souvisejí a která webmaster bez technického zázemí snadno přehlédne.
JPEG je výchozí formát pro fotografie
JPEG používá ztrátovou kompresi optimalizovanou pro fotografie s plynulými přechody barev. Při nastavení kvality kolem 75–85 % je rozdíl oproti originálu prakticky neviditelný, přičemž soubor má zlomek původní velikosti. Fotografie produktu, která z fotoaparátu „váží“ 8 MB, se po správné kompresi vejde pod 150 kB bez postřehnutelného zhoršení.
JPEG se nedoporučuje pro grafiku s ostrými hranami, textem nebo plochami jedné barvy. Na takových motivech ztrátová komprese vytváří viditelné artefakty kolem hran, které kazí dojem jinak čistého designu. Pro tento typ obsahu existuje lepší volba.
Kdy JPEG nepoužívat
- Loga a ikony s ostrými hranami
- Screenshoty s textem
- Grafika s průhledným pozadím
- Ilustrace s plochami jedné barvy
PNG pro grafiku, kde záleží na každém pixelu
Nedávno aktualizovaný formát PNG ukládá data bezeztrátově, takže každý pixel v souboru odpovídá přesnému originálu. Navíc podporuje průhlednost (alfa kanál), díky níž lze obrázek překrýt přes jakékoli pozadí bez bílé obrysy. PNG je tím pádem přirozeně skvělou volbou pro loga, ikony, UI prvky a screenshoty.
Nevýhodou je větší velikost souboru ve srovnání s JPEG při fotografickém obsahu. Fotografie uložená jako PNG zabere několikanásobek toho, co stejný snímek v JPEG, a vizuálně to nijak nepoznáte. PNG proto nemá smysl používat na fotografie.
I bezeztrátový formát přitom skýtá prostor pro optimalizaci. Kompresi PNG jde dále zlepšit redukcí barevné palety (palette quantization) – místo 16 milionů barev se obsah překóduje na 256 nejpoužívanějších, přičemž u ikon, ilustrací a UI grafiky bývá výsledek vizuálně totožný s originálem. Online PNG optimalizátor OptiBot tento proces zvládá přímo v prohlížeči bez odesílání souborů na cizí server. Zpracování probíhá lokálně, takže soubory neopustí váš počítač.
WebP, modernější alternativa s lepší kompresí
WebP vyvinul Google jako nástupce JPEG i PNG. Podporuje jak ztrátovou, tak bezeztrátovou kompresi a navíc průhlednost. V praxi to znamená, že fotografie ve WebP při srovnatelné vizuální kvalitě váží typicky o 25–35 % méně než JPEG a logo ve WebP bývá menší než stejný soubor v PNG. Nasazení formátu WebP tak může vaše stránky podstatně zrychlit.
Nasazení WebP má jeden praktický předpoklad: ověřit, zda ho podporují prohlížeče vaší cílové skupiny. Aktuálně WebP zvládají všechny moderní prohlížeče včetně Chrome, Firefox, Safari i Edge, takže pro většinu webů nejde o překážku. Starší verze Internet Exploreru ho nepodporují, nicméně jeho tržní podíl je zanedbatelný.
Kde WebP přináší největší úspory
| Typ obsahu | Doporučený formát | Alternativa |
|---|---|---|
| Fotografie | WebP / JPEG | – |
| Logo s průhledností | WebP / PNG | – |
| Ikony jednobarevné | SVG | PNG |
| Animace | WebP / AVIF | GIF |
U animovaného obsahu stojí za zmínku, že GIF jako formát přežívá spíš ze setrvačnosti. Srovnání optimalizace GIF versus WebP versus AVIF ukazuje, kdy ještě dává GIF smysl a kdy je přechod na modernější formát jednoznačnou volbou.
Jak řešit optimalizaci prakticky
Samotný výběr formátu je první vrstva. Druhou je komprese konkrétního souboru na co nejmenší přijatelnou velikost. Třetí vrstvou je nasazení na webu. To znamená správné rozměry v HTML atributech, lazy loading pro obrázky mimo viditelnou část obrazovky a případně responzivní obrázky přes atribut srcset, který prohlížeči nabídne různé verze souboru pro různá rozlišení.
Pracovní postup, který funguje u drtivé většiny webů, vypadá takto: fotografie ukládat jako WebP nebo JPEG s kvalitou 75–82 %, loga a UI grafiku zpracovat jako WebP s průhledností nebo PNG s redukcí palety, animace převést z GIF na WebP a výsledky pravidelně kontrolovat nástrojem PageSpeed Insights.
Co se děje, když se na formát nemyslí
Web, který neřeší formáty obrázků, za to tak či onak zaplatí. Platí přenosovými daty na serveru a platí ztrátou návštěvníků, kteří odejdou dřív, než se stránka načte. Průměrná stránka přenáší přes 900 kB v obrázcích, většinou zbytečně. Správná kombinace formátu a komprese tuhle hodnotu snižuje na třetinu bez jediné viditelné změny pro uživatele.
