Dit is bedoeld voor hoge kwaliteit beeldschermen zoals de retina maar geeft, bij gewone beeldschermen de mogelijkheid in te zoomen op foto's met behoud van kwaliteit.
1. Hoe te beginnen?
In het scherm 'nieuwe site' kies je links onderaan voor de resolutie HiDPI (2x).Je krijgt nu de waarschuwing dat daardoor de laadtijd langer wordt want de foto's worden groter.
Gelukkig kun je een (standaard) knop inbouwen die dat probleem verhelpt. (later meer daarover).
2. Hoe groot plaatsen?
Op het moment dat je een foto plaatst kun je in het assist / elementen paneel zien of deze geschikt is voor het gebruik van HiDPI. Achter de foto staat dan: 2x. Als je de foto te groot op de pagina plaatst dan verdwijnt deze '2x'. Als je een foto 500 pixels breed op de pagina wilt plaatsen moet je hem opslaan met een breedte van 1000 pixels.
 |
| foto met HiDPI geplaatst |
 |
| foto te groot op de pagina geplaatst |
3. Normaal / HiDPI knop
In de widgets bibliotheek bij 'knoppen' zie je een HiDPI button. Deze kun je op de pagina slepen. In principe zal de website op een hoge kwaliteit beeldscherm automatisch de beste kwaliteit laten zien. Met deze knop kun je dat uitzetten waardoor de laadtijd versnelt wordt. Als je op een gewoon beeldscherm aan het kijken bent en je zet de knop aan dan kun je de foto vergroten met behoud van kwaliteit zoals op de afbeeldingen beneden duidelijk te zien is (bijv. bij de snorharen links onder).
4. Hoe werkt dit?
Als je de website exporteert naar HTML dan zie je wat er gebeurd; de foto wordt op 3 verschillende formaten opgeslagen. De ene groter als de andere. Als je vervolgens ook nog een versie voor de tablet en telefoon maakt waarbij de foto aanpast aan het apparaat dan heb je in de map 4 bestanden staan met verschillende afmetingen.
