Optimalizujme obrázky na WordPressu a zrychleme tak celý web

TV28. května 2020

5minutové čtení

Rychlý web díky optimalizovaným obrízkům

📝Obsah

Než se vůbec pustíme do psaní článků a tvorby obsahu, tak je dobré web vyladit i z technického hlediska. Mezi nejdůležitější optimalizaci na webu patří jednoznačně optimalizace obrázků. Obrázky tvoří typicky poměrně zásadní podíl z plochy webových stránek, a navíc jde také o celkem velké soubory, které mohou velmi razantně navýšit dobu načítání webu.

Problém je také v tom, že zcela neoptimalizované obrázky mohou být obrovské a zabírat klidně i několik megabajtů. Zvláště lidé, kteří nemají neomezená mobilní data a podívají se na váš web, vám rozhodně nepoděkují, protože návštěva vašeho webu jim tato data rychle vyplácá. Jestli má třeba průměrná velikost jedné vaší stránky 1 megabajt, tak jedna (nedej bože více) velmi hrubě neoptimalizovaná fotka může velikost této stránky zcela zbytečně i několikrát znásobit.

Proto je na optimalizaci obrázků potřeba myslet a řešit jí jako jednu z prvních věcí na webu. Podíváme se, jak optimalizace funguje, jak jí řešit na počítači i automatizovaně na webu, a podíváme se také na doporučované pluginy zdarma i placené, které se o optimalizaci obrázků postarají.

Optimalizace ztrátová a bezztrátová (lossy a lossless)

Optimalizace obrázků si dává za cíl zmenšit soubor s obrázkem, tedy ho zkomprimovat. Představit si to můžeme třeba tak, že v souboru se nachází řada 5+5+5+5+5, což je 9 znaků, ale tuto řadu můžeme přepsat na 5⁵, tedy 2 znaky. V praxi je to úplně to samé, ale ve druhém případě je zápis kratší a tedy i soubor bude menší. Pokud tedy tuto první řadu přepíšeme na 5⁵ a jsme schopni pochopit, co se tím myslí, tak je pro nás tento zápis vhodnější a kratší.

Komprese dat probíhá pomocí různých algoritmů a složitých funkcí, které není třeba znát dopodrobna. Co je potřeba znát, je rozdíl mezi ztrátovou a bezztrátovou kompresí:

Ztrátová komprese (lossy)

Komprese dat proběhne v praxi tak, že se zhorší kvalita obrázku a typicky se vyhází ty informace a data, které nejsou potřeba nebo které lidské oko ani nerozezná. Ztrátová komprese nabízí lepší optimalizaci z pohledu velikosti souboru, ovšem je potřeba počítat s tím, že obrázky ztratí na kvalitě a typicky nebudou tak ostré, což se nehodí třeba v případě, kdy je váš web založen na opravdu kvalitních fotografiích ve vysokém rozlišení. Obecně pak čím větší ztráta dat (a tedy v praxi informací o obrázku), tím více je zhoršena kvalita obrázku.

Bezztrátová komprese (lossless)

Tento způsob komprese (nejenom obrázků) znamená, že soubor se zmenší, ale je možné ho obnovit do zcela původní podoby bez ztráty jakýchkoliv informací. V případě obrázků to znamená, že se nijak nezmenší jejich kvalita. Bezztrátová komprese byla uvedena na začátku s řadami 5+5+5+5+5=5⁵. Mezi těmito zápisy můžeme dát rovnost a neztratila se žádná informace, přestože jeden zápis je výrazně kratší. Bezztrátová komprese nenabízí tak dobrý poměr mezi původním a optimalizovaným obrázkem, na druhou stranu vypadají tyto obrázky zcela identicky.

Můžeme se setkat i s různými mezistupni, kdy je výsledný obrázek opravdu velmi podobný původní variantě bez optimalizace, ale pak už jde hlavně o potřeby vašeho webu a jak moc kvalitní obrázky opravdu mají být, nebo jestli si můžete dovolit, aby holt nebyly tak perfektně ostré, ale zase web běžel opravdu rychle. Vždy tak máte na výběr mezi bezztrátovou a ztrátovou komprimací, jen ona ztráta může být nižší nebo vyšší.

Klíčový je i formát obrázku

Obrázek je možné uložit v různých formátech, které se samy o sobě také starají o nějaký stupeň optimalizace.

Nejtypičtější formáty jsou JPG a PNG + GIF pro pohyblivé obrázky:

JPG je ztrátový formát, který je velmi efektivní u fotografií, které v JPG vypadají v zásadě zcela identicky, ale nabízí opravdu skvělý kompresní poměr.
PNG je bezztrátový formát, který se skvěle hodí pro ilustrace, webovou grafiku nebo když má nějaká část obrázku být průhledná. I PNG nabízí velmi zajímavý kompresní poměr ve chvíli, kdy jde o velmi jednoduché ilustrace o několika barvách. Nehodí se ale pro fotografie, protože jsou pak tyto soubory opravdu velké, což je v drtivé většině případů nežádoucí. Pokud ale opravdu potřebujete, aby soubor neztratil nic na své kvalitě, tak můžete volit PNG.
GIF je v zásadě předchůdce formátu PNG, který ale má své místo díky tomu, že nabízí možnost pohyblivých obrázků. Obrázek pak v zásadě vypadá jako video, které se neustále dokola přehrává.

Formát obrázku bychom si měli rozmyslet a na webu použít ten, který se hodí nejvíce. Weby zaměřené na profesionální fotografie mohou využívat u formáty jiné, ale naprosto drtivá většina obrázků na webech je ve formátu JPG, PNG, GIF nebo webový formát webp, který si díky vyšší podpoře ze strany internetových prohlížečů také našel své místo na slunci, ale zatím rozhodně nejde o nějaký vyložený standard na všech webech.

Optimalizovat můžete na počítači nebo až na webu

Optimalizovat obrázky můžete úplně v pohodě třeba na svém počítači s programy zdarma. Programy jako IrfanView umí optimalizovat obrázky velmi účinně, můžete si vše ořezávat, zvolit procento komprese a tak podobně. I takové klasické Windowsácké Malování je rozhodně lepší než nic a ukládá obrázky celkem slušně optimalizované. Na druhou stranu je to práce navíc, takže je výhodnější využívat nějaké automatizované optimalizace, která se postará o to, aby nahrané a zobrazené obrázky na webu měly správnou velikost a byly zkomprimované.

To vám ušetří čas a nemusíte se starat o to, jestli ten nebo onen obrázek byl nahrán v té nebo oné velikosti. Jestli pak na váš web píše více autorů, tak je nějaká automatizovaná metoda rozhodně velmi žádaná, protože se pak opravdu nemusíte o nic starat a všechny obrázky budou v pořádku.

Obecně cokoliv, co vám dlouhodobě ušetří práci a nemusíte se o to starat, je dobrá věc. Každý manuální úkon znamená, že můžete někdy zapomenout, a v případě obrázků je fajn, když se prostě optimalizují někde na pozadí, aniž vy byste museli něco dělat.

Zase je tu WordPress a pluginy

Optimalizace obrázků je na WordPressu díky pluginům naprostá hračka. Na výběr je znovu z řady pluginů, které jsou zcela zdarma a nabízí typicky poměrně základní funkce, ale pak také placené pluginy, které nabízí více funkcí a nastavení.

reSmush.it – Tento plugin je jedním z nejpoužívanějších, a z dobrého důvodu. Můžete zdarma optimalizovat obrázky do 5 MB (tedy v praxi cokoliv, co najdete na běžných webových stránkách, které nejsou zaměřeny na fotografie ve vysokém rozlišení). Optimalizovat můžete automaticky všechny nahrané obrázky ve formátech PNG, JPG i GIF, ale také hromadně všechny obrázky, které už na webu máte. Můžete také z optimalizace některé obrázky vynechat nebo je obnovit ze zálohy. S reSmush.it rozhodně nešlápnete vedle a plugin prostě dělá svoji práci velmi dobře, efektivně a nemusíte se o nic starat.
EWWW Image Optimizer – Další skvělá volba zcela zdarma. Optimalizace probíhá přímo na vašem serveru, takže není potřeba se připojovat přes API nebo zakládat účty, ale je to možné pro získání dalších funkcí. S EWWW Image Optimizer se v zásadě nemusíte o nic starat a po prvotním nastavení podle vašich představ už se plugin stará o vše ostatní zcela sám.
Shortpixel Image Optimizer – Toto je placený plugin, kdy máte zdarma na měsíc zdarma 100 obrázků (což vzhledem k tomu, že šablona obvykle vytvoří po nahrání jednoho obrázků více verzí o více velikostech, tak těchto 100 obrázků vyčerpáte velmi rychle). Co se ceny týče, tak si můžete pořídit měsíční předplatné, nebo jednorázové kredity, které se strhávají podle toho, kolik obrázků nahráváte. Nejnižší (a poměrově nejdražší) varianta stojí 10 dolarů na 10 tisíc obrázků, což vystačí v pohodě třeba celý rok, když nenahráváte obrázků nějak hodně. Cena je tedy více než férová, a plugin je napěchován funkcemi, automaticky vytváří WebP verze obrázků zdarma, které pak můžete snadno také zobrazovat těm návštěvníkům, kteří mají podporovaný prohlížeč. Sami si také zvolíte kvalitu/ztrátovost optimalizace, a kde to nevyhovuje, tak můžete u jednotlivých obrázků optimalizovat znovu. Všechny obrázky se ukládají do zálohy, takže o originální verze nikdy nepřijdete a můžete je kdykoliv obnovit.