Pri audite kódu na klientskych weboch sme narazili na zaujímavé nastavenie v téme Houzez. Nie je nebezpečné, nič nerozbíja a na prvý pohľad si ho nikto nevšimne.
Houzez však pri vytváraní JPEG náhľadov používa kvalitu 100 %, zatiaľ čo WordPress štandardne používa kvalitu 82 %.
Je to chyba? To by bolo príliš jednoduché tvrdenie.
Houzez je téma určená okrem iného pre realitné weby, kde sú fotografie nehnuteľností jedným z najdôležitejších prvkov stránky. Je preto úplne možné, že vysoká kvalita obrázkov je zámerné rozhodnutie autorov témy.
Otázkou však je, či je 100 % kvalita JPEG obrázkov pre web skutočne potrebná.
Otestovali sme to na konkrétnych obrázkoch. Výsledok nás zaujal: po znížení kvality na 82 % boli náhľady približne o 68 % menšie, pričom vizuálny rozdiel bol pri bežnom zobrazení prakticky nepostrehnuteľný.
Keď do WordPressu nahráte fotografiu, nevytvorí sa iba jeden súbor.
WordPress z originálnej fotografie automaticky vytvára viacero ďalších rozmerov. Tie sa potom používajú na rôznych miestach webu – napríklad v zoznamoch nehnuteľností, náhľadoch, widgetoch, galériách alebo pri responzívnom zobrazovaní.
Je to správny princíp. Web nepotrebuje načítať fotografiu v plnom rozlíšení 2160 × 2880 pixelov tam, kde sa zobrazuje iba malý náhľad.
Každý z týchto vytvorených obrázkov je však zároveň samostatný súbor. A pri JPEG formáte záleží aj na tom, v akej kvalite sa uloží.
WordPress štandardne používa pre JPEG kvalitu 82 %.
Houzez ju však vo svojom kóde nastavuje na 100 %.
Na prvý pohľad môže 100 % kvalita pôsobiť ako ideálne nastavenie. Veď ak chceme kvalitné fotografie, prečo ich neuložiť v maximálnej kvalite?
Pri JPEG to však nie je také jednoduché.
JPEG je stratový formát. Pri ukladaní fotografie sa obraz komprimuje a nastavenie kvality určuje, aká silná bude táto kompresia.
Pri 100 % sa kompresia výrazne obmedzí a výsledkom je väčší súbor.
To ešte neznamená, že 100 % je automaticky chyba. Pri téme určenej pre realitné weby môže ísť pokojne o vedomé rozhodnutie – fotografie nehnuteľností sú dôležité a autori Houzez mohli jednoducho uprednostniť maximálnu kvalitu pred veľkosťou súboru.
Problém je v pomere medzi vizuálnym prínosom a veľkosťou súboru.
Ak zníženie kvality z 100 % na 82 % výrazne zmenší súbor, ale človek na stránke rozdiel prakticky neuvidí, potom je namieste otázka, či je 100 % kvalita pre web skutočne potrebná.
A presne toto sme si chceli overiť.
Nastavenie kvality obrázkov sa nachádza v súbore better-jpgs.php.
Houzez v ňom nastavuje kvalitu JPEG obrázkov na 100 %. Zaujímavé je aj to, že v kóde existuje prepínač, ktorý mal umožniť toto nastavenie vypnúť.
V oboch vetvách kódu sa však výsledná hodnota nastavuje na 100 %.
V praxi teda tento prepínač kvalitu nemení.
Toto nastavenie sme overili vo verziách Houzez 3.4.9.1, 4.2.7, 4.3.0 a 4.4.0. Súbor bol v týchto verziách z hľadiska tohto nastavenia rovnaký.
Nie je teda podstatné, či to nazveme chybou alebo zámerným rozhodnutím autorov témy.
Podstatné je, čo toto nastavenie robí v reálnej prevádzke.
Použili sme fotografiu s pôvodným rozlíšením 2160 × 2880 pixelov a veľkosťou 1,63 MB.
Houzez z nej vytvoril viacero náhľadov.
Pri kvalite 100 % mali tieto súbory nasledovnú veľkosť:
| Rozmer | Veľkosť pri 100 % |
|---|---|
| 1170 × 785 px | 1066 kB |
| 768 × 1024 px | 922 kB |
| 592 × 444 px | 331 kB |
| 225 × 300 px | 83 kB |
| 150 × 150 px | 31 kB |
| 120 × 90 px | 6 kB |
| Spolu | 2449 kB |
Najväčší náhľad teda presiahol 1 MB.
A to je iba jedna fotografia. Pri jednej nehnuteľnosti pritom môže byť pokojne 10, 15 alebo 20 fotografií.
Potom sme nastavili JPEG kvalitu na 82 %, teda na hodnotu, ktorú WordPress používa štandardne.
| Rozmer | 100 % | 82 % | Zmenšenie |
|---|---|---|---|
| 1170 × 785 px | 1066 kB | 340 kB | −68 % |
| 768 × 1024 px | 922 kB | 288 kB | −69 % |
| 592 × 444 px | 331 kB | 104 kB | −69 % |
| 225 × 300 px | 83 kB | 26 kB | −69 % |
| 150 × 150 px | 31 kB | 10 kB | −68 % |
| 120 × 90 px | 6 kB | 6 kB | −63 % |
| Spolu | 2449 kB | 774 kB | −68 % |
Celková veľkosť náhľadov tak klesla z 2449 kB na 774 kB.
To je približne o 68 % menej dát.
Tu je na celom teste asi najzaujímavejšia časť.
Pri bežnom vizuálnom porovnaní sme rozdiel prakticky nevideli.
Fotografia pri kvalite 82 % nepôsobila ako výrazne horšia fotografia. Pre návštevníka webu bol výsledok vizuálne veľmi podobný.
Technicky však boli súbory podstatne menšie.
Inými slovami: prenášalo sa približne o dve tretiny menej dát bez toho, aby sme získali viditeľne horší výsledok.
Pri jednej fotografii nemusí byť rozdiel niekoľko stoviek kilobajtov dôvodom na veľkú pozornosť.
Realitný web však nepracuje s jednou fotografiou.
Jedna nehnuteľnosť môže mať 10 až 20 fotografií a každá z nich môže mať viacero vytvorených náhľadov.
Pri 14 fotografiách tak môže rozdiel v nastavení kvality znamenať približne 23 MB ušetrených dát pri jednej nehnuteľnosti – a to ešte nepočítame originálne fotografie.
Ak máte na webe stovky alebo tisíce nehnuteľností, rozdiel už nie je zanedbateľný.
Menšie obrázky znamenajú menej dát, ktoré musí server pripraviť a návštevník stiahnuť.
To sa prejavuje najmä pri stránkach, na ktorých sa naraz zobrazuje väčšie množstvo fotografií – napríklad výpis nehnuteľností, výsledky vyhľadávania alebo detail nehnuteľnosti s galériou.
Menej prenášaných dát môže pomôcť aj pri načítavaní stránky na mobilných zariadeniach a pri pomalšom internetovom pripojení.
Zároveň ide o dáta, ktoré musí web dlhodobo ukladať. Pri veľkom počte fotografií sa preto rozdiel prejaví aj v nárokoch na diskový priestor hostingu.
Nešlo nám o to, aby sme fotografie v Houzez „zhoršili“.
Chceli sme overiť, či je možné zachovať vizuálne dostatočnú kvalitu a zároveň znížiť množstvo zbytočne prenášaných dát.
Preto sme zmenili kvalitu novovytváraných JPEG náhľadov zo 100 % na 82 %.
Zmenu sme urobili cez externý hook/option, takže sme neupravovali priamo zdrojový kód témy. Pri aktualizácii Houzez sa preto toto nastavenie neprepíše.
Takúto úpravu sme následne nasadili klientom v rámci údržby webov.
Je tu jedna dôležitá vec.
Zmena nastavenia automaticky nezmenší obrázky, ktoré už WordPress vytvoril.
Existujúce náhľady zostávajú v pôvodnej veľkosti. Aby sa ich veľkosť zmenila, bolo by potrebné ich znovu vygenerovať.
Originálna fotografia sa touto úpravou nemení.
Mení sa iba kvalita novovytvorených JPEG náhľadov.
82 % sme zvolili preto, že ide o štandardnú hodnotu WordPressu a zároveň nám pri teste poskytla veľmi dobrý pomer medzi kvalitou a veľkosťou súboru.
Ak by bol pri konkrétnom webe dôraz na kvalitu fotografií ešte vyšší, je možné použiť aj hodnotu 85 %, 90 % alebo inú úroveň podľa potreby.
Nejde teda o univerzálne pravidlo, že 100 % je vždy zlé a 82 % je vždy správne.
Ide o to, aby nastavenie dávalo zmysel pre konkrétny web.
Toto nie je chyba, ktorá by spôsobovala nefunkčnosť webu.
Je to skôr zaujímavé nastavenie v Houzez, pri ktorom môže byť otázne, či jeho prínos zodpovedá množstvu dát navyše.
Pri realitnom webe je úplne pochopiteľné, že chcete kvalitné fotografie. Práve preto sme sa nechceli riadiť iba číslom v nastavení, ale porovnali sme reálny výsledok.
V našom teste zníženie kvality zo 100 % na 82 % zmenšilo vytvorené náhľady približne o 68 %. Vizuálny rozdiel pritom nebol pri bežnom zobrazení prakticky viditeľný.
Takéto veci sa pri bežnej správe webu často neukážu. Web funguje, fotografie vyzerajú dobre a nikto nemá dôvod pozerať sa, koľko kilobajtov má každý jeden náhľad.
Práve preto robíme pravidelný audit kódu a nastavení aj na existujúcich klientskych weboch.
Nie všetky nájdené problémy sú kritické. Niekedy ide o malé nastavenie, ktoré samo o sebe nič nerozbije, ale pri stovkách alebo tisícoch obrázkov môže mať zbytočný dopad na množstvo dát, rýchlosť webu a využitie hostingu.
A práve takéto drobnosti sa oplatí riešiť skôr, než sa z nich pri väčšom webe stane veľký problém.
Prečo odporúčame pre našich klientov prechod z Houzez 3 na Houzez 4 – lepší výkon, bezpečnosť a dlhodobá udržateľnosť webu.
Kľúčové rozdiely medzi Houzez 3 a 4 vrátane štruktúrovaných dát, vlastných šablón, bezpečnostných vylepšení a optimalizácie výkonu.
