Prečo optimalizovať web pre displeje s vysokým rozlíšením (Retina)

25. marec 2014 | technológie

Prispôsobte si web na vysoké rozlíšenie a prineste ostré rozhranie a obrázky pre rozširujúce sa rady nových mobilných, ale aj stolových zariadení.

Začiatky masového rozšírenia

Vysoké rozlíšenie displejov, ako aj mnohé iné technologické novinky spopularizovala a priniesla pre masové využitie spoločnosť Apple, a to s telefónom iPhone 4 v roku 2010. Nový displej označila prívlastkom Retina a v praxi to znamenalo dvojnásobné rozlíšenie (počet obrazových bodov) voči predchádzajúcemu typu displeja pri zachovaní rovnakého rozmeru. Obraz takéhoto displeja nie je ľudským okom rozlíšiteľný na jednotlivé obrazové body, a teda je ostrejší a na pohľad krajší. Po vzore Apple začali prinášať do svojich zariadení displeje s vysokým rozlíšením aj ostatné technologické spoločnosti (Samsung, HTC atď.) a operačné systémy ako Android.


S príchodom nového typu displeja sa samozrejme samotný operačný systém automaticky prispôsobil a všetky systémové prvky boli optimalizované. To sa však netýkalo dostupných aplikácií a webu. Každá aplikácia alebo web sa skladá z prvkov, ktoré sú dostupné vo vektorovej podobe (nap. fonty/texty a vektorové prvky alebo okraje, či farebné pozadia) bez potreby prispôsobovať ich (sú ostré v akomkoľvek rozlíšení), a z prvkov, ktoré sú bitmapové (napr. obrázkové pozadia, fotografie, obrázkové ikony) a bolo potrebné ich optimalizovať pre vysoké rozlíšenie.

Preto, ak máte doma v ruke, či pred sebou napríklad iPad od verzie 3, nový Macbook Pro, Sony Xperia Z, HTC One alebo mnoho iných moderných zariadení, mohli ste si pri prehliadaní webu (najmä toho s koncovkou .sk, avšak aj po celom svete) všimnúť, že množstvo prvkov sa zdá oproti ostrosti textov rozmazaných. Pre príklad netreba chodiť ďaleko a stačí sa pozrieť na logo a všetky grafické prvky najčítanejšieho slovenského internetového denníka sme.sk. Oproti tomu, náš nový web - to je ten, na ktorom sa práve nachádzate :) - sme zoptimalizovali a je ostrý vrátane všetkých animácií.

Spôsoby optimalizácie

Spôsobov, ako web pripraviť pre vysoké rozlíšenie, je viacero, a už pri grafickom návrhu je potrebné kresliť ho v dvojnásobnom rozlíšení alebo pripraviť potrebné prvky ako vektory. Pri zalamovaní (príprave kódu stránky a ukladaní grafických prvkov) je najjednoduchší, avšak úplne nesprávny, spôsob, pri ktorom sa všetky prvky uložia v dvojnásobnom rozlíšení a pri použití sa ich rozmery upravia na polovicu. Takto síce naozaj dosiahneme optimálne výsledky pri vysokom rozlíšení, ale úplne zbytočne používame dvojnásobne veľké prvky aj pri klasickom rozlíšení, čo má negatívny dopad na prenos dát medzi serverom a zariadením, ako aj na výkon zariadenia (spomalenie), keďže hardware na jednoduchších zariadeniach nie je prispôsobený takým veľkým obrázkom.

Ďalším zo spôsobov je použitie vektorových formátov pre web, ako je SVG. Dajú sa využiť pri jednoduchej vektorovej grafike, akou sú ikony alebo kreslené obrázky. Nevýhodou je však slabá podpora pri starších prehliadačoch a tiež skutočnosť, že nie všetky obrázky sa dajú uložiť vo vektorovom formáte (napr. fotografie alebo rôzne textúry). Odnožou tohto prístupu je uloženie potrebných znakov a ikon priamo do použitého fontu (čo je vlastne tiež sada vektorových znakov).

Ideálny spôsob, ktorý najčastejšie používame, je uloženie všetkých potrebných bitmapových obrázkov v dvoch verziách - pre štandardné, aj pre vysoké rozlíšenie. Následne sa aplikuje kombinovaný prístup, v rámci ktorého pre obrázky v pozadí pripravíme špeciálne CSS (zápis pomocou tzv. CSS media queries) a obrázky priamo v html kóde vymeníme pomocou javascript-u. Optimalizované obrázky sa tak načítajú len pre zariadenia, ktoré ich využijú.

Netreba váhať

Počet nových telefónov, tabletov, ale aj notebookov a stolných počítačov, používajúcich displeje s vysokým rozlíšením, stále rastie, a preto netreba váhať, a ak pripravujete novú stránku alebo aktualizujete svoju terajšiu s nami, radi ju nakreslíme a naprogramujeme ostrú od hora až po pätičku. Je to síce pri každom projekte individuálne, ale náklady by u nás nemali pritom prekročiť 10% z ceny za zalomenie dizajnu do HTML/CSS.

hore