Je logo staat scherp op je briefpapier en op je bedrijfsbus. Op je website ziet het er net iets zachter uit. De randen zijn niet strak, de letters lijken uitgelopen. Op je eigen oude beeldscherm valt het niet op, op een nieuwe telefoon wel.
Dat komt niet doordat je bestand slecht is. Het komt doordat moderne schermen meer beeldpunten hebben dan je bestand aan informatie bevat.
Dit is een van de meest voorkomende klachten die ik krijg over een bestaande site. En het is bijna altijd in een uur op te lossen.
Je hoeft er niets voor te bouwen. Je moet alleen beeld op de juiste maat aanleveren.
Twee beeldpunten waar er vroeger een zat.
Wat is een retina-scherm?
Een scherm met een hoge schermdichtheid. De term komt van Apple, maar vrijwel elk modern toestel werkt zo.
Zulke schermen gebruiken twee of drie fysieke punten voor elke pixel die je website opgeeft. Meer over dat begrip lees je bij pixel.
Waarom tekst wel scherp is
Omdat tekst door je toestel opnieuw wordt getekend. Er is geen vast aantal punten, dus hij kan zo scherp als het scherm toelaat.
Een afbeelding heeft dat niet. Die bevat een vast aantal punten en daar valt niets bij te verzinnen.
Waarom je logo wazig oogt
Omdat het op ware grootte is aangeleverd. Staat je logo 200 punten breed, dan is een bestand van 200 breed te weinig.
Het toestel moet er 400 punten mee vullen. Het rekt je bestand op en verzint de tussenliggende punten.
De oplossing
Lever het aan op beeld op tweemaal aanleveren. Dus 400 breed voor een logo dat 200 breed staat.
Dat geldt ook voor je favicon en voor kleine iconen. Juist bij kleine elementen valt onscherpte het meest op.
Meerdere formaten per afbeelding
Voor foto’s is dubbel aanleveren niet handig. Een telefoon zou dan een enorm bestand binnenhalen dat hij niet nodig heeft.
Daarom bestaat er een techniek waarbij je meerdere formaten meegeeft. De browser kiest zelf welke versie hij ophaalt.
Wat de browser meeweegt
De breedte waarop de afbeelding wordt getoond.
De dichtheid van het scherm.
De beschikbare formaten die jij hebt klaargezet.
Een groot scherm krijgt de grote versie, een telefoon een kleine. Dat gebeurt automatisch en het kost jou geen werk.
Meestal staat het al aan
In een moderne WordPress-site gebeurt dit vanzelf. Bij het uploaden worden er meerdere formaten gemaakt.
Wordt je beeld toch wazig getoond, dan is het bronbestand te klein. Er valt dan geen groter formaat te kiezen.
Kost dat laadtijd?
Nauwelijks, mits het goed is ingesteld. Elk toestel krijgt namelijk de versie die erbij past.
Het gaat wel mis als je overal het grootste bestand serveert. Dan betaalt elke telefoon voor beeld dat hij niet kan tonen, zie pagespeed.
Combineer het daarom met lazy loading. Dan laadt beeld pas zodra iemand er echt naartoe scrolt.
Logo’s liever als vector
Voor een logo of icoon is vectorbeeld de beste keuze. Zo’n bestand bestaat niet uit punten maar uit vormen.
Het is daardoor op elke grootte scherp, op elk scherm. Bovendien is het bestand meestal kleiner dan een foto.
Vraag je vormgever dus altijd om dat bestand. Ook als je hem nu niet gebruikt, wil je hem in je archief hebben. Dat scheelt straks een ontwerpronde, zeker bij een site die volgens mobile first is gebouwd.
Bewaar je originelen
Werk altijd vanuit het grootste bestand dat je hebt. Verkleinen kan altijd, vergroten nooit.
Zet je originelen ergens veilig neer. Bij een herontwerp over drie jaar wil je niet werken met verkleinde versies.
Kies een modern bestandsformaat
Datzelfde beeld kan zo een derde kleiner zijn zonder zichtbaar verschil. Dat compenseert de extra punten die je aanlevert.
Een pagina van vijf megabyte komt vrijwel altijd door beeld. Daar valt dus de meeste winst te halen.
Waar het het meest opvalt
Bij kleine elementen met strakke randen. Een logo, een icoon in je menu of een pictogram bij een knop.
Bij een grote sfeerfoto ziet vrijwel niemand het verschil. Begin dus bij je logo en je iconen als je moet kiezen.
Meer vragen over Retina
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een retina-scherm?
Waarom ziet mijn logo er wazig uit?
Hoe lever je afbeeldingen aan voor een retina-scherm?
Wat is srcset?
Kost scherp beeld extra laadtijd?
Is een vectorbestand beter dan een foto voor een logo?
Wat is een retina-scherm?
Omdat het op ware grootte is aangeleverd. Staat je logo 200 punten breed op je site, dan is een bestand van 200 breed te weinig.
Het toestel moet er namelijk 400 punten mee vullen. Het rekt je bestand op en verzint de tussenliggende punten.
Juist bij kleine elementen valt dat op. Een logo, een icoon of een pictogram in je menu is precies waar het oog naar strakke randen zoekt.
Dit is een van de meest voorkomende klachten die ik krijg over een bestaande site. En het is bijna altijd in een uur op te lossen.
Je hoeft er niets voor te bouwen. Je moet alleen het beeld op de juiste maat opnieuw aanleveren.
Vraag je vormgever om je logo op dubbele grootte, of liever nog als vectorbestand. Dat laatste is op elke maat scherp.
Het is bijna altijd in een uur opgelost, en je hoeft er niets voor te laten bouwen.
Waarom ziet mijn logo er wazig uit?
Een scherm met een hoge beeldpuntdichtheid. De term komt van Apple, maar vrijwel elk modern toestel werkt zo.
Zulke schermen gebruiken twee of drie fysieke punten voor elke pixel die je website opgeeft. Daardoor oogt tekst haarscherp.
Dat tekst wel scherp is, komt doordat je toestel hem opnieuw tekent. Er is geen vast aantal punten, dus hij kan zo scherp als het scherm toelaat.
Een afbeelding heeft dat niet. Die bevat een vast aantal punten en daar valt niets bij te verzinnen.
Daar zit dus het verschil dat je ziet. Je teksten staan strak en je logo’s en foto’s net niet, op hetzelfde scherm.
Je hoeft hier zelf niets voor in te stellen. Het verklaart wel waarom je teksten strak staan en je logo net niet.
Bekijk je site een keer op een nieuw toestel om te zien of het bij jou speelt. Kijk daarbij vooral naar je logo en de iconen in je menu.
Hoe lever je afbeeldingen aan voor een retina-scherm?
Op ongeveer twee keer de breedte waarop ze getoond worden. Dus 400 breed voor een logo dat 200 breed staat.
Dat geldt ook voor je favicon en voor kleine iconen. Bewaar bovendien altijd je originele bestand ergens veilig.
Voor foto’s ligt het iets anders. Alles standaard dubbel aanleveren is onhandig, want dan haalt een telefoon een enorm bestand binnen dat hij niet nodig heeft.
Daar werk je met meerdere formaten per afbeelding, zodat de browser zelf kan kiezen.
In een moderne WordPress-site gebeurt dat vanzelf. Bij het uploaden worden meerdere maten aangemaakt, mits je bronbestand groot genoeg is.
Bewaar je originele bestanden ergens veilig en werk daar altijd vanuit. Verkleinen kan altijd, vergroten nooit.
Bij een herontwerp over drie jaar wil je niet werken met de verkleinde versies van je huidige site. Lever je logo bovendien altijd op dubbele grootte aan, of als vectorbestand. Dat scheelt gedoe bij elke volgende aanpassing.
Wat is srcset?
Dat is de techniek waarmee je meerdere formaten van dezelfde afbeelding meegeeft. De browser kiest zelf welke versie hij ophaalt.
Hij weegt daarbij drie dingen mee. De breedte waarop de afbeelding wordt getoond, de dichtheid van het scherm en de formaten die jij hebt klaargezet.
Een groot scherm krijgt de grote versie, een telefoon een kleine. Dat gebeurt automatisch en het kost jou geen werk.
In WordPress staat dit standaard aan. Je hoeft er dus niets voor in te stellen of te installeren.
Wordt je beeld toch wazig getoond, dan is het bronbestand te klein. Er valt dan geen groter formaat te kiezen, hoe goed de techniek ook is.
Controleer of je bronbestanden groot genoeg zijn geupload. Zonder groot origineel kan de techniek niets kiezen.
Upload dus liever te groot dan te klein. WordPress maakt de kleinere maten er zelf bij aan. Controleer dat een keer bij je belangrijkste pagina-afbeeldingen.
Kost scherp beeld extra laadtijd?
Nauwelijks, mits het goed is ingesteld. Elk toestel krijgt namelijk de versie die bij zijn scherm past.
Het gaat wel mis als je overal het grootste bestand serveert. Dan betaalt elke telefoon voor beeld dat hij niet eens kan tonen.
Dat is een fout die je terugziet in je laadtijd op mobiel. Een pagina van vijf megabyte komt vrijwel altijd door beeld.
Combineer het daarom met uitgesteld laden. Dan haalt de browser beeld pas op zodra iemand er echt naartoe scrolt.
Kies daarnaast een modern bestandsformaat. Datzelfde beeld kan dan zo een derde kleiner zijn zonder zichtbaar verschil. Meer daarover lees je bij pagespeed.
Laat je laadtijd een keer meten op mobiel en kijk hoeveel daarvan beeld is. Daar zit meestal de grootste winst.
Combineer scherp beeld met uitgesteld laden en een modern bestandsformaat. Dan betaal je nauwelijks voor de extra scherpte. Vraag om een meting op mobiel, want daar valt de winst te halen.
Ziet je logo er wazig uit op je site of op een nieuwe telefoon? Stuur me de link via het formulier hieronder. Ik kijk welke afmetingen er worden gebruikt en wat je zou moeten aanleveren om het strak te krijgen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Hoge-resolutiescherm, hidpi, 2x-scherm
