Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov je veľmi dôležitá, nakoľko vám môže ušetriť čas pri načítavaní vašich stránok. Tým vám môže pomôcť zvýšiť návštevnosť stránky a váš web sa tak stáva úspešnejším. 

Veľkosť obrázkov

Používajte obrázky vždy v takej veľkosti, v akej ich zobrazujete. Je zbytočné načítavať obrázok v rozlíšení 1024×1024 px, pokiaľ ho na webe zobrazujete vo veľkosti 16×16 px. 

Nepreháňajte to s množstvom obrázkov. Čím viac obrázkov, tým viac dát sa načítava a tým je načítanie stránky pomalšie. Zamyslite sa, či má obrázok pre stránku pridanú hodnotu, napríklad pri písaní článkov. 

Vo WordPress sa každý obrázok pri jeho nahrávaní zmenší do 4 rôznych veľkostí a následne si môžeme načítať verziu obrázka, ktorá nám najviac pre danú stránku vyhovuje. Napríklad veľkosť miniatúry v blogu je iná ako veľkosť obrázka priamo v blogu. 

  • Miniatúra – 150 x 150 pixelov
  • Stredná veľkosť – maximálne 300 x 300 pixelov
  • Veľká veľkosť – maximálne 1024 x 1024 pixelov
  • Plná veľkosť – pôvodná veľkosť nahraného obrázka

Pre dodatočnú optimalizáciu webu je tiež možné si do WordPressu doplniť vlastné veľkosti obrázkov. 

Formát obrázkov

Bitmapové obrázky

  • Vhodné použiť pre veľmi detailné obrázky ako napríklad fotografie.
  • Bitmapové obrázky obsahujú mapu jednotlivých pixelov.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje veľké množstvo farieb, preto pôsobí živšie ako napríklad PNG, JPG je najvhodnejší pre zobrazenie fotografií.
  • Formát PNG podporuje menšie množstvo farieb ako JPEG, no rozdiel od JPEG podporuje priehľadnosť, taktiež lepšie zvláda text a ilustrácie.

Na tomto meme môžete vidieť rozdiel v zobrazení ilustrácií a textov medzi JPEG a PNG:

Rozdiel v zobrazení textov medzi JPEG a PNG
Rozdiel v zobrazení textov medzi JPEG a PNG
  • Formát WebP je možné využiť ako modernú náhradu za formáty JPG a PNG. Súbory v tomto formáte sú pri rovnakej kvalite značne menšie ako u konkurenčných formátov.
  • Zaujímavé je, že tento formát bol vyvinutý v Google.
  • WebP zatiaľ nie je pre WordPress natívne podporovaný, ale sú pluginy, ktoré pridávajú podporu. My používame WordPress plugin WebP Converter for Media

Vektorová grafika

  • Môže ušetriť obrovské množstvo dát, obsahuje inštrukcie v textovej podobe na vytvorenie obrázku a nie mapu pixelov, ako je to v prípade bitmapovej grafiky. Preto pre zobrazenie väčšieho obrázku nie je nutný väčší súbor.
  • Tam, kde je to aplikovateľné, je dobré ju preferovať pred bitmapovou (pixelovou).
  • Najčastejšie sa používa pre logá a rôzne ikony.
  • Veľkosť súborov narastá s množstvom detailov na obrázku.

Výhodný formát pre vektorovú grafiku na webe je SVG.

SVG obrázky nie je možné nahrať do knižníc médií vo WordPress. Tieto obrázky môžeme zobraziť pomocou kódu v plugine alebo v téme pri tvorbe HTML štruktúry, buď dodatočným načítaním alebo vnorením do HTML štruktúry.

Vo WordPress je práve možnosť použitia priamo v HTML užitočná aj v Gutenberg alebo Classic editore. SVG obrázky môžeme do editora vložiť ako vlastné HTML. Výhodou SVG obrázkov je tiež, že je možné upraviť ich zobrazenie pomocou CSS štýlovania, nakoľko sú bežná súčasť HTML.

Škálovateľnosť
Škálovateľnosť

Kompresia obrázkov

Obrázkové formáty podporujú zväčša viac úrovní kompresie, kde je pri silnejšej kompresii možné ušetriť viac dát, no na úkor kvality.

Pre každý obrázok, ktorý nahrávate na váš web, by mala byť aplikovaná kompresia. Viac skomprimované obrázky sú menšie a rýchlejšie sa načítajú používateľovi vášho webu. Netreba však zabúdať, že kompresiou sa stráca kvalita a preto treba zvoliť kompresiu, pri ktorej budú detaily obrázkov dostatočne zachované.

Príliš zkomprimovaný obrázok
Príliš zkomprimovaný obrázok

Tu môžete vidieť veľmi výhodný formát WebP, ktorý poskytuje najlepší pomer veľkosti súboru k jeho kvalite, v porovnaní s JPEG formátom.

Porovnanie zobrazenia formátu WebP a JPEG
Porovnanie zobrazenia formátu WebP a JPEG

WordPress pluginy pre kompresiu obrázkov

S kompresiou obrázkov vám môže pomôcť dobrý WordPress plugin. Pluginy existujú rôzne, no tu vám spomenieme len niektoré pluginy pre kompresiu obrázkov. 

  • EWWW Image Optimizer – Tento WordPress plugin je bezplatný a pri nahrávaní obrázkov ich automaticky komprimuje
  • Smush – okrem kompresie obrázkov obsahuje aj iné užitočné optimalizačné techniky.
  • WebP Converter for Media – Nahrádza súbory JPG a PNG formátom WebP, čím môžete bez straty kvality ušetriť viac ako polovicu zaťaženia. Po inštalácií pluginu sa obrázky automaticky prevedú do nového formátu. 

Optimalizácia a kompresia obrázkov je len jedným z mnohých aspektov, ktoré vám môžu dopomôcť so zrýchlením vašej stránky a so zvýšením jej návštevnosti. Ak sa chcete dozvedieť viac, prečítajte si článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress alebo Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Ak máte záujem o viac informácií a potrebujete poradiť či pomôcť so zrýchlením vašej webovej stránky, napíšte nám a my vám radi pomôžeme. 

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.