Kako do ostrega logotipa na retina zaslonih

Najprej razčistimo, kaj sploh je retina. Gre za izraz, ki ga je predstavil Apple skupaj z njihovim telefonom iPhone 4 in predstavlja visoko resolucijske zaslone. V praksi to pomeni, da imajo te naprave na isti površini 2x večjo gostoto slikovnih točk kot navadni zasloni. Zaradi tega, običajna velikost slikovnega logotipa izgleda na retina zaslonih neostra.

Rešitev za ta problem je dandanes več in vse so precej preproste.

01. JPG in PNG

Primer:

Navaden logotip v .png formatu, ki je velik 100 x 50 px poimenujemo logo.png. Poleg navadnega logotipa potrebujemo še 2x večji logotip velikosti 200 x 100 px, ki ga lahko poimenjemo logo2x.png. V src dodamo navaden v srcset pa retina logotip. Takoj po retina URLju dopišemo še za kakšno visoko resolucijsko sliko gre. V našem primeru gre za 2x večjo od navadne.

<img src="http://www.prelc.si/slike/logo.png" srcset="http://www.prelc.si/slike/logo2x.png 2x" alt="Logo">

Iz te kode bo brskalnik razbral, da ima na voljo dve velikosti logotipa. Glede na resolucijo zaslona, hitrost interneta, vrsto brskalnika itd. bo brskalnik izbral in prikazal bolj primernega.

02. SVG

Druga, še bolj enostavna rešitev je, da uporabimo vektorski SVG format. Ker je format vektorski, se bo prilagodil vsem resolucijam zaslonov brez dodatnega dela. Podprt je v vseh brskalnikih razen v IE8.