Retina

Webbutveckling för retinaskärmar

Med den nyligen lanserande Macbook Pro har Apple fört retinaskärmar till alla produktkategorier i sin nuvarande lineup, som banar väg för nästa våg av display standarder. Medan den fjärde generationens iPhone gav oss en smak av ”icke-retina-anpassade” webbplatser 2010, så var vi tvungna att vänta på tredje generationens iPad tills vi på riktigt insåg hur luddig och föråldrad vår webbgrafik faktiskt är.

Den lättaste genvägen för att anpassa bakgrundsbilder i CSS för retina är enligt mig på följande vis:

.ikon {
  background-image: url(exempel.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(exempel@2x.png);
  }
}

Genom att använda en kvot (ratio) på 1,5 i stället för 2, kan du rikta andra icke-Apple-enheter på samma sätt.

Vad man ska använda detta till?

Varje webbplats eller app som använder ”background-image” för grafiska tillgångar. Detta är inte lämpligt för innehållsbilder som renderas direkt från t.ex HTML kod.

Hur är det då med artikelbilder som renderas ut direkt från HTML-koden?

Då finns ett mycket bra jQuery plugin för detta. Det heter så mycket som Retina.js och är mycket simpelt att använda. Detta plugin letar efter filer som innehåller ”@2x” och ersätter originalbilden med denna fil automatiskt.

Så om du har denna kod i ditt HTML-dokument:

<img src="/images/my_image.png" />

kommer detta automatiskt ersättas med: 

<img src="/images/my_image@2x.png" />

Så länge javascriptet hittar en sådan bild på din server.

Liksom andra stora förändringar som webben just nu genomgår, kommer denna förändring förmodligen ta en lång tid att lära sig fullt ut. Som webbdesigner och utvecklare, kan vi antingen sitta ner och vänta passivt för en konvention som skall standardiseras, eller så kan vi omedelbart börja erbjuda en angenäm upplevelse för våra användare. Låt oss börja arbeta.

Avatarbild
Skriven av Emil Andersson i Webbutveckling
Jag är 7 år gammal inom webbutveckling, jag älskar jQuery och CSS3. Är en av skaparna av Kreativo och jobbar på Delive. Jag har också börjat exprimentera med 3D design i Cinema 4D. Fotografering är också något jag gillar.