Práca s obrázkami v Prestashop a WordPresse. Ako obrázky upravovať, akými programami, ako sa starať o ich veľkosť, čo je ALT a TITLE, či WEBP a CDN.

Blog, Prestashop, Wordpress

V tomto článku sa pokúsim zhrnúť komplet problematiku používania obrázkov v systéme Prestashop a WordPress, od výberu, prípravy, optimalizácie, použitia, SEO nastavení a vysvetlení všetkých ďalších nastavení obrázkov na eshope či webe ako je použitie WEBP, CDN, či lazyload. Bude to ucelený článok, a na to, aby ste vedeli správne a efektívne pracovať s obrázkami v Prestashope či WordPresse, nebudete potrebovať nič viac ako tento článok. 

V praxi sa stretávame so zákazníkmi, ktorí sú schopní nahrať na web obrázok o veľkosti 12MB, a potom sa zákazníci čudujú že im web pomaly načítava; alebo nahrajú fotku o veľkosti 200x200px na celú šírku webu a čudujú sa že „web“ je nekvalitný. A práve tento článok Vás teda naučí, čo robíte zle a ako je to teda s pohľadu eshopu či webu a z pohľadu google správne.

1. Práca s Obrázkami, ich úprava pred nahratím na web a eshop

Na začiatok by som napísal, že je dobré si zvoliť, ako som už v úvode spomenul, vhodne kvalitný obrázok. Ak máte vlastné fotky super. Ak nie a chcete niečo pohľadať určite Vám odporúčam môj zoznam bezplatných fotobánky na linku nižšie. Existuje aj množstvo platených, čiže ak peniažky nie sú problém viete najísť na platených portáloch kvalitnejšie obrázky ako na bezplatných a aj rýchlejšie.

Čiže na takýchto fotobankách alebo kdekoľvek inde, kde je to legálne si nájdete obrázok o vhodnej veľkosti. T.j ak chcete použiť nejaký obrázok, ktorý je určený pre hlavný slider (menič obrázkov) na úvodnej stránke, ktorý je najčastejšie na celú šírku obrazovky, tak takýto obrázok odporúčam najísť si základ, ktorý bude mať ideálne 1600px šírky a viac. Vtedy to bude dostatočne kvalitné. Potom ako máme nájdený základný obrázok, s ktorým chceme pracovať potrebujeme nejaký software na jeho úpravu (zmenšenie, orezanie, či iné grafické úpravy). Nižšie uvedené programy nebudem rozpisovať ako sa v nich pracuje a pod. Existuje naozaj kopec návodov a videonávodov na internete pre všetky programy.  

Photoshop

Najznámejší platený program na prácu s fotkami, obrázkami a na tvorbu grafiky je Photoshop. Je to výborný program, kde dokážete urobiť s trochu znalosťami prakticky človek, čo by Váš web mohol v pohľadu obrázkov, či grafiky potrebovať. Nie je však najlacnejší a ak potrebujete takýto program využívať iba kde tu, tak je to pre vás cenovo neefektívne.

 

 

Existujú ale dostatočne kvalitné bezplatné náhrady, z ktorých by som vybral nasledovné 3:

Photopea

Photopea, bol v minulosti počítačový program, ale aktuálne funguje už len ako Online editor. Je veľmi podobný Photoshopu, povedal by som že 80-90% vecí funguje rovnako, len je teda komplet bezplatný.  Je výborný a ak Vám nevadí že je to online editor, tak Vám určite bude na prácu postačovať.

 

 

GIMP

GIMP, je komplexný editor s pokročilými možnosťami úprav a podľa mňa najlepší bezplatný PC (offline) program na úpravu obrázkov. Photopea je podľa mňa lepší, ale online editor nemusí vyhovovať každému. Je porovnateľný s Photoshopom, ale nejaké tie funkcie chýbajú. Nechýba však nič také, čo by ste potrebovali pri spracovaní obrázkov pre web.

 

 

XnView

Na rozdiel od predchádzajúci dvoch programov, ktoré slúžia hlavne na úpravu obrázkov, tak XnView sa Vám zíde vtedy, ak potrebujete upraviť obrázky hromadne. Je to rovnako bezplatný program, kde si označíte naraz 5,10,100,… obrázkov a hromadne ich môžem zmenšiť, či orezať, či pridať vodoznak, otočiť, … Je to starší program, ale nijako mu to na jedno použiteľnosti či užitočnosti neuberá.

 

 

Úprava veľkosti obrázku

Okrem toho že si obrázky viete v programoch, ktoré som Vám poskytol vyššie správne pripraviť, tak stále je tu jeden parameter, ktorý sa dá zlepšiť a to je ich veľkosť v kb. Výborná online utilitka pre tento účet Tinyjpg.

Akýkoľvek obrázok do tento utilitky vložíte dokáže Vám usporiť 40-70% jej veľkosti. Čo je neskutočná pomoc pre web, či eshop a platí čím viac fotiek, tým výraznejšia finálna úspora, lebo je rozdiel, či web naťahuje 10 obrázkov o cca 100kb, alebo 10 obrázkov o 500kb. Aplikácia využíva tzv. dra-and-drop systém, čiže chyť obrázok a pusti vo vyznačenej plocha a celý systém už zbehne sám. Naozaj odporúčam všetky obrázky prehnať cez nástroj. Aj Prestashop a aj WordPress si robia pre účely svojho systému miniatúry, ale ak je základný obrázok čo najmenší, tak aj generované miniatúry budú menšie a teda mať menšiu záťaž na načítavanie eshopu či webu.       

 

 

2. Nahrávanie a Používanie Obrázkov v Prestashop a WordPress

 

Nahrávanie Obrázkov Produktov v Prestashope

Nahrávanie obrázkov produktov je na eshope suverejne najčastejšia činnosť s pohľadu obrázkov. Obrázky kategórií, či obrázky do textových podstránok sa nahrávajú nepomerne menej. To ako nahraď obrázky produktov, či kategórií do systému Prestashop nie je potrebné vysvetľovať. Každý kto si vložil čo i len jeden produkt na eshop to vie a každý Náš zákazník dostáva po dokončení eshopu aj videonávody ako s eshopom pracovať. V tejto sekcií by som sa skôr zameral na vysvetlenie čo sa s nahratými obrázkami deje, aké miniatúry sa generujú, ako ich zmeniť či pregenerovať a teda dosiahnuť s pohľadu eshop čo najideálnejší stav zobrazenia.

Čiže keď nahráte obrázok napr. produktu tak Prestashop mu generuje v základnej verzií 5 miniatúry (cart_default, small_default, medium_default, home_default, large_default) a tieto miniatúry potom využíva pre voju činnosť. T.j. menšie využíva ako náhľady v prehľadoch produktov, či kategóriách a väčšie na produktovej stránke. Čiže systém si sám upraví veľkosti tak aby nepracovať s nejakým veľkým, či gigantickým obrázkom, ktorý tam správca eshopu nahral a tak pracuje efektívnejšie s pohľadu načítavania celého eshopu. Niektoré témy si môžu vytvoriť ešte ďalšie miniatúry, aby zobrazovanie bolo ešte efektívnejšie, čiže celkový počet generovaných náhľadov, môže byť aj vyšší.

 

 

V administrácií Prestashopu si tieto nastavenia môžete pozrieť v Dizajn / Nastavenia obrázkov, viď aj obrázok vyššie. Okrem toho že vidíte aké náhľady sa pre produkty či kategórie generujú si viete tieto náhľady aj meniť, t.j. viete zmeniť rozmer, či pomer strán, tak aby vyhovoval potrebám vášho eshopu. Napríklad ak máte eshop s oblečením, sú na obrázkoch sú najčastejšie modelky, sú obrázky najčastejšie tzv. na stojaka, čiže pomer strán 3:4. A taký eshop s bicyklami bude mať fotky presne opačne (na ležato) čiže pomer obrázku 4:3. A práve toto viete zmeniť, alebo meniť komplet veľkosť miniatúry, ak Vám nevyhovuje a potom ako to zmeníte, tak všetky novo-nahraté obrázky už budú generované v tomto novom rozmere. Ak chcete zmeniť aj už nahraté obrázky je možné ich pregenerovať na rovnakej podstránke, viď obrázok nižšie. Len odporúčam si obrázky produktov predom zálohovať ak by došlo k nejakej poruche, aby ste náhodou o obrázky neprišli.    

 

 

 

Nahrávanie Obrázkov do WordPressu

Wodpress generuje v základe 3 náhľady (miniatúra, stredný rozmer, a veľký rozmer) a ešte je možnosť použiť aj originál. A aj tu je možné potom meniť tieto rozmery či pomery strán podľa potreby webu. Po zmene veľkosti miniatúry sa tieto rozmery použijú len na novo nahraté fotky. WordPress nemá vlastný systém na pregenerovanie už nahratých obrázkov a potrebujete na to externý modul napr Regenerate Thumbnails. Rovnako ako pri Prestashope aj tu niektoré témy, či inštalácia modulov ako woocommerce vám zmením počet generovaných náhľadov.  

 

 

3. Moduly na úpravu a optimalizáciu Obrázkov

Moduly pre optimalizáciu obrázkov pre Prestashop

Optimalizovanie obrázkov je pomerne dostačujúce v samotnom Prestashop, viď predchádzajúci bod, si viete upraviť rozmery tak, aby neboli zbytočne veľké obrázky generované, čiže také aké potrebuje téma, a na danej podstránke si viete zmeniť kompresiu, či formát, čiže v podstate ak nahrávate na eshop obrázky podľa nášho bodu 1 a máte správne nastavené rozmery podľa bodu 2 a etše su prípadne zmeníte kompresiu na nižšiu (nižšia kompresia = menšia veľkosť, ale na úkor kvality, čiže je potrebné nájsť kompromis), nie je potrebné nejako obrázky extra optimalizovať.

 

 

Ak však viete, že máte z minulosti zlé obrázky nahraté, veľké rozmerovo, či kapacitne a zaťažuje to váš eshop tak je možné použiť externé moduly na optimalizáciu obrázkov ako napr

Druhá taká vec, s ktorou sa môžeme pri prestashope stretnú je že ak máte veľký eshop, veľa produkt a veľa vecí sa nahráva či maže, tak v závislosti na tom, ako sa produkty mažú, môže na eshope ostať veľké množstvo starých a nepotrebných produktových obrázkov. S týmto problémom Vám zase môže pomôcť modul. 

 

Moduly pre optimalizáciu obrázkov pre WordPress

Tu vo WordPresse sú optimalizácie ďaleko potrebnejšie. Častejšia sa stretávam s tým, že majitelia webov si tam nahrajú čokoľvek a ešte využívaj aj nahratý originál nie miniatúry. Takže tu môže byť optimalizácie žiadanejšia.

Moduly:

  • TinyJPG Modul: Integrovaný nástroj, ktorý automaticky zmenšuje veľkosť obrázkov. Je to proste ten nástroj ktorý odporúčam pre všetky fotky na optimalizovanie v bode 1. Čiže ak máte wordpress nemusíte to robiť ručne cez daný web a môžete si to nechať robiť automaticky cez modul.
  • Smush Modul: Odstraňuje nepotrebné údaje z obrázkov a znižuje ich veľkosť. Smush je populárny plugin, ktorý automaticky optimalizuje obrázky počas ich nahrávania. Ponúka aj možnosti ako lazy loading ( o nej viac v bode 5) a kompresiu obrázkov.
  • EWWW Image Optimizer: EWWW Image Optimizer je plugin, ktorý poskytuje rôzne metódy optimalizácie obrázkov vrátane možnosti optimalizovať aj existujúce obrázky na vašej stránke.

 

4. ALT a TITLE Atribúty obrázkov pre SEO – Prestashop a WordPress

Správne používanie atribútov ALT a TITLE pri obrázkoch je kľúčové nielen pre estetiku webových stránok, ale aj pre zlepšenie SEO, prístupnosti a celkovej užívateľskej skúsenosti. Tieto atribúty poskytujú textový popis obsahu obrázka, čo má výrazný vplyv na vyhľadávače, čitateľov so zrakovým postihnutím a celkovú štruktúru webovej stránky. V princípe platí, že Google ani iné roboty obrázok nevidia a nevedia čo na ňom je. Takúto schopnosť zatiaľ nemajú. Preto na to aby Google pochopil, že čo na obrázku je potrebuje dať vedieť cez ATL parameter. Okrem toto je pri obrázkoch ešte parameter TITLE. A teda čo je čo a ako to použiť?

ALT (Alternatívny Text)

ALT atribút poskytuje alternatívny textový popis pre obrázok. Je to text, ktorý sa zobrazí, ak obrázok nie je možné načítať alebo ak návštevník používa čítačku obrazovky. Je to dôležité najmä pre zlepšenie prístupnosti pre užívateľov so zrakovými postihnutiami. ALT atribút tiež hrá dôležitú úlohu v SEO. Správne vyplnené ALT atribúty umožňujú vyhľadávačom lepšie porozumieť obsahu obrázka a môžu prispieť k lepšiemu umiestneniu vo výsledkoch vyhľadávania.

TITLE

TITLE atribút poskytuje titulok alebo doplňujúci popis pre obrázok. Tento text sa zobrazí, keď návštevník umiestni kurzor myši nad obrázok. Môže obsahovať ďalšie informácie, ktoré dopĺňajú popis obrázka.

Väčšina systém je nastavená tam, že TITLE a ALT totožné, čiže existuje len jedno pole pre ich zadanie. Ale teda s pohľadu SEO je ALT ten kľúčový parameter.

 

ATL a TITLE v Prestashope

V Prestashope si vysvetlíme ALT a TITLE opäť na najpoužívanejších obrázkoch a to sú obrázky produktov. Tu ,viď aj obrázok nižšie je možné pri obrázku navoliť si ATL a title popis pri každom obrázku. Čo bytostne ale nie je potrebné, nakoľko ak si nenavolíte nič, tak sa vám automaticky ako ALT a TITLE pridá názov produktu. Čiže za predpokladu že názov produkt máte vhodne pomenovaný, čo je už teda iná téma, tak nemusíte v prestashpe nijako zvlášť riešiť a prestashop sa sám o všetko postará. Rovnaká situácia je aj pri kategóriách. Čo sa týka iných obrázkov (v textových podstránkach, na úvode, v slideroch , ….) tak tu je potrebné zadať tento ALT popis a všetky systémy či moduly to väčšinou podporujú.  

 

 

ATL a TITLE vo Wordprese

Vo WordPresse musíme všetkým obrázkom prideliť ALT a TITLE, viď obrázok nižšie. toto je priradenie cez klasické pridanie do Multimédií, čiže ak využívate nejaké iné systémy na nahrávanie obrázok ako moduly na galérie, woocommerce, či editory ako elementor, či bakery, … tak nahrávanie obrázkov je odlišné a aj pridanie ALT a TITLE, ale teda vždy je to možné a teda pre vás web žiaduce.

 

 

 

5. Konverzie obrázkov na WEBP, vysvetlenie čo je to LazyLoad a CDN v Prestashope a WordPress

V predchádzajúcich bodoch sme prebrali také základy, to čo by mal každý Prestashop či Worpdress mať. V poslednom bode sa zameriame na pokročilejšie optimalizácie obrázkov na eshope či webe. Tieto technológie vyžadujú trocha lepšie znalosti a väčšinou už aj investície do optimalizácie.

 

Konverzie obrázkov JPG, PNG na formát WEBP

WEBP je moderný formát určený pre efektívnu kompresiu obrázkov. WEBP ponúka výraznú kompresiu obrázkov pri zachovaní vysokého štandardu kvality. To znamená rýchlejšie načítanie stránok bez straty kvality. Okrem statických obrázkov podporuje WEBP aj animácie. Môže slúžiť ako náhrada za formáty ako GIF s lepšou kompresiou. Rýchlejšie načítanie stránok vďaka menším súborom môže pozitívne ovplyvniť výsledky vyhľadávania a SEO webových stránok.

Čo sa týka nevýhod tak, zatiaľ čo väčšina moderných prehliadačov podporuje formát WEBP, niektoré staršie prehliadače alebo mobilné zariadenia ešte nemusia mať plnú podporu. Prípadné editovanie vašich obrázkov vo formáte WEBP môže byť zložitejšia v porovnaní s niektorými inými formátmi. Pre úpravou si ho musíte opäť prekonverzovať do JPG aby ste ho vedeli upraviť v programoch podľa bodu 1.

Celkovo platí, že voľba použitia formátu WEBP závisí od konkrétnych požiadaviek projektu a potreby optimalizácie veľkosti obrázkov v kontexte rôznych aspektov webovej stránky.

Konverzie obrázkov na formát WEBP v Prestashope

Pre systém Prestashop určite odporúčam nasledovný modul. Je to cenovo najvýhodnejšie a mám ho odskúšaný už na viacerých eshopoch

Musím však podotknúť že WEBP okrem toho že musí mať podporu v prehliadačoch tak potrebuje podporu aj tam , kde plánujete vyvíjať marketingové aktivity. Napr. zatiaľ čo Facebook či Gooogle s webp problém nemá, tak Heuréka áno. Obrázky produktov Vám proste nezobrazí. Heuréka slubuje už nejaký ten ½ rok že to bude riešiť, ale zatiaľ nerieši. Čiže ak je heuréka Vašim budúcim alebo aktuálnym partnerom tak WEBP by som na Vašom mieste ešte odložil.

Konverzie obrázkov na formát WEBP vo WordPresse

Tu môžeme smelo konvertovať do WEBP, ale ak optimalizujete obrázky podľa bodu 1 a 2 tak bytostne nemusíte. Moduly, ktoré Vám na to poslúžia:

 

LazyLoad Obrázkov: Zlepšite Rýchlosť Načítania Stránok

Lazyload je technika optimalizácie webových stránok, ktorá umožňuje odložiť načítavanie obrázkov, kým nie sú skutočne potrebné. Táto metóda prispieva k rýchlejšiemu načítaniu stránok a zlepšuje užívateľskú skúsenosť.

Lazyload umožňuje načítavanie obrázkov až vtedy, keď sú viditeľné na obrazovke. To vedie k rýchlejšiemu načítaniu stránok, pretože nie všetky obrázky sa načítavajú naraz. Toto hrá ešte významnejšiu rolu pri mobiloch.

Implementácia LazyLoad do Prestashopu

Najjednoduchším spôsobom ako dostať lazyload do Vášho Prestashopu je  externý modul. A moje odporúčania sú nasledovné 2 moduly:

  • Lazy loading product images by ST-themes – tento modul je bezplatný ale je určený len pre verziu Prestashopu 1.6 a 1.7. Modul nakoľko témy môžu byť naozaj všetkého druhu a každá v princípe iná, tak vyžaduje zásah to témy eshopu. Zásah je popísaný na danej stránke, ale sú na to potrebné znalosti minimálne HTML a znalosť Prestashopu.
  • Lazy Load (Postupné načítavanie obrázkov) – modul je platený ale teda je to najlacnejšia verzia pre Prestashop 8.1. Rovnako ako prvý modul aj tento potrebuje implementácia do témy a túto výrobca ponúka aj v cene modulu.

Implementácia LazyLoad do WordPressu

Vo wordpresse je situácia jednoduchšia a stačí nájsť vhodný modul. Napríklad niektorý z nasledovných:    

 

6. CDN pre obrázky a zrýchlenie načítavania eshopu a webu

Implementácia Content Delivery Network (CDN) môže výrazne zvýšiť rýchlosť načítania stránok a zlepšiť celkový výkon vášho e-shopu. CDN je distribuovaná sieť serverov, ktorá slúži na optimalizáciu dodávky obsahu (napríklad webových stránok, obrázkov, videí) koncovým užívateľom. Táto sieť pozostáva z viacerých serverov umiestnených na rôznych geografických miestach. Hlavným cieľom CDN je zlepšiť rýchlosť a dostupnosť obsahu pre užívateľov tým, že minimalizuje latenciu a záťaž na základnom serveri.

Obsah, ako sú hlavne obrázky sa ukladá (cachuje) na týchto serverových uzloch. Pri prvom požiadavku sa obsah stiahne zo základného servera a následne sa ukladá do cache (medzipamäti). Pri opakovaných požiadavkách na ten istý obsah CDN automaticky doručuje obsah z najbližšieho uzlu. To minimalizuje čas načítania a znižuje zaťaženie základného servera.

Serverov je veľa spomeniem len niektoré:

  • Cloudflare: Poskytuje nielen CDN, ale aj ďalšie bezpečnostné a výkonnostné funkcie. Pre CDN poskytuje aj bezplatný balíček, čiže je možné ho cez tento balíček vyskúšať.
  • KeyCDN: Jednoduché nastavenie a nízka latencia pri dodávaní obrázkov.
  • Optipic: tento systém optimalizovania a CDN je aj v češtine, čiže ak chcete skúsiť sami takéto riešenie a neviete anglicky, tak tu to môžete skúsiť.
  • Bunny CDN: tento CDN systém mi prijde najlacnejší s tých zlužie vyslovene orientovaných na CDN, ak keď sa to ťažko porovnáva.
  • Amazon: Amazon poznáme asi skôr ako trhovisko čo eshop ale je to aj poskytovateľ serverových riešení a poskytuje aj CDN systém. Ceny sú lacnejšie ako pri Bunny CDN ale celý systém je komplikovanejší o niečo.

 

Existuje samozrejme oveľa viac takýchto portálov a možno nájdete lepšia a lacnejšie riešenia v malých spoločnostiach ako v týchto väčších. Treba pohľadať či otestovať.

Ako na CDN v Prestashope

Prvá Krok je pre Prestashop a Wordpress rovnaký a to je potrebné vybrať si a registrovať nejakú CDN službu. Po registrácii najčastejšie získate zónu/server od poskytovateľa CDN, ktorú potom vložíte do položky media server.

Viď obrázok nižšie. Túto položku nájdete v Záložke Rozšírené nastavenia / Výkon.

 

 

Nie služby ako napr. OptiPic sú pripojiteľné cez ich modul https://optipic.io/cz/webp/prestashop/ . Rovnako aj Amazon má vlastný modul na prepojenie s Prestashop: https://addons.prestashop.com/en/seo-natural-search-engine-optimization/89000-amazon-aws-s3-cdn-media-server.html . Oba moduly sú bezplatné a platíte jedine za CDN službu. Niektoré iné služby môžu mať iné špecifické požiadavky ako nahratie CNAME do DNS záznamov a podobne. Vždy Vám daný systém ukáže presne čo je potrebné pre implementovanie ich CDN, čiže stačí nasledovať ich manuálny pre zavedenie.  

Nejaký čas môže trvať, kým sa nastavenia prejavia, odporúčam počkať niekoľko hodím prípadne 1 deň. URL obrázkov By sa mali zmeniť z napr:

„https://cero.sk/wp-content/uploads/2015/11/Vertical-Logo-2015.png“
na:
„https://cero.vybrane-cdn.xx/Vertical-Logo-2015.png“

 

Mali by ste mať reálne rýchlejšie načítavanie webu a aj všetky merania na eshope by mali pocítiť zlepšenie.

Ako na CDN vo Wordprese

Aj vo Wodpresse je najrýchlejšou cestou ako CDN implementovať stiahnuť si modul na tento účet, napr:

Okrem týchto jednoúčelových modulov existujú aj moduly na celkové riešenie medzi-pamäti vo WordPresse, ktoré okrem iného majú možnosť využívať aj CDN pre obrázky ako napr:

Rovnako ako pri Prestashope aj tu by ste mali po nejakom čase pozorovať zmenu URL obrázkov a postupné zrýchlenie webu.

 

6. Záver

A to aj si všetko čo by s obrázkami na eshope a webe mohlo súvisieť. Snažil som sa napísať naozaj všetko čo hrá nejakú rolu v tejto problematike, aby ste tak nemuseli čítať 2,3,8 článkov a mali tak prehľad o celej téme v jednom ucelenom článku.

 

Celkovo vzaté, ak sa budete riadiť radami a poznatkami z tohto článku, budete to mať isto pozitívny vplyv na váš eshop či web. Či už len 1,2 veci ak by ste implementovali či využili z tohto článku, tak výsledkom bude efektívnejšie pracujúci a rýchlejší eshop a web a tak to bude mať pozitívny vplyv na návštevníkov a ale aj uja Googleho.   

Ak by sa Vám zdalo, že som na nejakú problematiku pri použití obrázkov na eshope a webe zabudol, alebo by ste mali nejaké otázky, alebo by ste s implementáciou riešení na Váš eshop či web chceli pomôcť. Neváhajte nás kontaktovať.