[Feat] Retina resolutie graphics

[Jasper Janssen]

Nu een tijdje met de iPad 3 bezig geweest. Met name op de frontpage, vooral in landscape, zie je toch wel goed dat bijna alles vector/text/css is, maar dat er een paar images nog zijn — het logo, de reply/edit knopjes, de submit/cancel knopjes op de FP (maar weer niet degenen hieronder op het forum, gek genoeg), etc.

Zo te zien zijn er vrij weinig reguliere images die op alle pages terugkomen.

Zou het mogelijk zijn (op termijn, als daar eenmaal goede mogelijkheden voor zijn) deze assets in hogere resolutie uit te serveren aan devices die daarmee wat kunnen?

[LtMarx]

Haha, dit was mij ook al een aantal keer opgevallen. Ik kan me voorstellen dat deze feature niet de hoogste prioriteit heeft alhoewel hidpi schermen wel een trend lijken te gaan worden.

[Robin]

Dit is overigens interessant leesvoer (ook voor de devvers ): de wijze waarop Apple afbeeldingen in hogere resolutie serveert voor de derde generatie iPad http://blog.cloudfour.com...tina-images-to-new-ipads/

TLDR: Om een idee te geven: de frontpage van Apple.com is op de nieuwe iPad een slurper: "The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded."

[crisp]

In de nieuwe layout gaan we sowieso nog veel meer gebruik maken van CSS(3) en icons met semi-transparantie.

Voor overige plaatjes zitten we feitelijk in een catch-22 positie; aan de ene kant heb je devices met hogere resoluties dan menig desktop en zou je die inderdaad - vermits je ze goed kunt identificeren - plaatjes met hogere resoluties kunnen serveren. Aan de andere kant echter bestaat de kans dat dergelijke devices ook gebruik maken van tragere verbindingen en/of limieten en wil je daarvoor de site juist zo licht mogelijk maken (en plaatjes slokken over het algemeen al het grootste deel van de bandbreedte op). Het is daarbij technisch vrijwel onmogelijk om te herkennen wat voor soort verbinding een device gebruikt, dus linksom of rechtsom zitten er nadelen aan.

[Jasper Janssen]

Robin schreef op dinsdag 27 maart 2012 @ 23:03:
Dit is overigens interessant leesvoer (ook voor de devvers ): de wijze waarop Apple afbeeldingen in hogere resolutie serveert voor de derde generatie iPad http://blog.cloudfour.com...tina-images-to-new-ipads/

TLDR: Om een idee te geven: de frontpage van Apple.com is op de nieuwe iPad een slurper: "The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded."

Klopt, maar dat gaat wel redelijk specifiek over very large images -- en images die zo groot zijn dat om de feature-not-a-bug limits van mobile safari heen moeten werken om 'm ueberhaupt te serveren (waardoor zowel de normale als de grote versie wordt geserveerd).

Ik wacht nog op webkit- / safari- css extensies die op een fatsoenlijke manier images gewoon in twee (of meer) formaten kunnen aanbieden zodat de client kan bepalen welke van die versies ze downloaden (zodat zelfs een iPad 3 kan zeggen dat ie op 3G hangt en dus maar de 1x images neemt).

crisp schreef op dinsdag 27 maart 2012 @ 23:04:
In de nieuwe layout gaan we sowieso nog veel meer gebruik maken van CSS(3) en icons met semi-transparantie.

Voor overige plaatjes zitten we feitelijk in een catch-22 positie; aan de ene kant heb je devices met hogere resoluties dan menig desktop en zou je die inderdaad - vermits je ze goed kunt identificeren - plaatjes met hogere resoluties kunnen serveren. Aan de andere kant echter bestaat de kans dat dergelijke devices ook gebruik maken van tragere verbindingen en/of limieten en wil je daarvoor de site juist zo licht mogelijk maken (en plaatjes slokken over het algemeen al het grootste deel van de bandbreedte op). Het is daarbij technisch vrijwel onmogelijk om te herkennen wat voor soort verbinding een device gebruikt, dus linksom of rechtsom zitten er nadelen aan.

D'r is nog niet veel komen opdagen voor dit soort dingen. Beetje geluk, iOS 6/Mountain Lion op WWDC volgende maand, dat ze dingen introduceren om dit mogelijk te gaan maken.

Mijn idee met de icoontjes die ik hierboven noem is a) dat zijn sowieso kleine bestanden, zelfs in HiDPI, en b) Veel ervan staan in veelvoud op vrijwel iedere pagina, en zullen dus relatief weinig cache misses opleveren.

[ Voor 5% gewijzigd door Jasper Janssen op 18-05-2012 15:19 ]

[crisp]

Voor kleine icoontjes e.d. is het inderdaad wel doable; sterker nog: ik heb het zelfs al toegepast in de nieuwe layout voor een aantal images die als background gebruikt worden (dan kan het in puur CSS opgelost worden met behulp van media-queries)

Ik heb begrepen dat de WHATWG inmiddels ook bezig is met dit vraagstuk