Než se řeší hosting, kód nebo cache, vyplatí se podívat na jedinou věc, která na většině webů tvoří rozhodující část přenášených dat. Optimalizátor obrázků online cílí přesně na tuto oblast, tedy na fotografie a grafiku, které dohromady obvykle váží víc než všechno ostatní na stránce dohromady. Vyzkoušet takový nástroj jde klikněte zde. Tento text vysvětluje, proč obrázky hrají v rychlosti webu tak velkou roli, a kam přesně jejich komprese zapadá mezi ostatní kroky, které si zrychlení webu obvykle žádá.
Proč obrázky tvoří největší podíl váhy stránky
Podle analýzy HTTP Archive tvoří obrázky, videa a další mediální obsah v průměru 60 až 80 procent veškerých dat, která se při načtení stránky přenesou, jak shrnuje přehled optimalizace obrázků a médií. Tento podíl je natolik vysoký, že i drobná úprava obrázků má na celkovou rychlost obvykle větší dopad než úpravy kódu, které zaberou mnohem víc času. Zmenšení souborů o pár desítek procent tak dokáže zkrátit dobu načítání o stovky milisekund, u stránek s víc obrázky klidně o víc než sekundu. Rozdíl bývá u jednotlivého souboru dramatický, fotografie přímo z telefonu s několika megabajty se po kompresi běžně vejde do desítek či nízkých stovek kilobajtů, aniž by na běžné obrazovce šel poznat rozdíl v kvalitě.
Co dělá optimalizátor obrázků online konkrétně
Online nástroj tohoto typu zpracuje nahraný soubor přímo v prohlížeči nebo na serveru, aniž by bylo nutné cokoliv instalovat do počítače. Uživatel nahraje obrázek, porovná verzi před úpravou a po ní pomocí posuvníku, a teprve pak stáhne výsledek. Celý postup zabere jednotky vteřin na jeden soubor, i u větší dávky obrázků najednou. Zpracování víc souborů v jedné dávce navíc umožňuje projít celou fotogalerii či sadu ikon najednou, místo aby se každý soubor musel nahrávat a stahovat samostatně přes samostatný krok. Nezbytným krokem po optimalizaci je Kontrola rychlosti webu a jejího výsledku.
Jedno místo pro tři nejběžnější formáty
Většina webů kombinuje fotografie ve formátu JPEG, grafiku ve formátu PNG a občas i animace ve formátu GIF, přičemž každý z nich se komprimuje jiným principem. Online optimalizátor, který zvládne všechny tři formáty na jednom místě, ušetří přepínání mezi několika různými nástroji podle typu souboru, který se zrovna zpracovává. U fotografie funguje ztrátová komprese založená na kvantizaci, u loga či ikony spíš zmenšení barevné palety, a u animace se navíc odstraní i redundantní pixely mezi jednotlivými snímky. Sjednocení všech tří přístupů do jednoho rozhraní znamená, že se autor obsahu nemusí učit ovládání tří odlišných programů jen kvůli tomu, aby stránku připravil pro publikaci.
Kam komprese obrázků zapadá v širším auditu rychlosti
Komprese obrázků bývá jen prvním krokem z delšího seznamu úprav, které rychlost webu ovlivňují. Tento checklist rychlosti webu v osmi krocích řadí kompresi obrázků na první místo, hned za ní ale následuje volba formátu, lazy loading, kvalita hostingu, minifikace kódu, komprese na serveru, cache a průběžné měření. Samotné zmenšení obrázků tak sice řeší největší jednotlivou položku, ale bez zbylých kroků zůstává na stole ještě dost prostoru pro další zrychlení. Volba formátu a lazy loading přitom zabere podobně málo času jako samotná komprese, zatímco úpravy hostingu, minifikace kódu nebo nastavení cache už obvykle vyžadují zásah do technického zázemí webu, ne jen do jednotlivých souborů.
Proč se rychlost vůbec vyplatí řešit
Přínos rychlejšího webu potvrzují opakovaně i konkrétní čísla z praxe. Přibližně 53 procent návštěv se pravděpodobně ukončí, pokud se stránka na mobilu načítá déle než tři sekundy, jak uvádí tento materiál o důvodech pro optimalizaci rychlosti webu. Podle stejného zdroje si retailová firma zkrácením načítání o pět vteřin zlepšila konverzní poměr o dvanáct procent a počet zobrazených stránek o čtvrtinu, jiná velká maloobchodní síť zase zaznamenala nárůst konverzí o dvě procenta při zrychlení homepage jen o jedinou vteřinu. Právě proto se vyplatí začít úpravou, která má na celkovou váhu stránky největší vliv, tedy kompresí obrázků, a teprve pak pokračovat dál.
Co se děje s nahranými soubory
Online nástroje tohoto typu obvykle nahraný soubor po určité době automaticky odstraní ze serveru, často už po hodině od zpracování. Původní obrázek zůstává nedotčený v zařízení uživatele, takže je možné kdykoliv zkusit jinou míru komprese a porovnat výsledek. U citlivějšího obsahu se vyplatí předem ověřit, jak dlouho a za jakých podmínek si konkrétní nástroj nahraná data ponechává.
Nejčastější chyby v praxi
V praxi se u komprese obrázků na webu opakuje několik podobných problémů:
- Komprese jen několika nejviditelnějších obrázků, zatímco desítky menších souborů dál zbytečně zatěžují stránku.
- Přesvědčení, že úspora pár desítek kilobajtů u jednoho obrázku nestojí za pozornost, i když se násobí napříč celým webem.
- Zastavení se u komprese obrázků jako u jediného kroku, aniž by se prověřily i hosting, cache nebo minifikace kódu.
- Nahrání citlivého obsahu do online nástroje bez ověření, jak dlouho a za jakých podmínek si soubory na serveru ponechává.
Co si z tohoto postupu odnést
Obrázky tvoří na většině webů nejvýraznější část přenášených dat, takže jejich komprese patří mezi úpravy s největším poměrem přínosu k vynaloženému úsilí. Zmenšení souborů online nástrojem bez instalace softwaru je rychlý první krok, dalších sedm bodů z širšího checklistu rychlosti webu ale rozhoduje o tom, jestli se zrychlení projeví naplno.
Řešíte na svém webu kompresi obrázků jako první krok širšího auditu rychlosti, nebo zatím zůstává jedinou úpravou, kterou jste stihli udělat?
Loading...