Fremveksten av av enheter med høyoppløste skjermer gir enkelte webutviklere hodebry. Skal de fortsette å servere lik grafikk til alle brukere?
Det ser ikke nødvendigvis så veldig pent ut. Produktene som lover knivskarpe bilder fullpakket av detaljer, ifølge reklamen ofte mer enn øyet kan se, kommer kort sagt ikke til sin rett med gårsdagens lavoppløste bildefiler.
En løsning kan da være å tilpasse seg, og velge en modell der grafikken blir tilpasset den enkelte brukerens forutsetninger, både med hensyn til oppløsning og tilgjengelig bredbånd.
_logo.svg.png){kind=logo}
Et Javascript-bibliotek kalt Foresight.js er laget nettopp for denne utfordringen. ArsTechnica skriver at koden gjør det enkelt å levere høyoppløste bildefiler til enheter som Apples nye iPad.
Foruten å undersøke klientens støtte for høy oppløsning, sjekker den også om nettforbindelsen er rask nok til å håndtere filene. Bare dersom begge disse forutsetningene er til stede blir HD-alternativene benyttet. Høyoppløste bilder gir nødvendigsvis større filstørrelser, og uten tilstrekkelig båndbredde kan surfeopplevelsen bli uakseptabel.
CSS-hack
Noe av det som appellerer mest med Foresight.js, er som ArsTechnica påpeker dens triks for å servere riktig bildevariant til rett tid.
Bibliotektet benytter nemlig den foreslåtte CSS-funksjonen image-set, som nå støttes i utviklerversjoner av WebKit og er til vurdering hos webstandardorganet World Wide Web Consortium (W3C).
Det smarte med foresight.js er et triks hvor image-set kombineres med font-family (dette er et altså et hack). Det høres pussig ut, men er teknisk sett gyldig kode. Trikset skal fungere i andre nettlesere, opplyser ArsTechnica.
- Fordi nettlesere kan parse font-family-regelen (selv om de ikke støtter den) blir verdien tilgjenglig i DOM (Document Object Model) og dermed er den tilgjengelig for JavaScript. Det er akkurat dette foresight.js gjør, påpeker teknologiavisen.
