Webinar - Starten met AI tools om je online commuicatie te verbeteren
Jurrien heeft onlangs een webinar gegeven over AI tools. Bekijk het hier terug en start makkelijk en snel met de kracht van AI toe te passen!
Hoe om te gaan met Retina en HiDPI schermen
Met de introductie van de iPhone 4 van Apple kwam ook de introductie van schermen met een hogere PPI (pixel per inch). De Retina schermen (zoals Apple het noemt) en HiDPI schermen (zoals de rest het noemt) zorgen ervoor dat op hetzelfde oppervlak meerdere pixels getoond kunnen worden. Waar de meeste schermen 72 PPI tonen, kunnen de Retina Displays en HiDPI schermen gemiddeld meer dan 200 PPI tonen. Dit houdt in dat alles gedetailleerder en scherper wordt. Prachtig toch?
Wazige websites
Alleen is er een probleem. We hebben onze websites decennia lang geoptimaliseerd voor schermen die slechts 72 PPI aan kunnen. Op de Retina en HiDPI schermen worden afbeeldingen met maar 72 PPI 'uitgesmeerd' over meer dan 200 PPI wat betekent dat de afbeeldingen er wazig uitzien op deze schermen. Vaak worden afbeeldingen ook gebruikt voor bijvoorbeeld icoontjes of om bepaalde elementen afgeronde hoeken of een schaduwtje te geven. Uiteindelijk zit je met een wazige website waarbij alleen de tekst scherp is.
Wil je weten hoe dit eruit ziet maar heb je geen Retina of HiDPI scherm? Geen probleem, je kan het namelijk ook gemakkelijk simuleren in een browser door in te zoomen. Door een paar keer op 'CTRL' en '+' te drukken vergroot je de website en zie je dat de plaatjes wazig worden. Wil je weer terug naar de normale stand, druk dan op 'CTRL' en '0'.
Grotere plaatjes, CSS3 en Icon Fonts
Gelukkig zijn er oplossingen om ervoor te zorgen dat jouw website er haarscherp uitziet op deze schermen. Om te beginnen kijken we naar de afbeeldingen die je bijvoorbeeld bij een artikel plaatst.
Een simpele truc is om de afbeeldingen groter te uploaden maar kleiner dan het oorspronkelijke formaat te tonen op de website. Stel je voor je wil een afbeelding tonen op een vlak van 200 x 150 pixel. Upload de afbeelding in een formaat groter dan 200 x 150 pixels. Een goede maat staaf is om de afbeelding 1.5 keer zo groot te uploaden. In het geval van 200 x 150 pixels is dat 300 x 225 pixels (Let wel op dat de originele afbeelding minstens 300 x 225 pixels moet zijn). Binnen je website kun je dan (met bijvoorbeeld een WYSIWYG editor) de afbeelding plaatsen en een breedte geven van 200 pixels en een hoogte van 150 pixels. Nu ziet het er zowel op een scherm van 72 PPI als op een scherm van 200+ PPI goed uit.
Grotere plaatjes betekent wel dat de bezoeker meer KB's (Kilobytes) moet downloaden. Dit maakt voor iemand op een breedband connectie niet veel uit maar als je op je mobiele telefoon zit met een 3G connectie dan is elke extra gedownloade KB er één teveel. Volgens Dan Sheerman is dit echter geen probleem omdat onze mobiele providers de afbeeldingen al dusdanig comprimeren waardoor mobiele bezoekers minder hoeven te downloaden.
Zoals ik al aangaf worden afbeeldingen ook vaak gebruikt om bepaalde stijl elementen zoals afgeronde hoeken of schaduwtjes te simuleren. Met de komst van CSS3 is het niet meer nodig om hiervoor afbeeldingen te gebruiken maar kun je het de browser direct laten genereren. Omdat de browser nu het vuile werk opknapt is een afgeronde hoek of schaduw PPI onafhankelijk. Je kan ze zo groot opblazen als je zelf wil zonder dat het wazig wordt.
Als laatste is er ook nog een mooie oplossing om icoontjes goed weer te geven op hoge PPI schermen. Door gebruik te maken van zogenaamde 'Icon Fonts' zijn de icoontjes die je gebruikt geen afbeeldingen meer, maar is het een lettertype (of font). Daardoor zullen de icoontjes, net zoals de tekst, op je website even scherp blijven op alle schermen. Een lettertype maakt namelijk geen gebruik van pixels en zal zich daarom ook niks aantrekken van welke PPI een scherm heeft. Dit is goed te zien in het voorbeeld van CSS Tricks.
Laat ze maar komen
Je kan jezelf afvragen of het echt nodig is dat we schermen hebben met een dergelijke hoge PPI, maar dat ze binnenkort mainstream gaan worden is onvermijdelijk. Met de bovenstaande technieken is jouw website er in ieder geval helemaal klaar voor!
Heb je zelf nog tips of vragen. Laat het mij dan weten in het commentaar!
Gerelateerde artikelen
Wij delen graag de kennis die we in huis hebben
Reacties
Hallo,
Ik zelf heb ook een retina macbook pro 15''.
Met het maken van mijn eigen website zag ik dit probleem ook al aankomen.
Ik vroeg me af waarom plaatjes nu inderdaad 'waziger' worden op het retina scherm.
De website's die nu inderdaad ook gebaseerd zijn op retina displays zien er geweldig uit.
Na mijn eigen ervaring lijkt het zelfs dat een simpele website wel gebaseerd op retina er beter uit ziet dan een ingewikkelde mooie website die niet gebaseerd is op retina.
Verder een super artikel, bedankt!
Met vriendelijke groet,
Glenn
Reactie van Glenn op 20 november 2012
Natuurlijk is het fijn als images altijd scherp zijn en getoond worden zoals de website ze bedoelt heeft. Dit zal als bijzonder prettig worden ervaren door de bezoeker. Met komst van 3G (straks 4G) en voor thuis de glaskabel, krijg je steeds sneller toegang tot het internet. Hierdoor zul je het verschil in download tijd - zoals jij ook al aangeeft - nauwelijks merken.
Echter kleeft er wel een gevaar aan het zomaar plaatsen van grotere images dan nodig is. Omdat tegenwoordig zo goed als iedereen Google gebruikt, dienen we ook rekening te houden met de richtlijnen die Google hanteert voor jouw website.
In het kort komt het er op neer dat een bezoeker niet meer moet downloaden dan nodig is. Hierbij hanteert Google - ik denk even los gezien van het feit dat providers de images ook voor je comprimeren - vrij strak de regel dat je "strafpunten" kunt krijgen wanneer het merendeel van je images een veel groter formaat heeft dan nodig is.. Ook al pas je zelf een zeer goede compressie toe.
Een andere vervelende bijkomstigheid kan zijn dat de algemene laadtijd van je website hoger wordt. Met andere woorden: je website wordt trager. Trage(re) websites kunnen een lagere ranking binnen het Google netwerk krijgen dan snel en goed geoptimaliseerde websites. Hiermee stuit ik voor mijzelf op 2 belangrijke punten. Zeker wanneer het voor jou belangrijk is om goed (hoog) te scoren op het Google netwerk.
Mijn vraag aan Robert: Kan deze “vervelende” bijkomstigheid opgelost worden met CSS(3)? Met andere woorden: kun je voor een bepaalde range van schermresoluties - voor elk geval - de beste images laden?
Reactie van Remco Toele op 26 november 2012
"Google straft tragere websites", dat is een goed punt! Ik denk daarom ook dat je heel goed moet nadenken over wat je belangrijk vind voor jouw website. Moet deze er op de nieuwe mobieltjes en tablets perfect uitzien of heb je liever geen strafpunten van Google.
Het is natuurlijk ook lastig om te zeggen in hoeverre je gestraft wordt door Google en hoeveel effect dat heeft op je positie in de zoekresultaten. Dat maakt het moeilijker om de voor en nadelen tegen elkaar op te wegen. Je kan ook je statistieken nemen als leidraad. Als je bijvoorbeeld ziet dat er per maand maar twee mensen met een HiDPI of Retina scherm je website bezoekt dan is het de moeite niet waard. Maar hou deze statistieken goed in de gaten want het kan de komende jaren explosief stijgen.
Achter de schermen wordt er druk gewerkt aan een andere oplossing die wat vriendelijker is voor Google. De zogenaamde 'Picture' tag. Met deze Picture tag kun je op basis van de DPI resolutie van het beeldscherm verschillende formaten van plaatjes aanbieden. Apparaten met lagere resoluties downloaden dan het formaat van het plaatje wat correspondeert met de DPI van het beeldscherm en hoeven dus niet (zoals hierboven beschreven) een groter plaatje te downloaden. Echter zoals dat gaat met elk nieuw HTML/CSS element kan het nog wel eens jaren duren voordat dit algemeen geaccepteerd wordt.
Voorlopig is de door mij beschreven methode in het artikel de beste manier om afbeeldingen op een goede manier te tonen op een HiDPI en Retina scherm. Je zal echter zelf de afweging moeten maken hoe zwaar de straf van Google zal zijn voor het tonen van 'te grote' afbeeldingen.
Reactie van Robert Roose op 30 november 2012
Ik heb gehoord dat PNG afbeeldingen wel met goede kwaliteit kunnen worden vergroot. Is het vervangen van alle afbeeldingen in de website naar het PNG formaat dan ook een mogelijke oplossing?
Reactie van Rene op 12 december 2012
Volgens mij maakt dat niet zo heel veel uit. Een PNG is over het algemeen wel scherper maar wordt ook wazig als je deze bekijkt op een HiDPI of Retina scherm bekijkt. Het is wachten op een oplossing zoals Chris Coyer beschrijft in zijn artikel 'On Responsive Images' waarbij hij een nieuw type bestand voorstelt namelijk de 'Responsive PNG' (http://css-tricks.com/on-responsive-images/).
Reactie van Robert Roose op 29 januari 2013