Optimalizácia obrázkov vo WordPresse

Používate na svojej WordPress stránke množstvo obrázkov v plnej veľkosti? Upozorňujeme, že to spomaľuje načítavanie vašich stránok. Pomalý web ovplyvňuje vaše SEO, zvyšuje mieru okamžitých odchodov a odrádza vaše publikum. Tento článok vám pomôže naučiť sa, ako ľahko optimalizovať všetky obrázky na vašom webe (manuálne alebo na autopilota), aby ste dosiahli rýchlejšie časy načítavania. 

Každého trápi pomalý web. Nielen to, že odrádza návštevníkov, ale tiež ovplyvňuje aj vaše SEO. Snaha udržiavať stránku „v kondícii“ je teda jednou z hlavných položiek, na ktoré sa musíte sústrediť, keď prevádzkujete alebo sa zameriavate na tvorbu webov a tvorbu eshopov. 

Existuje mnoho spôsobov, ako zrýchliť svoje WP stránky, pričom každý z nich sa dopĺňa s ostatnými. Univerzálna metóda neexistuje. Zlepšenie rýchlosti vášho webu je v skutočnosti súhrnom viacerých týchto metód dohromady. Jednou z nich je optimalizácia obrázkov, ktorej sa v tomto príspevku budeme rozsiahlo venovať rozsiahlo. 

Čítajte ďalej, aby ste sa naučili, ako manuálne a automaticky optimalizovať všetky obrázky na vašom WP webe. Toto je krok-po-kroku sprievodca optimalizáciou obrázkov, vďaka ktorému bude váš web ľahký a rýchlejší. 

Dôležitosť optimalizácie obrázkov

Podľa Snipcartu existujú tri hlavné dôvody, ako obrázky ovplyvňujú váš WP web:

• Sú príliš veľké. Používajte menšie veľkosti. O tom si ešte poviem v článku.
• Je ich príliš veľa, čo vyžaduje množstvo požiadaviek HTTP. Pomôže vám použitie siete CDN.
• Prispievajú k synchrónnemu načítaniu prvkov spolu s HTML, CSS a JavaScript. To vo finále zvyšuje čas renderu. Postupné zobrazovanie obrázkov zabráni súčasnému načítaniu obrázkov spolu s ostatnými prvkami, čo umožňuje rýchlejšie načítanie stránky.

Takže áno, optimalizácia obrázkov je základným postupom, ktorý odľahčí váš web. Najskôr však musíte zistiť, čo spôsobuje, že sa vaše stránky načítavajú pomaly. Tu pomôžu rýchlostné testy.

Ako otestovať rýchlosť vášho WordPress webu 

Existuje množstvo nástrojov, ktoré testujú rýchlosť vášho webu. Najjednoduchšou metódou je Pingdom.

Pingdom je populárny nástroj, ktorý používajú príležitostní používatelia aj vývojári. Všetko, čo musíte urobiť, je otvoriť Pingdom a vložiť adresu URL vášho webu WordPress, zvoliť umiestnenie, ktoré je najbližšie k umiestneniu dátového centra vášho hostingu (na základe serverov vášho hostiteľa), a spustiť test. Ak máte na svojom webe nainštalovanú sieť CDN, na umiestnení veľmi záleží. Ale o tom neskôr.

Na tomto nástroji je pekné, že bez ohľadu na to, aké jednoduché je jeho rozhranie, zobrazuje pokročilé informácie o výkonnosti webových stránok, čo je pre vývojárov nesmierne prínosné.

Z týchto štatistík zistíte, či sa vášmu webu darí alebo je potrebné ho vylepšiť (alebo oboje). Je to pekné, pretože vám poskytuje veľa údajov a rád zameraných na stránky, požiadavky a iné druhy problémov a analýz výkonu. (?) (It’s nice because it gives you plenty of data and advice on pages, requests, and other sorts of issues and performance analysis.)

(Large preview)

GTmetrix je ďalším skvelým nástrojom, ktorý je podobný programu Pingdom a ktorý do hĺbky analyzuje rýchlosť a výkon vášho webu.

Poznámka: Pri GTmetrix bude váš web vykazovať pomerne horšie hodnoty ako pri nástroji Pingdom; je to na základe rozdielu v počítaní údajov. Neexistujú žiadne nezrovnalosti, ide iba to, že GTmetrix meria úplný čas načítania na rozdiel od Pingdom, ktorý počíta iba čas načítania.

Čas načítania počíta rýchlosť, ktorou sa stránka úplne spracuje a dokončí sťahovanie všetkých súborov na nej. Preto bude čas načítania vždy rýchlejší ako čas úplného načítania.

Čas úplného načítania nastane po procese načítania, keď stránka začne znova prenášať údaje, čo znamená, že GTmetrix zahŕňa časy načítania, keď počíta rýchlosť stránky. V zásade meria celý cyklus odpovedí a prenosov, ktoré získava z príslušnej stránky. Preto sú hodnoty pomalšie.

Google PageSpeed ​​Insights je ďalší obľúbený nástroj na testovanie rýchlosti vašich stránok. Na rozdiel od prvých dvoch nástrojov, ktoré zobrazujú výkon vášho webu iba na počítačoch, je oficiálny testovací nástroj spoločnosti Google dobrý aj na meranie rýchlosti mobilnej verzie vášho webu.

Okrem toho vám Google poskytne najlepšie odporúčania týkajúce sa toho, čo je potrebné na vašom webe vylepšiť, aby sa časy načítania zlepšili.

Spravidla pomocou jedného z týchto troch nástrojov môžete zistiť, ako veľmi vaše obrázky ovplyvňujú rýchlosť vášho webu.

Ako zrýchliť váš WordPress web 

Pretože sa tento článok samozrejme venuje optimalizácii obrázkov, hádali ste správne, že toto je jedna z metód. Predtým, ako sa však dostaneme do hĺbky optimalizácie obrázkov ako takej, poďme si v krátkosti povedať o ďalších spôsoboch, ktoré vám pomôžu, ak máte na svojej stránke nahraných množstvo obrázkov.

Caching (ukladanie do vyrovnávacej pamäte)

Catching je akcia dočasného uloženia údajov do medzipamäte, takže ak používateľ navštevuje vaše stránky často, údaje sa doručia automaticky bez toho, aby znova prešli procesom počiatočného načítania (k čomu dochádza pri prvej návšteve stránky). Vyrovnávacia pamäť je druh pamäte, ktorá zhromažďuje údaje, ktoré sa pravidelne požadujú pri každej návšteve a používa sa na zvýšenie rýchlosti poskytovania týchto údajov.

Ukladanie do pamäte cache je v skutočnosti naozaj jednoduché. Nezáleží na tom, či to robíte ručne alebo nainštalovaním doplnku, dá sa na vašom webe implementovať pomerne rýchlo. Medzi najlepšie doplnky patria WP Super Cache a W3 Total Cache a WP Super Cache - sú bezplatné a najlepšie hodnotené v oficiálnom úložisku WordPress.org.

Siete na doručovanie obsahu

Sieť CDN požiada o obsah vašej stránky z najbližšie umiestneného servera k miestu vašich čitateľov. (A CDN will request your site content from the nearest server location to your readers’ accessing point.) To znamená, že uchováva kópiu vašej stránky v mnohých dátových centrách umiestnených na rôznych miestach po celom svete. Akonáhle návštevník navštívi vaše stránky prostredníctvom svojho domovského umiestnenia, najbližší server si vyžiada váš obsah, čo sa prejaví v rýchlejšom načítaní. Cloudflare a MaxCDN (teraz StackPath) sú najobľúbenejšie riešenia pre WordPress.

GZIP kompresia

Pomocou tejto metódy môžete komprimovať súbory svojho webu tak, že ich zmenšíte. Toto zníži bandwidth vášho webu a rýchlejšie prenesie príslušné súbory do prehliadača.

WP Super Cache aj W3 Total Cache majú funkciu kompresie GZIP, ktorú môžete povoliť po inštalácii. Mnoho populárnych poskytovateľov WordPress hostingu má tiež  túto funkciu povolenú prostredníctvom svojich štandardných balíkov. Ak chcete zistiť, či je na vašom webe povolená kompresia GZIP, použite tento nástroj na rýchlu kontrolu.

Kompresiu GZIP môžete na svoj web WordPress pridať aj manuálne úpravou súboru .htaccess.

Ďalšími jednoduchými a bežnými (aj keď niekedy vynechanými) trikmi by bolo použitie ľahkej témy WordPress, deaktivácia nepotrebných doplnkov (tých, ktoré už nepoužívate alebo tých, ktoré dočasne nepotrebujete) a pravidelné čistenie databázy WordPress.

Venovanie pozornosti týmto detailom tiež prispieva k zníženiu času, ktorý WordPress potrebuje na zostavenie a zobrazenie stránky. Niekedy môže byť hlavným dôvodom spomaľovania vášho webu téma alebo doplnok, ktorý obsahuje veľa funkcií. V tejto situácii môžu zasahovať doplnky do vyrovnávacej pamäte. Lepším prístupom môže byť udržiavať vašu WP stránku čo najjednoduchšiu a najčistejšiu.

Optimalizácia obrázkov

Toto je veľmi efektívna a jednoduchá technika, ktorá prispieva k zrýchleniu vášho WP webu. A práve toto je dnešná téma, takže poďme ju teda rozdeliť na kúsky.

Prečo optimalizácia obrázkov?

Webové stránky využívajú v dnešnej dobe viac vizuálov ako kedykoľvek predtým, aby upútali pozornosť používateľa. Multimédiá (obrázky, videá, podcasty) si za posledných päť rokov každý veľmi obľúbil. To viedlo majiteľov webov k používaniu stránok, ktoré sú čoraz grafickejšie a zaťaženejšie obrázkami.

V tejto chvíli sme obklopení miliardami obrázkov, videí a grafiky vo vysokom rozlíšení. Sú kľúčom k lepšej konverzi, a teda k lepšiemu marketingu.

Ľudia majú niekedy tendenciu zabúdať alebo jednoducho pri tvorbe webov nevenujú dostatočnú pozornosť tomu, že pravidelné nahrávanie obrázkov postupne ovplyvňuje rýchlosť ich WP stránok.

Najmä ak máte stránky zaťažené obrázkami a váš obsah sa spolieha väčšinou na obrázky a vizuály, by to malo byť vaším hlavným záujmom.

Ako optimalizovať obrázky na vašom webe

Je to možné vykonať buď manuálne, alebo pomocou doplnkov. Začnime manuálnou metódou. (Toto je väčšinou pre tých z vás, ktorí veľmi chcú mať kontrolu nad svojím webom a robiť všetko svojpomocne.) Ručná optimalizácia obrázkov vám tiež pomôže do značnej miery pochopiť, ako doplnky (automatická metóda, o ktorej budeme hovoriť o niečo neskôr) fungujú.

Ak chcete automatizovať proces optimalizácie obrázkov, ste krytý. Existuje veľa skvelých WP doplnkov, ktoré vám môžu ušetriť veľa času a tiež priniesť vynikajúce výsledky. O tom si ešte povieme neskôr a tiež otestujeme niekoľko nástrojov.

Ručná optimalizácia obrázkov na vašich webových stránkach

Optimalizácia môže znamenať mnoho vecí. Tu môžeme hovoriť o kompresii, zmene veľkosti, použití správnych formátov, orezaní atď.

Použite správny formát obrázka

Ako môžete zistiť, aký formát je pre obrázky vašich stránok najlepší a ktorý má vyššiu odolnosť pri úpravách a kompresii? Odpoveď je, že neexistuje žiadny všeobecne najlepší formát, ale existujú odporúčané formáty založené na obsahu každého obrázka.

PNG sa väčšinou používa na grafiku, logá, ilustrácie, ikony, návrhové skice alebo text, pretože sa dá ľahko upravovať v editoroch fotografií a po kompresii si stále zachováva vynikajúcu kvalitu. Je to preto, že súbory PNG sú bezstratové - počas kompresie nestrácajú žiadne významné údaje.

JPG je obľúbenejší medzi fotografmi, bežnými používateľmi alebo blogermi. Je stratový a dá sa stlačiť na menšie rozmery, pričom si zachováva dobrú kvalitu pri pohľade voľným okom. JPG je formát, ktorý podporuje milióny farieb, preto ho ľudia väčšinou používajú na fotografie. Podporuje tiež vysokú kompresiu.

Alternatívou k JPG a PNG by mohol byť WebP, formát webového obrázka zavedený spoločnosťou Google, ktorého úlohou je poskytovať ešte menšie veľkosti ako JPG (alebo akékoľvek iné formáty) pri zachovaní podobnej kvality obrázka. Formát WebP umožňuje stratovú aj bezstratovú kompresiu. Podľa spoločnosti Google môže byť obrázok WebP až o 34% menší ako obrázok JPG a až o 26% menší ako obrázok PNG.

Formát obrázka WebP má však svoje negatíva, napríklad to, že ho zatiaľ nepodporujú všetky prehliadače alebo ho predvolene nepodporuje WordPress (potrebujete na to nástroje). 

Záver ohľadom obrazových formátov je taký, že neexistuje univerzálne správny formát. Skutočne to závisí od typu obrázkov, ktoré na svojom webe potrebujete. Ak používate fotografie s rôznymi farbami, formát JPG môže byť tým správnym formátom, pretože je vhodný na kompresiu farebne náročných fotografií, ktoré je možné do značnej miery zmenšiť. Nevyhovuje snímkam s iba niekoľkými farebnými údajmi, ako sú napríklad grafické obrázky alebo snímky obrazovky.

Poďme na rýchly test. Uložil som obrázok JPG obsahujúci množstvo farieb a potom som ho previedol na PNG. Po konverzii sa fotografia zväčšila. Potom som použil nástroj ImageResize.org na kompresiu oboch obrázkov (tento nástroj som si vybral, pretože mi umožňoval komprimovať oba formáty a používať súbory väčšie ako 1 MB).

Toto je nekomprimovaný obrázok (cez MyStock.photos):

A toto sú výsledky:

Na druhej strane je formát PNG správnou voľbou, ak používate veľa snímok obrazovky, grafík, log alebo priehľadných obrázkov - vo všeobecnosti obrázky s veľmi malým počtom farieb alebo obrázky, ktoré obsahujú blokové farby (napríklad prechody medzi svetlým a tmavým pozadím). PNG je bezstratový a po kompresii môže často viesť k veľmi malým rozmerom, ktoré by inak mohli byť pri JPG väčšie. Uloženie tohto druhu obrázkov do formátu JPG môže spôsobiť stratu kvality a rozmazanie.

Poďme urobiť ďalší test. Uložil som snímku obrazovky môjho dashboardu WordPress ako JPG aj PNG. Potom som použil rovnaký ImageResize.org na kompresiu každého formátu. Za zmienku stojí, že súbor PNG bol na začiatku uložený vo výrazne menšej veľkosti ako súbor JPG.

Tu je obrázok:

Výsledky po kompresii:

Zistite maximálnu veľkosť zobrazenia vašich obrázkov

Ak sa chystáte optimalizovať obrázky sami, mali by ste najskôr zistiť, aká je ich maximálna veľkosť zobrazenia. Pretože je váš web responzívny, všetky obrázky, ktoré nahráte, sa zobrazia v rôznych rozlíšeniach na základe použitého zariadenia vaším používateľom (zariadenia, z ktorého prehliadajú váš web).

Maximálna veľkosť displeja je najväčšie rozlíšenie, aké obrázok zvládne. Ako môžete skontrolovať maximálnu veľkosť zobrazenia obrázka?

Najskôr otvorte stránku alebo príspevok obsahujúci obrázok, ktorý chcete skontrolovať. Musíte zmeniť veľkosť prehliadača manuálne (postupne ho zmenšovať potiahnutím za okraje) až do bodu, až kým sa rozmery obrázka náhle nezmenia. Tento bod sa nazýva „bod zlomu“ - pretože sa veľkosť obrázka náhle zlomí.

Keď sa zmení veľkosť obrázka, stlačte pravé tlačidlo myši -> Skontrolovať (ak máte prehliadač Chrome). Umiestnením kurzora myši na adresu URL obrázka v pravom hornom rohu obrazovky uvidíte rozmery, v ktorých sa zobrazuje, a ich pôvodné rozmery (vlastné). 

S ohľadom na tieto informácie môžete teraz zmeniť veľkosť a orezať svoj obrázok, aby zodpovedal daným rozmerom. Týmto spôsobom sa uistíte, že ho budete optimalizovať efektívne, aby na obrazovke mohol aj naďalej vyzerať skvele a zároveň zaťažoval váš vlastný web čo najmenej.

Napríklad ak chcete, aby boli vaše obrázky pre retina displej, upravte ich zadaním dvojnásobku maximálnej veľkosti displeja, aby ste dosiahli lepšiu kvalitu. Obrázok na snímke obrazovky má 428 x 321 pixelov, pre lepšiu kvalitu na retina displeji ho preto upravte na 856 x 642 pixelov.

Zmena veľkosti a orezanie obrázkov

Ak pracujete so súbormi, ktoré majú oveľa väčšie rozmery, ako je bežné, ktoré potrebujete na prezentáciu na svojom webe, môžete jednoducho zmeniť ich veľkosť alebo orezať a až potom ich nahrať na svoj vlastný web. Ušetríte miesto na disku a vaša stránka bude ľahšia.

Samozrejme, ak máte fotografické portfólio a je pre vás dôležité, aby návštevníci videli vaše diela v pôvodnej podobe, potom áno, máte skutočný dôvod ich čo najlepšie prezentovať.

Svoje obrázky môžete tiež kedykoľvek orezať, ak chcete ľuďom zobraziť iba konkrétny detail, a nie je dôvod nahrávať kompletný obrázok.

Kompresia obrázkov

Vo všetkých editoroch fotografií máte možnosť zvoliť si, v akej kvalite chcete uložiť upravený obrázok. Väčšinou si vyberáte kvalitu 100% (zo zrejmých dôvodov), ale môžete ju trochu znížiť napríklad na 70 - 80%. Ak má obrázok obrovské rozlíšenie, veľký rozdiel si nevšimnete. Jeho veľkosť bude v tomto prípade menšia.

Po znížení percenta kvality a uložení obrázka môžete ísť ďalej s ďalším kolom optimalizácie toho istého obrázka pomocou online nástroja, ktorý ešte viac zmenší jeho veľkosť.

JPEG Optimizer a JPEG.io majú percento redukcie okolo 60%, zatiaľ čo TinyPNG (ak sa rozhodnete pracovať s PNG) okolo 70%. Program Kraken je vhodný pre obidva formáty a po kompresii sú súbory o približne 70% menšie .

Používatelia počítačov Mac môžu vyskúšať ImageOptim, ktorý komprimuje formáty JPG a PNG až do 50%.

Nastavte optimalizáciu obrázkov na autopilota

Na automatizáciu procesu optimalizácie obrázkov na vašom webe potrebujete nástroje (doplnky WordPress). Znamená to, že urobia všetky kroky, o ktorých sme hovorili už skôr, ale na autopilota.

Existuje niekoľko automatických WordPress riešení na optimalizáciu obrázkov, ale v tomto príspevku vám predstavím iba tie, ktoré prichádzajú so solídnymi funkciami (celou sadou na úplnú optimalizáciu obrázkov).

Ukážem vám tiež testy, ktoré som vykonal s každým z nasledujúcich troch nástrojov, aby ste mohli všetko pozorne sledovať.

Budeme porovnávať Optimole, ShortPixel a Smush.

Optimole

Optimole je pravdepodobne najkomplexnejší zo všetkých, pretože obsahuje všetky funkcie, ktoré by ste mohli potrebovať pre efektívnu optimalizáciu obrazu. Takže ak hľadáte inteligentnú optimalizáciu obrazu vo všetkých jeho aspektoch, potom by sa vám mohol páčiť Optimole.

Optimole prenesie vaše obrázky do cloudu, kde sa optimalizujú. Potom sa optimalizované obrázky preosejú cez sieť CDN, ktorá umožňuje rýchle načítanie. Doplnok nahradí adresu URL každého obrázka vlastnou adresou.

Ďalšou kľúčovou vlastnosťou Optimole je prispôsobenie obrázkov veľkosti obrazovky každého používateľa. To znamená, že automaticky optimalizuje vaše obrázky na správne rozmery na základe zobrazovacieho poľa používateľa, takže ak vidíte obrázok z tabletu, bude mať dokonalú veľkosť a kvalitu pre štandard tabletu. Tieto transformácie prebiehajú rýchlo, bez toho, aby ste na svojom webe spotrebovali viac miesta.

Ďalším inteligentným prístupom, ktorý vás na Optimole poteší, je jeho dôvtip pre detekciu, keď má používateľ pomalšie pripojenie. Keď rozpozná pomalé pripojenie, doplnok viac komprimuje obrázky na vašom webe, aby to neovplyvnilo čas načítania stránky vašich návštevníkov.

Ďalšou zaujímavosťou na Optimole je, že nebude automaticky optimalizovať všetky obrázky vo vašej WP knižnici médií. Optimalizuje iba obrázky, ktoré ľudia požadujú. Takže nepanikárte, ak nainštalujete doplnok a nič sa nestane. Akonáhle užívateľ požiada o obrázok, plugin urobí to, čo som už vysvetlil vyššie.

Na tomto doplnku sa mi páči, že je inteligentný a efektívny a nikdy nerobí zbytočnú prácu alebo konverzie. 

ShortPixel

ShortPixel je populárny WP doplnok, ktorý umožňuje hromadnú optimalizáciu obrázkov. Doplnok funguje na autopilota a predvolene optimalizuje každý obrázok, ktorý nahráte do svojej knižnice médií. Túto možnosť však môžete deaktivovať, ak ju nepotrebujete.

Plugin ponúka stratovú a bezstratovú kompresiu, ktorú môžete použiť dokonca aj na miniatúry. Všetky upravené obrázky sa uložia do samostatného priečinka na vašom webe, z ktorého môžete kedykoľvek vrátiť optimalizáciu späť. Napríklad môžete konvertovať späť z bezstratových na stratové a naopak, alebo jednoducho obnoviť pôvodné súbory.

Navyše, ak prejdete do knižnice médií WordPress a namiesto predvoleného zobrazenia mriežky vyberiete zobrazenie zoznamu, všimnete si, že posledný stĺpec vás informuje o stave kompresie. Týmto spôsobom môžete ručne prehľadávať všetky obrázky a komprimovať / dekomprimovať tie, ktoré potrebujete. Pri každom obrázku uvidíte, o koľko percent bol skomprimovaný.

Ak ich chcete optimalizovať naraz, stačí zvoliť Hromadné akcie -> Optimalizovať pomocou ShortPixel (alebo ktorejkoľvek z jeho podpoložiek) a kliknúť na Použiť. Vaše obrázky budú komprimované v priebehu niekoľkých okamihov.

ShortPixel vám navyše umožňuje automaticky prevádzať súbory PNG do JPG, vytvárať verzie vašich obrázkov WebP a optimalizovať súbory PDF. Poskytuje tiež prevod CMYK na RGB. Funguje so službou Cloudflare CDN na nahrávanie optimalizovaných obrázkov na cloudový server.

Smush

Ďalším veľkým menom medzi doplnkami WordPress je Smush - priateľský nástroj, ktorý optimalizuje vaše obrázky za behu. Aplikácia Smush je dodávaná s krásnym informačným panelom sledovania, kde vás informuje o celkových úsporách vášho webu, o tom, koľko položiek ešte nebolo optimalizovaných, koľko už bolo optimalizovaných a aké metódy sa na to použili.

Má tiež hromadnú kompresiu, lazy loading, automatickú konverziu PNG do JPG a CDN. Rovnako ako ShortPixel, Smush tiež pridáva stav kompresie ku každému obrázku vo vašej knižnici médií, takže ho môžete spravovať jednotlivo alebo hromadne.

Aplikácia Smush predvolene používa bezstratovú kompresiu so zameraním na to, aby sa obrázky čo najviac priblížili k pôvodnej verzii. Nevýhodou tohto doplnku je, že v bezplatnej verzii neponúka rovnaké množstvo funkcií, ako to robia vyššie uvedené doplnky. Za niektoré základné funkcie je potrebné zaplatiť.

Testovanie týchto troch doplnkov na optimalizáciu obrázkov

Nasledujúci obrázok s veľkosťou 904 kB som otestoval pomocou troch doplnkov, ktoré som predstavil vyššie.

Takéto boli výsledky doplnkov:

• Optimole: 555 KB (312 KB ak zvolíte vysokú úroveň kompresie)
• ShortPixel: 197.87 KB
• Smush: 894 KB

* Optimole a ShortPixel používajú stratovú kompresiu, zatiaľ čo program Smush používa bezstratovú kompresiu.

Ďalší prístup je ešte zaujímavejší.

Tento obrázok som nahral na svoju webovú stránku WordPress a potom som ho použil v blogovom príspevku. Optimole aj ShortPixel automaticky zmenšili jeho veľkosť, aby zodpovedali môjmu rozlíšeniu obrazovky a rozloženiu príspevku. Takže namiesto použitia takmer 1 MB obrázku ho zmenšili tak, aby sa zmestil na príspevok. Pluginy našli správnu veľkosť a rozmery potrebné v mojom blogovom príspevku a zodpovedajúcim spôsobom upravili obrázok.

A to sú zmenšené rozmery obrázky prostredníctvom jednotlivých pluginov:

• Optimole: 158 KB, 524x394 pixelov
• ShortPixel: 71.7 KB, 768x577 pixelov
• Smush: žiadna optimalizácia pre túto konkrétnu požiadavku

Napriek tomu je dôležité poznamenať si dve veci:

• ShortPixel vytvoril najlepšiu veľkosť kompresie, ale vo väčších rozmeroch; celkový výsledok je dobrý, obrázok iba trochu stratil na kvalite.
• 
• Optimole (ktorý som tentoraz nastavil na automatickú kompresiu) vytvoril vyššiu veľkosť, ale s menšími rozmermi a lepšou kvalitou pri pohľade voľným okom. Optimole našiel vynikajúcu rovnováhu medzi veľkosťou a rozmermi tak, aby obrázok nestratil na kvalite.

Takto to má vyzerať na živom webe:

Optimole sa lepšie prispôsobil tejto konkrétnej požiadavke a obrazovke používateľa (v tomto prípade obrazovke môjho notebooku).

Poďme sa teraz rýchlo pozrieť na to, ako sa tieto doplnky prispôsobujú obrazovkám mobilných zariadení:

Postupoval som rovnako. Aktivoval som jeden doplnok naraz a prostredníctvom mobilu (Android) som požiadal o rovnakú webovú stránku. Výsledky:

Optimole: 96 KB, 389x292 pixelov.

ShortPixel: 19 KB, 300x225 pixelov.

Smush: neoptimalizoval obrázok pre mobilné zariadenia.

Moja ukážková obrazovka pre mobil:

Optimole vrátil väčšiu, kvalitnejšiu zameranú verziu, zatiaľ čo ShortPixel obraz previedol na lepšiu veľkosť, ale s miernou stratou kvality.

Spočiatku som pre hlavný test na pracovnej ploche použil obrázok 6 MB, ale keďže program Smush vo svojej bezplatnej verzii neumožňuje súbory väčšie ako 1 MB (ostatné umožňujú), musel som zvoliť obrázok pod 1 MB.

Tento test tak urobím iba s Optimole a ShortPixel.

Poďme teda na štvrtý test, tentokrát na väčší obrázok.

Pôvodný obrázok má 6,23 MB.

Optimalizované veľkosti sú:

• Optimole: 798 KB s automatickou kompresiou, 480 KB s najvyššou kompresiou
• ShortPixel: 400.58 KB

K dispozícii je tiež doplnok EWWW Image Optimizer, ktorý podobne ako Smush využíva iba bezstratovú kompresiu a obrázky redukuje iba o dosť malé percento.

Závery po štyroch testoch:

• ShortPixel poskytuje najlepšiu mieru optimalizácie (okolo 70-80%), zatiaľ čo Optimole je niekde na 40% u automatickej kompresie a na 70% u najvyššej kompresie.
• Optimole lepšie prispôsobuje obsah obrazovke používateľov a pripojeniu k internetu. Ak ho nastavíte na Auto, bude vedieť, ako dôsledne zmenšovať veľkosť, ale tiež ako zachovať vynikajúcu kvalitu. Páči sa mi, že vie, ako so všetkými týmito premennými narábať, takže to pomáha skracovať čas načítania vášho webu a zobrazovať návštevníkom kvalitné obrázky.

Keby som mal dať dokopy nielen výsledky testov, ale aj ďalšie vlastnosti pluginov (alias jednoduchosť a užívateľskú prívetivosť), išiel by som k Optimole. ShortPixel je ale tiež skvelým uchádzačom, ktorého vrelo odporúčam. Smush je tiež slušná voľba, ak ste ochotní za to zaplatiť alebo ste fotograf, ktorý chce, aby boli ich snímky čo najmenej spracované.

Zhrnutie

Obrázky sú vždy jedným z hlavných dôvodov pomalého webu. Google nemá rád pomalé weby a ani jeho návštevníci a klienti. Najmä ak hľadáte monetizáciu prostredníctvom svojho webu WordPress. Neoptimalizovaná stránka ovplyvní vaše SEO, stiahne vás v SERP, zvýši mieru okamžitých odchodov a budete tak prichádzať o peniaze. Preto záverom dôležitá veta: Nepodceňujte optimalizáciu obrázkov či už pri tvorbe webu vo WordPress alebo už hotovej webstránke. 

Nezáleží na tom, či uprednostňujete optimalizáciu obrázkov manuálne alebo si vyberiete doplnok, ktorý vám ju zautomatizuje. Dobré výsledky na seba určite nenechajú dlho čakať.

Aké ďalšie metódy používate na to, aby ste mali obrázky na vašej WordPress stránke pod kontrolou?