Každý používateľ dnes očakáva skvelú používateľskú skúsenosť a čo najlepšiu rýchlosť webstránky pri používaní internetu. Obrázky tvoria väčšiu časť načítavaného obsahu a majú zásadný vplyv na to, aká bude rýchlosť načítania webovej stránky. O tom, ako tento proces aplikovať na vaše projekty a zopár praktických tipov zhrniem v tomto úvode do problematiky spracovania obrázkov na webe.
Čo je to optimalizácia obrázkov?
Optimalizácia obrázkov pre e-shopy a webové stránky predstavuje proces, ktorý sa zameriava na zlepšenie rýchlosti načítania obrázkov so zámerom zlepšiť používateľskú skúsenosť. Pravidlá pre optimalizáciu obrázkov sú, samozrejme, aj všeobecné, ale môžu mať aj svoje špecifiká podľa typu podstránky, pre ktoré pripravujete obrázky. Teda iné budú pre domovskú stránku, produkt, kategóriu a blog.
Lepšiu veľkosť obrázkov dosiahneme zmenami vo vlastnostiach obrázkov cez rôzne parametre, vďaka ktorým získame najkvalitnejší a najvhodnejší obrázok s čo najmenšou veľkosťou súboru. Cieľom je nájsť ideálny stav s ohľadom na kvalitu fotky a rýchlosť e-shopu. Vplyv na veľkosť má hlavne:
- Rozlíšenie – ak má fotografia nevhodné rozlíšenie, bude buď nepoužiteľná, alebo príliš veľká.
- Formát – najčastejšie využívame JPG, WebP, SVG a občas PNG.
- Kompresia – vieme ju využiť pri optimalizácii pri formátoch JPEG, WebP, AVIF. Využívame aj SVG alebo bezkompresné PNG. Ideálne je nájsť balans medzi kvalitou fotky a veľkosťou. Viac o formátoch sa dočítate na blogu s formátmi obrázkov.
- DPI – pri auditoch sme aj v roku 2022 našli na webovej stránke fotky s DPI 240 až 300.
Podstatný je tiež výber zdrojovej fotky. Ak je fotografia nesprávna (hlavne ostrá, s hĺbkou a farebnosťou), tak bude ťažšie optimalizovateľná. Často sa stáva, že aj správny výber formátu je dôležitý. Napríklad pre logo je vhodný formát SVG.
Niekedy sa používajú obrázky s priehľadnosťou, vtedy je riešením formát PNG. Samozrejme, ak ide o veľké plochy a kvalitné obrázky v PNG, tak to môže zásadne spomaliť rýchlosť webovej stránky alebo e-shopu, a teda je lepšie sa ich použitiu pri návrhu dizajnu radšej vyhnúť.
Príklad optimalizácie s cieľom zlepšiť veľkosť fotografie
Zadanie môže znieť jednoducho. Optimalizujte obrázok pre nový produkt, napríklad cestný bicykel Pinarello. Zdroj od výrobcu má vo formáte JPEG veľkosť 6,5 MB. Takto upravený obrázok v e-shope nemôžeme použiť, a preto aplikujeme jednoduchý proces optimalizácie.
- Otvoríme obrázok v editore PS. DPI a rozlíšenie zmeníme z 8000 x 6000 px na 1600 x 1600 px a 96 DPI.
- Následne uložíme v kvalite 12. Dostaneme obrázok v rozmedzí 400 až 500 kB.
- Otvoríme nástroj na cloude alebo v počítači a uložíme JPEG v kvalite napríklad 84 zo 100. Dostávame 199 kB výstup v JPEG.
- Ak to isté uložíme ako WebP formát, veľkosť klesne na 100 kB.
- Takto postupujeme tiež pri náhľadovom obrázku produktu, kde pri rozlíšení 400 x 400 px a formáte WebP sme dostali na výstupe veľkosť 10 kB.
Konkrétne obrázky sú na stiahnutie dostupné v článku s príkladom optimalizácie obrázka.
Prečo sa venovať optimalizácii obrázkov?
Ako som spomenul v úvode, celkový podiel obrázkov na veľkosti je väčšinou od 60 % až do 98 % z celkovej veľkosti načítavaných dát. Použite napríklad nástroj Web Page Test a zistite koľko % je to u vás.
Pri optimalizácii obrázkov pre klientov vieme v extrémnych prípadoch zlepšiť rýchlosť načítania až o 900 %, vychádzajúc z projektov za posledných 10 rokov.
Optimalizácia však pravdepodobne nikdy nebude úplne optimálna, tak ako by rôzne nástroje na kontrolu rýchlosti webovej stránky odporúčali, lebo vždy je nevyhnutné brať ohľad aj na kvalitu obrázkov, nielen na rýchlosť.
Obrázky tvoria veľkú časť načítavaných dát e-shopu a webovej stránky.
Lepšie výsledky v organickom vyhľadávaní
Pozitívny vplyv to môže mať i na výsledky vyhľadávania. Google uprednostňuje webové stránky, ktoré sa rýchlo načítavajú. Ak sú obrázky optimalizované, celkovo z toho benefituje aj organické vyhľadávanie. Pri jednom z projektov sme optimalizovali veľkosť a formát obrázkov len v náhľadoch v kategórii a v detaile produktu. KPI Search Visibility, ktoré sledujeme na vzorke 300 kľúčových slov, nám bez inej aktivity stúplo o 12 %.
Na príklade tak môžeme pozorovať, že aj drobné zmeny a zlepšenie optimalizácie obrázkov vedia pomôcť. Samozrejme, zistíte to len ak pravidelne a dlhodobo monitorujete vaše a konkurenčné pozície vo výsledkoch vyhľadávania.
Drobná zmena formátu obrázka pre zoznam produktov a produkt priniesla na vzorke dlhodobejšie sledovaných 300 kľúčových slov zlepšenie pozícií v organickom vyhľadávaní o 12 %.
Optimalizované obrázky sa ľahšie zobrazia vo výsledkoch vyhľadávania pre obrázky, ktoré je stále viac obľúbené. Tam nebude potrebné optimalizovať len vyššie spomenuté parametre, ale aj pomocné texty obrázkov, ako sú alt tag a atribút title, už priamo v zdrojovom kóde. Každý moderný e-shop alebo CMS systém by mal mať možnosť tieto parametre editovať.
Lepšia používateľská skúsenosť a vyšší konverzný pomer
Rýchlosť načítania v kombinácii s použiteľným webovým dizajnom znamená lepšiu používateľskú skúsenosť. To má zásadný vplyv i na konverzný pomer. Ak je veľké percento obrázkov neoptimalizovaných, tak to môže zhoršiť používateľskú skúsenosť rovnako ako konverzný pomer. Aj preto netreba na tento proces pri tvorbe e-shopu alebo webovej stránky zabúdať. Pri tvorbe nového obsahu a pridávaní nových produktov majte nastavený proces, aby boli obrázky čo najlepšie optimalizované.
Pri pomalšej rýchlosti načítania webstránky klesá konverzný pomer.
Zdroj: CloudFlare blog
Proces optimalizácie obrázkov
Vyššie sme si vysvetlili základné výhody optimalizácie fotografií a obrázkov v e-shope a na webových stránkach. Nižšie nájdete podrobný návod, ako postupovať pri optimalizácii obrázkov, aby ste zaistili vhodný balans medzi kvalitou a rýchlosťou vášho webu.
Definujte si pravidlá a postupy pre konkrétne typy podstránok
Napríklad, pre formáty obrázkov naprieč e-shopom si zadefinujete jednoduché pravidlá pre váš tím a dodávateľov. Nevadí, ak sa občas niečo poruší, dôležité je mať spísané, čo je to optimum.
- Domovská stránka, baner: 1920 x 600 px, JPEG, veľkosť 50 – 200 kB.
- Produktový obrázok, galéria, detail: 1600 x 1600 px, WebP, veľkosť 10 – 100 kB.
- Produktový obrázok v detaile produktu, náhľad: 600 x 600 px, WebP, veľkosť 10 – 50 kB.
- Produktový náhľad, kategória: 400 x 400 px, WebP, veľkosť 5 – 30 kB.
- Blog, článok: 1200 x 800 px, JPEG, veľkosť 30 – 150 kB.
Následne viete tieto pravidlá dodržiavať a kontrolovať. Mal by o nich vedieť interný tím, ale aj externý marketingový dodávateľ pre produkty, obsah na blog, správu banerov. Častá chyba je, že agentúra vytvorí baner, ale už neoptimalizuje samotný výstup, čím môže klientovi spôsobiť viac škody ako osohu.
Proces pri spracovaní obrázkov pre web alebo e-shop
- Zvoľte si časť e-shopu alebo webovej stránky, ktorej optimalizácii sa chcete venovať a pre tú zadefinujte vlastný proces – súbor krokov, ktoré zrealizujete jednorazovo alebo ich budete opakovať pravidelne. Blog bude mať iný proces ako produkt. Rozdielny proces bude mať e-shop predávajúci ponožky a e-shop s nábytkom, kde kvalita fotiek môže byť výrazne odlišná.
- Zdrojové obrázky nahrajte na zdieľané cloudové úložisko v zdrojovej a optimalizovanej forme, nech máte vždy k dispozícii zdroj v prípade, že by ste váš proces alebo pravidlá chceli meniť.
- Vyberte si 1 alebo 2 nástroje, ktoré budete používať. Príklady pre offline a online nástroje na optimalizáciu obrázkov sú:
- Adobe Resize
- Compress Now
- JPEG Optimizer
- Tiny PNG
- Optimizilla
- JPEG.io
- ImageRecycle
- Compressor.io
- Irfan View
- Adobe Photoshop
- Cez nástroj orežete zdrojový obrázok na vami definované cieľové parametre. Zamerajte sa na parametre ako šírka, výška, DPI, kvalita (kompresia) a formát.
- Ak nie ste spokojný s výsledkom, pri stratovej kompresii (JPEG) môžete využiť uloženie v inom nástroji pri nižšej kvalite alebo použiť iný formát, napríklad WebP. Dajte si však pozor na to, aby ste nepoužili až príliš veľkú kompresiu a príliš neznížili kvalitu obrázka.
- Takto exportovaný súbor premenujte v slovenčine bez diakritiky a medzery nahraďte pomlčkami, ideálne s hľadaným kľúčovým slovom. Súbor je pripravený na nahrávanie na webovú stránku alebo e-shop.
- Je vhodné niekde v tabuľke evidovať čo, kde kedy a ako s akými popisnými poliami vzniká, aby ste vedeli v budúcnosti systémovo pristupovať k zmenám.
Nahrávanie obrázka na e-shop alebo web
Manuálne pridávanie obrázkov
Váš e-shop alebo webový CMS systém by mal mať pri nahrávaní možnosť vyplniť základné popisné polia obrázka, ktoré sú nevyhnutné pre jeho lepšie zobrazenie vo výsledkoch vyhľadávania vo vyhľadávači, indexáciu obsahu (robot dostane informáciu o tom, čo je na obrázku) a zlepší to aj prístupnosť webovej stránky.
- Vypĺňame tieto popisné polia:
- Alt je zobrazený v tagu img. Ten je pre vyhľadávanie a indexáciu najdôležitejší. Zobrazí sa i v prípade, ak by obrázok nebol načítaný. Mal by byť definovaný cez opis toho, čo je na obrázku, ideálne s využitím kľúčového slova.
- Titulok je definovaný parametrom title v tagu img. Ide viac-menej o alternatívny te
- WordPress má okrem toho aj tieto ďalšie polia:
- Nadpis je krátky textový popis, ktorý môžete pridať k obrázkom. Zvyčajne sa používa na poskytnutie ďalších podrobností o obrázku.
- Popis predstavuje časť, ktorá môže byť mätúca. Obrázky v knižnici médií vo WordPress majú svoju vlastnú adresu URL. K tej sa dostanete cez Zobraziť stránku prílohy, kde bude tento text zobrazený. To, či je táto stránka indexovaná, závisí od nastavenia CMS.
- Ak už je obrázok nahratý, stačí ho priradiť produktu, kategórii alebo pridať do článku.
Ak ide o podrobnejšie možnosti optimalizácie obrázkov pre Google, tak odporúčam dodržiavať aj SEO best practices.
Automatizácia procesu spracovania obrázkov
Vyššie spomenutý proces je horšie aplikovať na produktové obrázky z feedov alebo tisíce produktov. Dobrou správou ale je, že tieto pravidlá viete v spolupráci s vašimi programátormi aplikovať i na tento typ obsahu. Opäť je to len o aplikovaní pravidiel, ktoré robíte manuálne a ich automatizácia.
V podstate všetko spomenuté je možné meniť aj na strane technického riešenia e-shopu. Napríklad, ak vám dodávateľ cez feed alebo API posiela PNG obrázky v rozlíšení 2000 x 2000 px, môžete ich meniť na vami požadované rozlíšenie 1600 x 1600 px, využívať nástroje na kompresiu a zmenu formátu napríklad na WebP. Zároveň z nich viete vygenerovať potrebné veľkosti náhľadov, kde môžete dať napríklad ešte o niečo kvalitnejšiu kompresiu.
To isté platí aj o popisných poliach. V nich si viete dynamicky generovať a nahradiť prázdne polia ako alt a titulok s údajmi z meta titulku a H1. Lepšie, ako keby ste mali mať prázdne polia, je tam mať duplicitný alt. Väčšie spoločnosti majú možnosť aj viac pracovať s generovaním týchto polí podľa nejakého kľúča na základe analýzy kľúčových slov.
Kontrola rýchlosti po optimalizácii
Na kontrolu rýchlosti vašej webovej stránky môžete využiť rôzne nástroje, ktoré často používame pri vstupných auditoch webových stránok a e-shopov. Využiť môžete napríklad i tieto nástroje:
- https://webspeedtest.cloudinary.com/ je nástroj na analýzu a porovnanie výstupov obrázkov v jednotlivých formátoch.
- https://www.webpagetest.org predstavuje nástroj na detailnú analýzu výkonnosti webovej stránky.
- https://pagespeed.web.dev/ je nástroj na základnú kontrolu výkonnosti webovej stránky aj s odporúčaniami na zlepšenie priamo od Google.
Možnosti optimalizácie obrázkov na strane e-shop riešenia
-
- Používajte CDN (Content Delivery Network). CDN je sieť serverov, ktorá sa používa na distribúciu obsahu po celom svete. Ak používate CDN, obrázky sa načítajú rýchlejšie, pretože sú uložené na serveri blízko používateľa.
- Nastavte šírku a výšku obrázka v HTML alebo CSS. Týmto spôsobom sa obrázok načíta v požadovanej veľkosti, čo znamená, že prehliadač nemusí zmenšovať alebo zväčšovať obrázok počas načítania webstránky.
- Používajte „lazy loading“ pre obrázky, ktoré sa nachádzajú mimo okna prehliadača. Týmto spôsobom sa obrázky načítajú až vtedy, keď sa používateľ dostane k ich zobrazeniu. To znamená, že sa obrázky načítajú rýchlejšie a používateľovi sa stránka zobrazí rýchlo.
- Využívajte „browser caching“, čo je proces, pri ktorom si prehliadač ukladá súčasti webovej stránky ako obrázky, CSS súbory a JavaScript súbory do svojej vyrovnávacej pamäte počas prvého načítania stránky. Keď používateľ navštívi stránku znova, prehliadač môže použiť tieto uložené súčasti z vyrovnávacej pamäte, čo zrýchľuje načítanie stránky.
- VPS miesto klasického hostingu pomôže rýchlosti celkovo.
Checklist alebo na čo nezabudnúť pri optimalizácii obrázkov v e-shope
- Nepridávajte na domovskú stránku veľa obrázkov a banerov, aby ste nespomalili domovskú stránku.
- Všetky obrázky optimalizujte a vyhýbajte sa používaniu PNG pre fotky.
- Používajte obrázky s popisnými poliami, nezabudnite si skontrolovať či ich nemáte prázdne.
- Generujte náhľady obrázkov v kategórii na veľkosť, akú reálne využívate.
- Využívajte novšie formáty WebP, AVIF.
- Využívajte možnosti optimalizácie obrázkov na strane technického riešenia webovej stránky.
- Nastavte si čo najefektívnejší proces optimalizácie obrázkov, či už manuálny pri tvorbe blogu, alebo automatizovaný.
- Pravidelne analyzujte, testujte a vylepšujte. Na základe sk odporúčam validáciu a jednoduchý audit na kvartálnej báze s návrhom zlepšení.
- Nerobte všetko, lebo nespravíte nič. Ak nemáte ľudské zdroje, optimalizujte po častiach. Zahrňte optimalizáciu obrázkov do vášho projektového plánu pri vývoji alebo správe webového projektu.
- Skontrolujte si aj čo vám to prinieslo.
