Rezolucije ekrana se povećavaju svake godine, kao što se to može videti na primeru trenda "retina" koji se pojavio sa najnovijom verzijom Apple iPad uređaja.
Skok u broju piksela ekrana je ogroman, a veoma je izvesno da će takve rezolucije ukoro postati standard na svim laptop i desktop uređajima.
Ovaj tehnološki razvoj će imati značajan uticaj na veličinu grafičkih resursa potrebnih za web sajove i to će na kraju učiniti sajtove većim, sporijim i težim za učitavanje, ukoliko ne promenimo taktiku.
Porast veličine rasterske grafike
Monitori visoke rezolucije povećali su potrebe za grafičkim resursima. Na primer, većina monitora dobrog kvaliteta imaju od 110-130 PPI (piksela po inču). Retina displej na novom iPad-u ima oko 300 PPI.
Pa ako imamo jednu fotografiju od 5 inča na ekranu od 130 PPI rezolucija bi bila 650×650 piksela. Na ekranu od 300 PPI slika sa istim dimenzijama bi imala 1500×1500 piksela.
Prelaskom sa 130 na 300 PPI ista fotografija promera 5 inča bi povećala broj piksela sa 422,500 na 2,250,000 što je 5 puta više.
Drugim rečima, upotreba masivnih rasterskih formata poput JPG i PNG postaje nepraktična ili u najmanju ruku ne efikasna.
Resursi na web stranici se povećavaju iz godine u godinu, ali slike zauzimaju najveći deo proseka veličine web stranice i imaju veći uticaj u odnosu na CSS ili HTML fajlove. Imati njihovu veličinu pod kontrolom je veoma važno.
Upotreba SVG i nezavisnost o rezoluciji
Moderni browser-i podržavaju SVG format (skalabilna vektorska grafika). Svi ste verovatno čuli za njega ili možda radili sa njim. SVG je standardizovan format i postoji već godinama, ali se ne koristi mnogo u web dizajnu danas, najverovatnije zbog slabe podrške za browser-e koju je nakada imao.
Prednost vektorske grafike je u tome što je nezavisna o rezoluciji i zauzima malo memorije. Ista slika može biti prikazana u niskoj ili super visokoj rezoluciji i biti skalirana bez gubitka u kvalitetu.
Naravno, nisu svi grafički resursi pogodni za vektorski format. Fotografije su loši kandidati za SVG. Međutim, velika većina grafike na Webu je sačinjena od ilustracija i ikonica, koji su savršeni za vektorsku grafiku.
Pošto je SVG tekst-zasnovan jezik za označavanje (baziran na XML-u), lepo se kompresuje kao standardni gzip, čineći prenos podataka još manjim pri učitavanju web sajta.
Kakva je podrška za browser-e?
Browser-i koji imaju osnovnu podršku za SVG grafiku su Internet Explorer 9+, Firefox 4+, Chrome 4+, Safari 4+ i Opera 9.5+. Ukupna podrška za SVG format iznosi oko 80 % prema poslednjim podacima o upotrebi browser-a sa sajta StatCounter.
Detaljnije podatke o podršci za konkretne browser-e moćete naći na sajtu caniuse.com.
Zapamtite, uvek možete imati rezervnu opciju, verziju sajta koja koristi predefinisane JPG ili PNG slike ako detektujete da browser nema SVG podršku. Niko vas ne obavezuje da koristite SVG za sve.
Alati već postoje
Kolekcija alata za kreiranje vektorske grafike već postoji, zahvaljujući aplikacijama kao što su Adobe Illustrator. Postoje takođe i besplatne, open source opcije poput Inkscape.
Veliki broj logotipa i mnoge ikonice su već dizajnirane sa vektorskom grafikom i to je uobičajno u štampi. Prebacivanje na web bi trebalo da bude relativno jednostavno i postoji dosta primera da to može biti urađeno dobro i sa stilom.
Zaključak
Ukratko, web dizajneri mogu koristiti SVG u mnogo većoj meri nego što je to slučaj danas. Možda nije pogodna za sve vrste sadržaja, ali postoji veliki broj sajtova koji mogu imati benefite od toga.
Glavni dobitak je manja upotreba memorije (brže preuzimanje) i nezavisnost o rezoluciji. Ovo će postajati sve važnije sa povećanjem broja monitora sa visokom rezolucijom koji se pojavljuju na tržištu.
Zar ne bi bilo dobro da imate sajt na kome se sva grafika automatski i savršeno uklapa sa svim rezolucijama ekrana i izgleda dobro na novim iPod retina ekranima?
