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
