Optimalizácia pre mobilné zariadenia a tablety s vysokým rozlíšením je dnes štandardom na poli webového dizajnu. Kedysi sa jednalo len o tkzv. Retina displaye, teda displaye s vysokým rozlišením, ktoré svoj názov (retina = sietnica) prebrali z vlastnosti, že voľným okom nie je poznať pixely, teda jednotlivé body, z ktorých sa obraz skladá. V číslach sa jedná o minimálnu hustotu 300 PPI – Pixel per inch, teda minimálne 300 pixelov na jednej dĺžke palca (2,54 cm). Palec štvorcový by teda mal 90 000 pixelov, čo už znie ako slušné číslo.

Prečo vzniká problém s Retina displaymi?

Než Steve prišiel s Retina displayom, bolo štandardom na poli hardwaru vyrábať zobrazovacie zariadenia 72 PPI, teda v rozlíšení vhodnom pre bežné čítanie textu alebo prácu s dokumentami. Menšie rozlíšenie a hustota bodov na palec zároveň tlačí ceny displayov nižšie, je jednoduchšie ich vyrobiť a stoja menej, čomu sa poteší nejeden spotrebiteľ.

Problém nastáva v rôznych variáciach displayov, výrobcovia smartfónov sa začali pretekať v rozlíšení displayov na svojich vlajkových lodiach. Zväčšenie počtu pixelov na rovnakej ploche ale prirodzene vedie k zmenšeniu objektov, obrázkov a textov na displayi – 20px vysoký text na 72 PPI displayi bude čitateľný, ale na 300 PPI displayi by bol jednoducho priveľmi maličký.

Riešenie je tkzv. „Upsampling“ – aby sa objekty a texty na obrazovke nezmenšovali s rastúcim rozlíšením, prišli vývojári s riešením, že všetky objekty jednoducho softwarovo nasilu zväčšia.

Zhrňme si to – Vytvoríte na váš web obrázok o veľkosti 500 x 500 px, návštevníkovi s retina displayom (Alebo inému s vysokým rozlíšením) sa zobrazí síce v rovnakej fyzickej veľkosti na telefóne, ako návštevníkovi so starším zariadením, ale nepríjemne sa rozmaže, pretože reálne sa „natiahne“ na dvojnásobnú veľkosť, teda 1000 x 1000 px, a to už je poznať.

Riešenia technologicky:

Na každý problém existuje riešenie. Displayom s vysokým rozlíšením je možno vyhovieť pár jednoduchými trikmi, ktoré dokážete implementovať kdekoľvek do vašej webstránky aj svojpomocne.

Zdvojnásobte veľkost vašich obrázkov

Jednoduché riešenie ale prináša mnoho nevýhod, s ktorými sa vývojári musia popasovať. V nasledujúcich odstavcoch si vysvetlíme, čo treba spraviť, ak chceme zapracovať obrázky s dvojnásobnou veľkosťou.

Zapracujte systém, ktorý asynchrónne načíta obrázky vhodnej veľkosti na základe užívateľského rozlíšenia.

Najskôr načítajte malý obrázok, ktorý potom cez Javascript môžete nahradiť väčším na základe rozlíšenia klienta. Takéto systémy samozrejme nie sú žiadna novinka, môžete ich sami implementovať ako javascriptovú knižnicu do vášho webu, napríklad Retina.js je jednou z takých knižníc.

Toto riešenie ale nemožno odporučiť, ak chcete mať web rýchly a s čistou konzolou (nakoľko keď javascript bežiaci na pozadí odstráni obrázky a nahradí ich inými, zaplní sa konzola červenými 404kami)

Používajte Background-image vlastnosť v CSS.

CSS štýly majú automaticky v sebe možnosť @media-queries. Skrz ne dokážete detekovať rozlíšenie displaya a naservírovať taký obrázok, aký je pre návštevníka vhodný. Výhodou oproti predchádzajúcej možnosti je, že ho nenútite najskôr stiahnuť malý obrázok, ktorý sa neskôr nahradí väčším, ale rovno načítate väčší, ak je to potreba.

Použite nasledujúce CSS pre targeting Retina displayov:

/* Zápis klasického obrázka v pozadí: */

.icon{
  width: 100px;
  height: 100px;
  background-image: url(icon.png);
}

/* CSS pre zobrazenie obrázku s vysokým rozlíšením na zariadeniach s vyšším "device-pixel-ratio": */

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-devicepixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {

  .icon{
    background-image: url(icon@2x.png);
    background-size: 100px 100px;
  }

}

Veľké obrázky treba dátovo optimalizovať, použite Tinypng.com pre rýchlu optimalizáciu všetkých obrázkov.

Nahraďte logá a jednoduché obrázky vektorou verziou vo formáte SVG.

Zvyčajne sa jedná skutočne len o logá a drobnú grafiku, ako sú ikonky. Exportovaním do SVG (Scalable vector graphics) ušetríte nie len miesto na disku, ale budete mať aj istotu, že sa zobrazia vždy správne.

(Tip: Niektoré prehliadače majú drobnú chybičku v zobrazovaní SVG formátu, kedy na miestach, kde sa stretávajú vektory alebo idú línie súbežne vznikne maličká medzierka. Tomuto môžete zabrániť tak, že celý objekt v editore zlúčite a posuniete „Vzad“ vo vrstvách, čím vyplníte pozadie jednoliatou farbou. Maličká línia teda nevznikne)

Pre ikony používajte fonty

Existuje veľké množstvo rôznych grafických fontov, ktoré nahradia klasické ikony, ušetria miesto a navyše máte istotu so spätnou kompatibilitou s väčšinov prehliadačov. Za zmienku jednoznačne stojí Glyphicons a Fontawesome, obe ponúkajú svoje ikony zdarma aj s návodom na zapracovanie.

Favicon

Nesmiete zabudnúť ani na tú maličkú ikonku na tabe. Každý prehliadač ju má rozdielne veľkú, no vždy sa jedná o násobok čísla 2 (16 x 16, 32 x 32...) Aby ste si uľahčili robotu, vytvorte ikonku 512 x 512 px a prežeňte ju cez nástroj favicon-generator.

Stránka vás bude automaticky navigovať na to, ako implementovať favicony do webu a zároveň vám aj vygeneruje kód vhodný na vloženie.

Čo nerobiť?

Z času na čas sa na internete objaví nejaký nový spôsob optimalizácie pre novšie zariadenia. Zvyčajne sa jedná o priveľmi veľké novinky na to, aby mohli byť spätne kompatibilné so staršími zariadeniami či prehliadačmi. Výsledok môže byť horibilný, chýbajúce obrázky či fonty na webe a v horšom prípade aj plná konzola chýb.

Nevyužívajte špeciálne formáty obrázkov.

Nové formáty s lepšou kompresiou vznikajú neustále, najznámejší je pomerne nový formát WebP. Zvyčajne ušetrí dátovo tretinu až polovicu veľkosti pôvodného obrázku v JPG. Problém ale nastáva, že nie každý prehliadač ho dokáže rozoznať a asynchrónne načítanie resp. dekódovanie tohoto obrázku prostredníctvom javascriptu môže viesť k problémom.

Môžete ho ale skúsiť zapracovať s tým, že ako fallback použiteje klasický obrázok.