DPI vs resolutie

[Verwijderd]

Ik ben bezig met een website die schaalt met verschillende schermresoluties. Nu er laptops zijn met extreem hoge pixeldichtheid zoals de nieuwe Apple laptops, is het wel mooi om ook de foto's in hoge resolutie er op te zetten. Je ziet namelijk meteen op zo'n scherm wat 'vector-elementen' zijn en wat 'pixel-elementen' zijn; foto's zijn gewoon niet 100% scherp vergeleken met de rest.

De vraag is, hoe kan ik dit het beste in de website stoppen? Is het beter om voor een hoge resolutie te gaan met een 'standaard' dpi of de resolutie hetzelfde te laten en de dpi te verhogen?

Wat is beter van deze twee (Resoluties zijn hypothetisch, het gaat nu om het principe):

Normaal
500x1000 op 100dpi

"Retina-ready"
Optie 1: 500x1000 op 200dpi
Optie 2: 1000x2000 op 100dpi

[aZuL2001]

1 dpi volstaat.

Dpi is alleen voor printwerk van belang.
Niet voor schermen.


Test het maar, pak een gedetaileerde afbeelding of foto, en zet een deel in 300, 200, 100 en 1 dpi naast elkaar op je website.
Zoek de verschillen.

[Verwijderd]

Als je het over een website hebt, heb je géén controle over de pixel density. Jij kiest die niet, die kiest de gebruiker van de website. Je hoeft je er dus niet druk over te maken. Hoe groot iemand iets op zijn scherm wil zetten is zijn zaak. Jij moet alleen maar zorgen dat het enigszins aansluit bij de venstergrootte (in pixels) die mensen ongeveer gaan kiezen.

Ga dus niet uit van full screen, ga uit van vensters of viewports. Het is geen papier.

[Bosmonster]

Dat is niet helemaal het geval meer natuurlijk met Retina. Je zult daar wel degelijk afbeeldingen in 2 verschillende formaten moeten aanbieden om alles scherp te krijgen, om rekening te houden met high-ppi schermen (het is ppi, pixels, ipv dpi, dots, in dit geval).

Hoe je dit technisch gezien het handigste kunt doen kun je vast wel vinden op Google.

[ Voor 15% gewijzigd door Bosmonster op 01-12-2012 13:17 ]

[_Erikje_]

't is zeker goed om over na te denken, zeker nu met het grote aandeel aan Retina schermen op mobiele sites, voor desktop sites is het in mindere mate van belang omdat het aantal Retina desktop schermen nogal klein is.

Maar als je Retina-ready(tm) wil zijn zou ik hier naar kijken http://www.studiopress.co...kground-size-graphics.htm

Deze techniek heb ik ook gebruikt voor een mobiele website en dat werkt perfect, het verschil is duidelijk waarneembaar op Retina schermen.

Als je toch bezig bent: kijk ook naar font-scaling en anti-aliasing van fonts.

[_Thanatos_]

Je kunt een afbeelding gewoon twee keer te groot maken en dan de halve hoogte en breedte maken. De hoogte en breedte die je meegeeft zijn nml "css-pixels" en geen device pixels. Voorbeeldje:

HTML:

<img src="1000x1000.jpg" width=500 height=500>

Hiermee wordt je afbeelding op de Galaxy Tab (nagenoeg) even groot als op de Nexus 10, alleen op de Nexus 10 is ie 2x zo scherp. Die 500x500 die je opgeeft, zijn "css-pixels" welke dus door de browser vertaalt (en geschaald) worden naar device pixels.

Nadeel is dat "low dpi" schermen meer informatie krijgen dat ze kunnen weergeven en dus moet terugschalen. Maar echt een probleem vind ik dat niet, omdat een afbeelding meestal niet veel groter wordt bij een dergelijke grotere maat.

Dit alles is geldt ook voor background-image i.c.m. background-size.

Voor een compleet verhaal: A pixel is not a pixel is not a pixel

[ Voor 12% gewijzigd door _Thanatos_ op 04-12-2012 13:10 ]

[MoietyMe]

_Thanatos_ schreef op dinsdag 04 december 2012 @ 13:08:
Je kunt een afbeelding gewoon twee keer te groot maken en dan de halve hoogte en breedte maken.

Maar echt een probleem vind ik dat niet, omdat een afbeelding meestal niet veel groter wordt bij een dergelijke grotere maat.

Een foto op 3000x2000 (1,67 MB) pixels is bij anders toch drie keer zo groot als op 1500x1000 (534 kB) welke op haar beurt dan weer drie en een half maal zo groot is als dezelfde foto op 750x500 (153 kB). Ga dat verschil maar eens binnen halen met je datalimiet op je mobiele abonnement.

Dus "echt een probleem vind ik dat niet" is hier niet van toepassing; voor jou is het misschien geen probleem, maar voor andere des temeer. Dus die arme mensen zijn bij het laden van jouw pagina al door hun datalimiet heen. Alleen omdat jij je website niet wilt optimaliseren.

[Menesis]

agreed met _Thanatos_

het web lijkt nog niet klaar te zijn voor ,jawel, verschillende dpi waardes. Met de grote verschillen tussen pixeldichtheden (en dus de grootte van elemente) is dat echter wel nodig.

[Bosmonster]

Good Fella schreef op dinsdag 04 december 2012 @ 13:48:
[...]

Een foto op 3000x2000 (1,67 MB) pixels is bij anders toch drie keer zo groot als op 1500x1000 (534 kB) welke op haar beurt dan weer drie en een half maal zo groot is als dezelfde foto op 750x500 (153 kB). Ga dat verschil maar eens binnen halen met je datalimiet op je mobiele abonnement.

Dus "echt een probleem vind ik dat niet" is hier niet van toepassing; voor jou is het misschien geen probleem, maar voor andere des temeer. Dus die arme mensen zijn bij het laden van jouw pagina al door hun datalimiet heen. Alleen omdat jij je website niet wilt optimaliseren.

Je kunt met de grotere afbeeldingen (doordat de ppi vele malen hoger is) de compressie ook flink opschroeven zonder dat je dat merkt.

In de praktijk hoeven foto's voor Retina dus niet of nauwelijks groter te zijn (sterker nog, kunnen zelfs kleiner zijn!)

Leuk artikel hier over: http://blog.netvlies.nl/design-interactie/retina-revolution/

[ Voor 6% gewijzigd door Bosmonster op 04-12-2012 15:31 ]

[MoietyMe]

Bosmonster schreef op dinsdag 04 december 2012 @ 15:29:
[...]


Je kunt met de grotere afbeeldingen (doordat de ppi vele malen hoger is) de compressie ook flink opschroeven zonder dat je dat merkt.

In de praktijk hoeven foto's voor Retina dus niet of nauwelijks groter te zijn (sterker nog, kunnen zelfs kleiner zijn!)

Leuk artikel hier over: http://blog.netvlies.nl/design-interactie/retina-revolution/

Interessant artikel inderdaad. Dank u Bosmonster

[Nedra]

Hier nog een interessant artikel van Smashing Magazine
http://coding.smashingmag...08/20/towards-retina-web/
En hier een interessant artikel over Media Queries en Retina displays
http://css-tricks.com/sni...tina-display-media-query/