Firemní logo se na webu zobrazuje na každé stránce, přesto patří k souborům, které málokdo zkomprimuje před nahráním. Komprese PNG OptiBot je jednoduchá náprava. Nejdřív je ale potřeba pochopit, proč grafické soubory od designérů bývají zbytečně těžké a co se s nimi dělá před tím, než se dostanou na web. Článek je určen marketérům a majitelům firem, kteří přebírají podklady od grafika a sami rozhodují o tom, co nahrají do CMS.
Proč jsou soubory od grafika pro web nevhodné přímo z ruky
Grafik pracuje s jiným cílovým výstupem než webmaster. Logo dodané pro tisk má rozlišení 300 DPI, může mít velikost několik megabajtů a být uložené v barevném prostoru CMYK. Web zobrazuje obrázky při 72–96 DPI v sRGB. Soubor o velikosti 4 MB pro logo v hlavičce webu je čistá zátěž bez jakéhokoli vizuálního přínosu.
Druhý problém je v barevném profilu. Rozdíly mezi RGB, sRGB a CMYK přímo ovlivňují výslednou velikost souboru i věrnost barev v prohlížeči – logo exportované v CMYK se v prohlížeči zobrazí s posunutými barvami a soubor je zároveň zbytečně velký. Před nahráním na web vždy v sRGB.
Třetím problémem je absence komprese. Grafici exportují PNG v maximální kvalitě, protože pracují s tím, že soubor bude dále upravován nebo tisknout. Pro web to neplatí. Maximální kvalita PNG pro logo v hlavičce webu přináší soubor, který zbytečně zpomaluje každé načtení každé stránky.
Kdy použít PNG a kdy sáhnout po jiném formátu
PNG je správná volba pro firemní grafiku ve třech případech:
- logo nebo ikona potřebuje průhledné pozadí (alfa kanál),
- grafika obsahuje ostré hrany a text, které by JPEG znehodnotil viditelnou kompresní artefakty,
- nebo jde o screenshoty a UI prvky s plochami jedné barvy.
Pro fotografie na webu PNG smysl nedává. JPEG nebo WebP přinesou mnohonásobně menší soubor při stejné vizuální kvalitě. Animované prvky mají svá vlastní pravidla a volba mezi GIF, WebP a modernějšími formáty závisí na konkrétním použití a podpoře prohlížečů.
SVG je pro loga a ikony ještě lepší volba než PNG tam, kde to technicky jde. Vektorový formát se nerozpixeluje na žádném rozlišení, soubor bývá menší než PNG a prohlížeč ho vykresluje přímo bez načítání rastrového obrázku. Pokud grafik dodá logo ve vektorovém formátu AI nebo EPS, požádejte o export do SVG – pro web je to výchozí volba. PNG přichází na řadu tehdy, když SVG z technických důvodů nelze použít nebo když grafika obsahuje složité textury a přechody, které se ve vektoru špatně realizují.
Detailnější porovnání různých formátů a jejich využití přináší ještě tento článek.
Jak PNG soubory správně připravit
Postup přípravy PNG grafiky od grafika pro web má čtyři kroky.
- Ověřte barevný profil. Soubor musí být v sRGB. Pokud grafik dodal podklady v jiném profilu, požádejte o konverzi, nebo ji proveďte sami v libovolném editoru před dalším zpracováním.
- Zkontrolujte rozměry. Logo v hlavičce webu zpravidla potřebuje šířku 200–400 px. Soubor dodaný v rozlišení 3000 × 1500 px neslouží webu k ničemu a jen přidává na velikosti. Zmenšení na cílové rozměry proběhne v editoru nebo přímo při exportu.
- Odstraňte zbytečná metadata. PNG soubory z grafických programů nesou EXIF data, ICC profil, komentáře a další metadata, která prohlížeč nepotřebuje. Jejich odstraněním se soubor zmenší bez jakékoli vizuální změny.
- Zkomprimujte soubor. Tady přichází na řadu komprese PNG OptiBot. Nástroj zpracovává soubory lokálně v prohlížeči bez jejich odeslání na cizí server – pro firemní loga a grafiku s interní vizuální identitou jde o praktický argument. Optibot aplikuje palette quantization, která zredukuje barevnou paletu PNG na 256 nejpoužívanějších barev. U log a ikon s omezeným počtem barev je výsledek vizuálně totožný s originálem, přičemž soubor bývá menší o 50–70 %.
Kde na webu grafika nejvíce zatěžuje výkon
Několik míst na typickém firemním webu, kde nekomprimované PNG soubory způsobují největší problémy:
- Hlavička a patička – logo se načítá na každé stránce webu. Soubor o velikosti 800 kB v hlavičce přidá tuto zátěž ke každému načtení, což přímo zhoršuje LCP metriku a hodnocení Google.
- Sekce s partnery nebo klienty – loga partnerů bývají sesbírána z různých zdrojů a nahrána bez jakékoli úpravy. Deset partnerských log po 600 kB tvoří 6 MB přenesených dat jen pro tuto jednu sekci.
- Blogové příspěvky s infografikami – infografiky exportované jako PNG z Canvy nebo Adobe Illustratoru bývají těžké 2–5 MB. Právě tento typ obsahu bývá na firemních webech nejčastěji přehlíženou zátěží.
- Ikony služeb a benefitů – sekce s ikonami na homepage nebo na stránce služeb obvykle obsahuje 6–12 PNG souborů. I malá úspora na každém z nich se v součtu projeví na celkovém výkonu stránky.
Workflow pro příjem grafických podkladů
Udržitelný postup pro každou firmu, která pravidelně dostává grafické podklady od designéra nebo agentury, vypadá takto: při objednávce grafiky specifikujte formát SVG pro loga a ikony a PNG v sRGB pro ostatní grafiku, zkontrolujte barevný profil a rozměry po přijetí souborů, spusťte dávkovou kompresi PNG souborů nástrojem před importem do CMS a výsledky ověřte v Google PageSpeed Insights po nahrání.
Celý postup nezabere víc než několik minut a výsledek je stránka, která se načítá rychleji bez jediné viditelné změny pro návštěvníka.
Napadá vás sekce na vašem webu, kde loga nebo ikony načítáte, aniž byste věděli, jak velké soubory za nimi stojí?
