PNG optimalizátor online, který přijde na řadu až po kontrole profilu a rozměrů

Nasadit kompresi na PNG soubor hned po jeho přijetí od grafika bývá lákavé, ve skutečnosti ale často ošidí výsledek, protože soubor předtím ještě potřebuje jinou úpravu. PNG optimalizátor online patří do celého postupu přípravy grafiky pro web až na samotný konec, ne na jeho začátek. Jak takový nástroj funguje, vyzkoušejte zde. Tento dřívější článek o přípravě grafiky pro firemní web popsal celý čtyřkrokový postup, tenhle text se zaměřuje na to, proč na pořadí kroků záleží a kde na webu váha PNG souborů nejvíc uškodí.

Proč komprese přichází na řadu až jako poslední krok

Soubor od grafika obvykle prochází ještě dvěma kontrolami, než se vůbec dostane ke kompresi, totiž ověřením barevného profilu a ověřením rozměrů. Komprese aplikovaná na soubor se špatným profilem nebo zbytečně velkými rozměry sice soubor zmenší, ale zafixuje v něm i chyby, které by bylo lepší opravit dřív a v mnohem větším rozsahu, než jaký komprese sama dokáže vyřešit. Mezi kontrolu rozměrů a samotnou kompresi navíc patří ještě jeden krok, odstranění zbytečných metadat, tedy ICC profilu, komentářů či dalších informací, které si grafický program do souboru automaticky přidá a které prohlížeč návštěvníka k ničemu nepotřebuje.

Barevný profil, který se řeší jako první

Grafické podklady určené původně pro tisk bývají uložené v barevném prostoru CMYK, zatímco web pracuje s prostorem RGB, konkrétně jeho podmnožinou sRGB. Rozdíl mezi oběma prostory spočívá už v samotném principu míchání barev, CMYK funguje na subtraktivním principu s výchozí bílou barvou papíru, RGB naopak na aditivním principu s výchozí černou. Soubor ponechaný v profilu CMYK se v prohlížeči zobrazí s posunutými barvami, žádná komprese tento posun sama neopraví, protože pracuje s daty, ne s jejich barevnou interpretací.

Rozměry, které komprese sama nespraví

Podklad připravený pro tisk bývá uložený v rozlišení kolem 300 bodů na palec, zatímco web běžně pracuje s rozlišením 72 až 96 bodů na palec. Logo o šířce několika tisíc pixelů, zobrazené v hlavičce webu na šířku pár set pixelů, ponese zbytečně mnoho dat i po kompresi, protože komprese sama velikost pixelové mřížky nemění. Zmenšení rozměrů na skutečnou zobrazovanou velikost proto musí proběhnout dřív, jinak zůstává na stole podstatná část možné úspory.

Kde na webu váha PNG nejvíc uškodí

Schéma webové stránky se zvýrazněnými místy s největší váhou obrázků – logo v hlavičce, řada log partnerů, mřížka ikon a infografika

Logo v hlavičce se na rozdíl od většiny ostatního obsahu načítá úplně na každé stránce webu, a právě obrázky patří mezi prvky, které prohlížeč běžně vyhodnotí jako největší viditelný prvek při měření rychlosti vykreslení, jak popisuje tento materiál o metrice Largest Contentful Paint, podle kterého by se tento prvek měl na mobilu vykreslit do 2,5 sekundy. Těžké logo v hlavičce tak dokáže zhoršit hodnocení rychlosti prakticky každé podstránky webu najednou. Podobně se zbytečná váha kumuluje v sekcích s logy partnerů nebo klientů, kde bývá naráz vedle sebe deset a víc obrázků z různých zdrojů, i u sad ikon na stránce služeb, kde se drobná úspora u každé jednotlivé ikony sečte do zajímavého celkového čísla. Infografiky vložené do blogových článků coby PNG export z grafického programu bývají další skrytou zátěží, protože oproti logu nebo ikoně obsahují víc detailů a barevných přechodů, takže i po kompresi zůstávají datově těžší než zbytek stránky, na které se objevují.

Co online PNG optimalizátor v tomto pořadí řeší

Obrázek procházející trychtýřem se zužující se barevnou paletou a ikonou serveru, na výstupu porovnání dvou verzí souboru

Teprve poté, co je barevný profil v pořádku a rozměry odpovídají skutečné zobrazované velikosti, dává komprese plný smysl. Online nástroj v tomto kroku zmenší paletu barev na potřebnou míru a výsledek porovná s originálem ještě před stažením, takže je vidět, jestli soubor po celém postupu skutečně odpovídá tomu, co se z něj na stránce zobrazí. Zpracování probíhá přímo v prohlížeči nebo na serveru bez nutnosti cokoliv instalovat, takže se hodí i pro člověka, který grafiku pro web sice přijímá a upravuje, ale sám ji netvoří a nemá k dispozici plnohodnotný grafický program.

Co se děje s nahranými soubory

Online nástroje tohoto typu obvykle zpracují soubor a po určité době, často po hodině od nahrání, data automaticky odstraní ze serveru. Původní soubor zůstává nedotčený v zařízení uživatele, takže je možné se ke kterémukoliv kroku přípravy kdykoliv vrátit a zopakovat ho jinak, třeba s jiným nastavením palety i s upraveným barevným profilem.

Nejčastější chyby v praxi

V praxi se u přípravy PNG grafiky pro web opakuje několik podobných problémů:

  1. Komprese souboru ještě v barevném profilu CMYK, aniž by proběhl převod do sRGB.
  2. Komprese loga v tiskovém rozlišení bez předchozího zmenšení na cílovou šířku zobrazení v hlavičce.
  3. Přehlédnutí sekce s partnerskými logy, kde se váha jednotlivých souborů sčítá do výrazné celkové zátěže.
  4. Zaměnění pořadí kroků, kdy se komprese provede jako první a kontrola profilu i rozměrů se přeskočí úplně.

Co si z tohoto postupu odnést

Komprese PNG souboru funguje nejlépe jako poslední krok, ne jako první, protože barevný profil a rozměry ovlivňují výsledek mnohem víc než samotná míra komprese. Logo v hlavičce, sekce s partnerskými logy a sady ikon patří mezi místa, kde se zanedbaná příprava grafiky projeví na rychlosti celého webu nejvýrazněji.

Kontrolujete si u grafiky od dodavatele barevný profil a rozměry ještě předtím, než ji zkomprimujete, nebo tento krok obvykle přeskakujete?

Jiřina Marešová
Share

Author

Jiřina Marešová

Fitness se věnuji intenzivně a v podstatě každý den. Nebylo tomu tak ale vždycky. Deset let zpátky jsem vážila o čtyřicet kilo víc a vyhýbala se zrcadlům, než jsem si řekla dost. Svůj příběh hubnutí den za dnem jsem tehdy mapovala ve svém osobním blogu a radost z psaní mi od té doby už zůstala.