Zaujíma ma
27. októbra 2022

Jozef Kováč

SysAdmin
27. októbra 2022

Automatické dynamické konvertovanie obrázkov

5 min čítanie

Optimalizácia obrázkov je v dnešnej dobe mobilných zariadení, Google PageSpeed pravidiel a CX veľmi dôležitá. Prezradíme vám, ako správne pracovať s obrázkami na vašom e-shope z pohľadu systémového admina. Presné tipy a návody ako zrýchliť svoj e-shop dostanete z prvej ruky od expertov, ktorí pracujú s obrázkami už viac ako dve dekády.

Internetové obchody a webové portály poskytujú návštevníkom veľké množstvo obrázkov (napr. produktov). Vedeli ste, že niektoré e-shopy môžu obsahovať na serveri desiatky a dokonca státisíce obrázkov? Navyše tento počet nie je konečný.

Obrázky na serveri je potrebné uchovávať v pôvodnej kvalite (príp. jej rozumnej forme) a navyše zobrazovať ich vo viac ako 10 rozmeroch (veľkostiach v pixeloch). Veľkosť obrázkov je rôznorodá práve preto, že sú zobrazované na rôznych miestach e-shopu/portálu.

Práve ich automatická optimalizácia ušetrí obrovské množstvo manuálnej práce a zabezpečí lepšie výsledky v Google PageSpeed Insights a nárast návštevnosti z Image Search (obrázkového vyhľadávania).

Obrázky produktov sú zobrazované v rozličných rozmeroch:

  • na hlavnej stránke
  • vo výsuvnom košíku a výsledkoch vyhľadávania
  • v akciovej ponuke
  • v kategórii produktov
  • ako hlavných obrázok na stránke detailu produktu a v zozname jeho obrázkov
  • v riadnom košíku a v pokladni
  • v objednávkovom e-maile a v správe účtu zákazníka.

Takisto sú zobrazované aj na na rôznych miestach administračného rozhrania, ako napr. zoznam produktov, úprava produktu, detail objednávky, alebo štatistiky predaja.

Používanie obrázkov na webe

Ako sa dostávajú obrázky na váš e-shop či web stránky? Jednoducho nahraním od užívateľa alebo externou službou. Čo všetko sa však v týchto obrázkoch prenáša a ako ich správne konvertovať? 

Obrázky sa v rámci webových stránok nepoužívajú vo svojej originálnej podobe, ktorú nahral užívateľ alebo externá služba –  čiže formát, rozlíšenie alebo metadata ako napríklad EXIF a ICC profil obrázkov.

Hlavným dôvodom pre konvertovanie obrázkov je hádam základné očakávanie každého zákazníka – rýchle načítanie stránky. Predstavíme vám základné kroky ako konvertovať obrázky.

Dôvody pre konvertovanie obrázkov

Konvertovanie obrázkov má niekoľko dôvodov:

  • poskytnutie rôznych formátov a rozlíšení,
  • zjednotenie formátu a použitie vhodného formátu pre webové stránky,
  • obmedzenie maximálneho rozlíšenia,
  • odstránenie súkromných metadát,
  • odstránenie zbytočného alebo škodlivého kódu.

Zníženie veľkosti obrázkov

Zmenšením veľkosti obrázkov (objem ich dát v kB) sa zníži nielen prenos dát, ktorý ocenia hlavne užívatelia pri mobilnom pripojení, ale zároveň sa zníži aj požiadavka na ukladací priestor v prehliadači a na serveri. Zmenšovanie veľkosti však nie je na úrok vizuálnej kvality obrázkov.

Hlavným dôvodom je zrýchlenie načítania webových stránok z dôvodu zníženia veľkosti obrázkov – a to s minimálnym znížením vizuálnej kvality obrázkov. Ďalším dôsledkom je nižší prenos (významný hlavne pri mobilnom pripojení) a zníženie požiadaviek na ukladací priestor prehliadača.

Prehliadač ale nie je jediný prvok, ktorý ukladá (cachuje) statické súbory. Rovnako môže dochádzať k dočasnému ukladaniu na proxy serveroch, ktoré slúžia pre zrýchlenie webových stránok a zníženia záťaže tzv. backend serverov. 

Ako vyzerá konvertovanie obrázkov v praxi?

JPEG je populárny stratový, čiže už komprimovaný formát obrázkov. Základnou zmenou je konvertovanie JPEG na nový formát WebP, kedy vieme konverziou obrázku so zachovaním rozlíšenia a odstránením metadát dosiahnuť až 80% zníženie veľkosti.  Štandardná 12 Mpx JPEG fotografia s veľkosťou okolo 1 MB sa tým zníži na 400 – 200 kB znížením rozlíšenia na 1024×768, čo je stále štandardné rozlíšenie pre väčšie obrázky.

V rámci webových stránok dokážeme obrázok zmenšiť na 1/10 pôvodnej veľkosti (100 kB) s minimálnym dopadom na výslednú vizuálnu kvalitu. Pri prechádzaní stránok to predstavuje značný rozdiel, hlavne ak ide o e-shop, kde sú desiatky tisíc produktov a tým pádom stovky tisíc obrázkov.

Original JPEG 12 M, 694 Kb vľavo, výsledok konverzie na WEBP, 162 Kb vpravo.

Pozn.: obrázok vložený ako PNG screenshot.

Často používané (neoptimálne) konvertovanie na disku

Konvertovanie pôvodných obrázkov môže prebiehať okamžite po ich nahratí, tj. počas nahrávania sa originály uložia len do dočasného úložiska, z ktorého sa konvertujú a ukladajú do cloud úložiska na serveri. Požiadavky na úložný priestor by však boli stále značné, nakoľko každá verzia (čo do formátu a rozlíšenia) by musela byť uložená na serveri.

Keby sme chceli vykonať globálnu zmenu pre existujúci formát alebo rozlíšenie (alebo pridať nový formát), museli by sa vygenerovať obrázky pre všetky originály – zmena by navyše nebola okamžitá a stála by veľa času aj peňazí.

Požiadavky na úložný priestor vždy ešte znásobuje nutnosť zálohovania a spätná história jednotlivých verzií (často aj niekoľko rokov, v závislosti na firemnej politike). 

Tu sa dostávame k možnosti dynamického konvertovania, o ktorom je tento článok.

Automatické dynamické konvertovanie obrázkov

Dynamické konvertovanie prebieha podľa požiadavky od prehliadača. Požadovaný formát a rozlíšenie je priamo súčasť HTTPS requestu či už URL, hlavičiek alebo GET parametrov. Konvertovanie prebieha až v tomto momente „on the fly“, čo pridáva veľké možnosti flexibility z pohľadu aplikácie, rýchlosti zmeny, či možnosti poskytnúť optimálny formát a rozlíšenie pre konkrétneho návštevníka. Zároveň sa na cloud úložisku na serveri neukladá nič viac ako pôvodný obrázok (ktorý sa nemení).

Samozrejme, iba generovať obrázky na serveri pri každej požiadavke od klienta by bolo veľmi neefektívne a navyše by to spôsobilo spomalenie načítania stránok.

Pre užívateľa, ktorý opakovane zobrazuje ten istý obrázok, je tento problém už ošetrený na strane jeho prehliadača (ktorý cachuje statický obsah, vrátane obrázkov). Preto je opakované načítanie veľmi rýchle. Rovnaký princíp aplikujeme na strane serverov použitím image proxy servera, ktorý zároveň poskytuje cachovania. To znamená, že je konvertovaná len prvá požiadavka na špecifický obrázok s daným rozlíšením a formátom. Všetky nasledujúce požiadavky už poskytne proxy cache server z jeho rýchlej cache.

Efektívne využitie rýchlej cache

Cache na serveri umožňuje výrazné zredukovanie počtu požiadaviek na backend server a zároveň zvýši rýchlosť stránok pri využití dynamického konvertovania obrázkov. Prvá požiadavka uloží obrázok do cache na image proxy serveri a nemusí pochádzať od bežného užívateľa (môže ju vykonať už administrátor počas úprav stránok alebo automatizovaný bot).

Viaceré backend servery samozrejme stále musia zvládnuť veľké množstvo paralelných požiadaviek bez výraznejšieho spomalenia (pre prípad rozsiahlej zmeny v rámci niektorej stránky alebo dropnutia cache na image proxy serveri). 

Doba, na ktorú sa obrázky cachujú na image proxy serveroch, je zvyčajne nastavená fixne (podobne ako pre cache prehliadača) pomocou expire hlavičky. Takisto je limitovaná dostupným priestorom, tj. pri absencii voľného priestoru sa obrázky, ktoré neboli najdlhšie použité, odstránia „LRU cache“. Obrázok v rámci cache image proxy servera je unikátne identifikovaný na základe jeho URL adresy.

Pozn.: Originál JPEG je baseline, všetky ostatné majú odstránené metadáta, zvýšenú kompresiu +20 % a sú progressive JPEG, okrem označených ako formát WebP. 

Originál JPEG

Konvertované JPEG                                   

 

Formát WebP

Získaj novinky ako prvý

Prihlásením sa do noviniek súhlasíš s ich odberom a týmto úprimným dokumentom, ktorý sme k ochrane osobných údajov pripravili.

Autor článku

Jozef Kováč

SysAdmin

V CREATIVE sites už 2 roky spravujem servery a služby, ktoré na nich bežia ako sú: storage, databázy, webové a aplikačné servery, clustre a siete ktoré to prepájajú. Na serveroch riešim a navrhujem aj ich softvérovú a hardvérovú architektúru, pre ešte lepšie fungovanie platformy CREATIVE sites.

Tento článok prináša

V CREATIVE sites pomáhame e-shopom rásť a zarábať viac už od roku 2005. Vytvorili sme spoľahlivú platformu pre ambiciózne e-shopy, na ktorej funguje 1600+ projektov. Špecializujeme sa na expanziu e-shopov do zahraničia, automatizáciu procesov a prepojenia s IS, ale aj SEO a UX.


Posledné
Obľúbené