Wat is Retina?

Retina

Retina display is de naam van apple’s nieuwe display dat pixels laat zien op een hoge densiteit.

Retina display laat in principe 2 keer zo veel pixels zien  in dezelfde ruimte als eerst.
Deze foto is een goed voorbeeld.

retina1

We hebben hier bij de eerste foto 4 pixels in het vlak.  De tweede foto heeft er 16. Dit is een verbetering van 300%. Door deze manier op foto’s toe te passen worden foto’s scherper dan normaal

retina2

De linker foto is een standaard foto. Deze is duidelijk minder scherp. De rechter foto is een Retina foto die veel scherper is. Er zijn meerdere manieren om Retina toe te passen op je foto’s zoals met gebruik van SVG images en Javascript. Op de svg manier pak je een foto 2 keer groter dan wat je nodig hebt en geeft hem weer op 50% van zijn ware grote. Dit geeft wel problemen qua laad tijden voor je site aangezien het grotere bestanden laadt dan dat het laat zien maar je kan dit verhelpen met media queries zoals het voorbeeld code hieronder.

@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (   min–moz-device-pixel-ratio: 2),

only screen and (     -o-min-device-pixel-ratio: 2/1),

only screen and (        min-device-pixel-ratio: 2),

only screen and (                min-resolution: 192dpi),

only screen and (                min-resolution: 2dppx) {

 

/* replacement CSS here */

 

}

Je kan natuurlijk ook javascript gebruiken en door de code te includen op de pagina. Wanneer je een pagina laadt bekijkt Retina.js of hogere resolutie versie is van de foto’s op de pagina. Als er een hogere resolutie variant bestaat dan zet Retina.js deze foto daar voor in de plaats.

 

Je kan ook @font-face en fonts die bestaan uit iconen gebruiken. De fonts zijn er goed in het werken met andere resoluties en scherm groottes.

Delen

Leave a comment