Pixel: het kleinste puntje, en een meetpunt met dezelfde naam
Het woord pixel wordt voor twee totaal verschillende dingen gebruikt. Het ene is het bouwsteentje van je scherm. Het andere is een onzichtbaar meetpunt dat bijhoudt wie je site bezoekt. Ze hebben niets met elkaar te maken, behalve de naam.
Bij het eerste gaat het over scherpte. Bij het tweede over privacy.
Ik behandel ze hier allebei, want in gesprekken lopen ze door elkaar. Iemand die vraagt om de pixel te plaatsen, bedoelt zelden een beeldpunt.
De verwarring is onhandig, dus vraag altijd even door. Zeker als er een advertentiebureau bij betrokken is.
Het kleinste puntje op je scherm, en een meetpunt met dezelfde naam.
Wat is een pixel?
Een pixel is het kleinste beeldpunt op een scherm. Het woord komt van picture element.
Elk beeld dat je ziet, bestaat uit een raster van die puntjes. Hoe meer er in dezelfde ruimte passen, hoe scherper het oogt.
Resolutie
De resolutie van een afbeelding is het aantal pixels in de breedte en de hoogte. Een foto van 1600 bij 900 bestaat dus uit ruim anderhalf miljoen puntjes.
Bij drukwerk hoor je over dpi. Voor een website is dat getal niet relevant. Wat telt is het aantal pixels, en verder niets.
Scherpe afbeeldingen
Moderne telefoons en laptops hebben een hoge schermdichtheid. Ze proppen twee of drie beeldpunten in de ruimte waar er vroeger een zat.
Dat is prettig voor tekst en vervelend voor beeld. Een afbeelding die precies past, oogt op zo’n scherm wazig.
Wat ik aanhoud
Lever beeld op ongeveer twee keer de weergavebreedte aan.
Een afbeelding op volle breedte: rond de 2000 pixels breed.
Een foto in een kolom van een derde: rond de 800 pixels.
Nooit groter dan nodig, want dat kost laadtijd.
Die laatste is de balans. Bij het afbeelding scherp houden zoek je het punt tussen scherp genoeg en licht genoeg. Meer daarover lees je bij pagespeed.
Waarom een afbeelding wazig is
In negen van de tien gevallen omdat hij te klein is aangeleverd en wordt opgerekt.
Een foto van 400 pixels breed die over de volle breedte wordt getoond, kan niet scherp zijn. Er is simpelweg geen informatie om mee te vullen.
Werk daarom altijd vanuit het grootste bronbestand dat je hebt. Verkleinen kan altijd, vergroten nooit. Dat geldt ook voor je favicon.
De trackingpixel
Een trackingpixel is iets heel anders. Het is een onzichtbaar bestandje of stukje code dat een advertentieplatform op je site zet.
Daarmee wordt bijgehouden wie je site bezoekt en wat hij doet. Dat gebruiken ze om advertenties te richten en om resultaat te meten.
Hij valt onder dezelfde regels als je statistieken. Je hebt vooraf toestemming nodig voordat hij mag laden. Meer daarover lees je bij cookie.
Laat hem dus niet standaard meeladen. Dat is een fout die veel sites maken zodra er een campagne loopt.
Vraag wie hem plaatst
Bij een campagne wil een bureau vaak zelf iets op je site zetten. Vraag dan of het achter je toestemmingsvraag zit.
Jij bent verantwoordelijk voor wat er op jouw site gebeurt, ook als iemand anders het heeft geplaatst.
Wat een retina-scherm betekent
Zulke schermen gebruiken twee of drie fysieke beeldpunten voor elke pixel die je website opgeeft. Daardoor oogt tekst haarscherp.
Voor tekst is dat prettig, want die wordt opnieuw getekend. Voor afbeeldingen is het lastiger, want die hebben vaste informatie. Daarom lever je beeld op het dubbele aan.
Een tweede oorzaak van wazig beeld
Te zware compressie. Wordt een foto tot een tiende van zijn grootte geperst, dan zie je blokjes rond scherpe randen.
Dat speelt vooral bij logo’s en schermafbeeldingen met tekst. Kies daar een ander bestandsformaat, en gebruik lazy loading om het gewicht op te vangen. Vergeet je alt-tekst niet.
Meer vragen over Pixel
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een pixel?
Hoeveel pixels moet een afbeelding zijn voor een website?
Wat is een retina-scherm?
Waarom is mijn afbeelding wazig?
Wat is een trackingpixel?
Wat is het verschil tussen pixels en punten?
Wat is een pixel?
Ongeveer twee keer de breedte waarop hij getoond wordt. Dat klinkt verspillend maar het heeft een reden.
Moderne telefoons en laptops proppen twee of drie beeldpunten in de ruimte waar er vroeger een zat. Een afbeelding die precies past, oogt op zo’n scherm wazig.
In de praktijk kom ik uit op deze getallen. Een afbeelding op volle breedte: rond de 2000 pixels breed. Een foto in een kolom van een derde: rond de 800 pixels.
Ga niet groter dan nodig, want dat kost laadtijd. Een foto van 5000 pixels breed is voor niemand nuttig.
Je zoekt het punt tussen scherp genoeg en licht genoeg. Meer daarover lees je bij pagespeed.
Lever je beeld aan op ongeveer twee keer de weergavebreedte. Voor een afbeelding op volle breedte is dat rond de 2000 pixels.
Ga niet groter dan nodig, want dat kost laadtijd zonder dat iemand het ziet. Een foto van 5000 pixels breed is voor niemand nuttig.
Hoeveel pixels moet een afbeelding zijn voor een website?
Een pixel is het kleinste beeldpunt op een scherm. Het woord komt van picture element.
Elk beeld dat je ziet, bestaat uit een raster van die puntjes. Hoe meer er in dezelfde ruimte passen, hoe scherper het oogt.
De resolutie van een afbeelding is het aantal pixels in de breedte en de hoogte. Een foto van 1600 bij 900 bestaat dus uit ruim anderhalf miljoen puntjes.
Bij drukwerk hoor je over dpi, dus punten per inch. Voor een website is dat getal niet relevant. Wat telt is het aantal pixels en verder niets.
Het woord wordt trouwens voor twee totaal verschillende dingen gebruikt. Naast het beeldpunt bestaat er een trackingpixel: een onzichtbaar meetpunt. Die hebben niets met elkaar te maken behalve de naam.
Vraag bij een gesprek altijd even door als iemand het over een pixel heeft. Bedoelt hij een beeldpunt of een meetpunt?
Die twee hebben niets met elkaar te maken en de verwarring levert regelmatig misverstanden op, zeker als er een advertentiebureau bij betrokken is.
Waarom is mijn afbeelding wazig?
In negen van de tien gevallen omdat hij te klein is aangeleverd en wordt opgerekt.
Een foto van 400 pixels breed die over de volle breedte wordt getoond, kan niet scherp zijn. Er is simpelweg geen informatie om mee te vullen.
De browser verzint dan tussenliggende punten, en dat ziet er zacht en vlekkerig uit.
Werk daarom altijd vanuit het grootste bronbestand dat je hebt. Verkleinen kan altijd, vergroten nooit.
De tweede oorzaak is te zware compressie. Wordt een foto tot een tiende van zijn grootte geperst, dan zie je blokjes rond scherpe randen. Dat speelt vooral bij logo’s en schermafbeeldingen met tekst.
Werk altijd vanuit het grootste bronbestand dat je hebt. Verkleinen kan altijd, vergroten nooit.
Bewaar je originelen dus ergens veilig. Bij een herontwerp over drie jaar wil je niet werken met de verkleinde versies van je huidige site. Bewaar je originelen ergens veilig en werk daar altijd vanuit.
Wat is een retina-scherm?
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 beeldpunten voor elke pixel die een website opgeeft. Daardoor oogt tekst haarscherp.
Voor tekst is dat prettig, want die wordt door je toestel opnieuw getekend. Voor afbeeldingen is het lastiger, want die hebben vaste informatie.
Daarom lever je beeld op ongeveer het dubbele aan. Dan heeft je toestel genoeg te tekenen.
Je hoeft daar zelf geen rekenwerk voor te doen. Een goede site regelt dit met meerdere formaten per afbeelding, zodat een telefoon een kleinere versie krijgt dan een groot scherm.
Je hoeft hier zelf geen rekenwerk voor te doen. Een goede site regelt dit met meerdere formaten per afbeelding.
Een telefoon krijgt dan een kleinere versie dan een groot scherm. Vraag je bouwer of dat bij jou is ingesteld. Zo krijgt elk toestel de versie die erbij past, zonder dat jij iets hoeft te rekenen.
Wat is een trackingpixel?
Iets heel anders dan een beeldpunt. Het is een onzichtbaar bestandje of stukje code dat een advertentieplatform op je site zet.
Daarmee wordt bijgehouden wie je site bezoekt en wat hij doet. Dat gebruiken ze om advertenties te richten en om resultaat te meten.
Hij valt onder dezelfde regels als je statistieken. Je hebt vooraf toestemming nodig voordat hij mag laden.
Laat hem dus niet standaard meeladen. Dat is een fout die veel sites maken zodra er een campagne loopt en er haast is.
Vraag bij een campagne altijd wie de pixel plaatst en of hij achter je toestemmingsvraag zit. Meer over die regels lees je bij cookie.
Zorg dat een meetpixel achter je toestemmingsvraag zit en niet standaard meelaadt. Dat is een fout die veel sites maken zodra er haast is.
Jij bent verantwoordelijk voor wat er op jouw site gebeurt, ook als een bureau het heeft geplaatst. Controleer dat een keer per campagne, want er wordt vaak snel iets toegevoegd.
Zien de foto’s op jouw site er niet scherp uit, of laadt je site traag door beeld? Stuur me de link via het formulier hieronder. Ik kijk welke afmetingen er worden gebruikt en wat je zou moeten aanleveren. Vermeld je plaats, dan weet ik meteen waar je zit.
