PixelSpec

Er is een categorie zoekopdrachten waar de zoeker al weet wat hij wil weten. "Instagram post size", "YouTube thumbnail size", "LinkedIn banner size": dat zijn geen vragen om een mening, het zijn vragen om een getal. 1080 bij 1350. 1280 bij 720. Klaar. Toch is dat getal op de meeste pagina's die erop ranken pas na een paar schermen scrollen te vinden, verpakt in een blogpost die net zo goed over iets anders had kunnen gaan, met een jaartal in de titel dat al twee versies achterloopt.

De tweede helft van het probleem is nog vervelender. Wie het formaat weet, wil zijn afbeelding erin passen. De gratis resizers die daarvoor bestaan vragen je in de regel om je bestand eerst te uploaden naar een server die je niet kent, waarna je op een voortgangsbalk zit te wachten voor een bewerking die je computer in een fractie van een seconde zelf had kunnen doen. Voor een productfoto is dat hinderlijk. Voor een ontwerp dat nog niet gepubliceerd is, is het een reden om het niet te doen.

PixelSpec is onze poging om die twee dingen om te draaien. Het antwoord staat bovenaan, in cijfers die je niet hoeft te zoeken, met een datum erbij waarop we het voor het laatst hebben gecontroleerd. En de resizer staat er direct naast, al ingesteld op dat formaat, werkend in het tabblad waar je toch al bent.

Deze site heeft een eigen design-systeem. Geen thema, geen component-bibliotheek, geen Tailwind. De dependencies van het project zijn next, react en react-dom, en de vormgeving zit in eigen CSS die we van de eerste variabele tot de laatste mediaquery zelf hebben geschreven. Dat is een keuze met een prijs: er is niemand anders die het onderhoud doet. Er staat tegenover dat we bij elke regel opmaak weten waarom hij er staat, en dat de pagina niets meelaadt wat we niet gebruiken.

De identiteit is een schoon wit vlak met een fel magenta accent (#db2777) en een uitgesproken numerieke typografie: cijfers krijgen een eigen monospace-stack, zodat 1080 x 1350 leest als een meting en niet als lopende tekst. Achter alles ligt een pixelraster van 28 bij 28 pixels, opgebouwd uit CSS-gradiënten. Dat raster is geen decoratie zonder reden. Het onderwerp van deze site is letterlijk de pixel, en de achtergrond zegt dat zonder er een woord aan vuil te maken. Er is een volwaardige donkere modus, waarin het magenta opschuift naar een zachtere roze (#f472b6) op een bijna zwarte aubergine (#120c14).

Het hart van het ontwerp is de SpecSheet: de kaart bovenaan de spec-pagina's die het antwoord meteen geeft. Platform, asset, de aanbevolen afmeting in groot, de verhouding, en rechtsboven een stempel met de verificatiedatum. Daaronder groeit de kaart mee met wat het platform werkelijk voorschrijft: heeft een asset een minimale breedte, een bestandslimiet of een safe zone, dan verschijnt dat blok, en anders blijft het weg. Dat scheelt de bezoeker een rij lege velden. Wie de pagina opent en meteen weer weggaat, heeft gekregen waarvoor hij kwam. Dat vinden we een geslaagd bezoek, geen verloren bezoek.

Alle inhoudelijke waarde van deze site zit in één bestand: lib/specs.data.mjs. Daarin staan 51 specs verdeeld over 18 platforms, van Instagram, YouTube en LinkedIn tot Twitch, Etsy, Eventbrite en Bluesky. Naast breedte en hoogte legt de dataset per spec de toegestane bestandstypen vast en een notitie over waar het beeld uiteindelijk getoond wordt. De strengere regels staan er alleen bij waar een platform ze echt stelt: alternatieve formaten bij negentien specs, een maximaal bestandsgewicht bij vijftien, een minimale breedte bij acht, een safe zone bij tweeëntwintig. Een veld invullen omdat de kolom bestaat is precies hoe de verouderde cijfers ontstaan waar deze site het antwoord op wil zijn.

We hebben dat bestand bewust als plat JavaScript geschreven en niet als TypeScript. De reden is architectonisch: zowel de site (via lib/specs.ts) als de API-generator (via scripts/gen-api.mjs) importeert hetzelfde bestand. Node leest het rechtstreeks, Next bundelt het. Wie een formaat wil bijwerken, bewerkt dat ene bestand en de rest van de site volgt, zonder dat er ergens een tweede lijst is die iemand vergeet. De typering en de hulpfuncties leven ernaast, in lib/specs.ts, dat een verhouding die niet met de hand is opgeschreven zelf uitrekent met een gcd-functie. Zo staat er bij een spec alleen een label als het afwijkt van de kale deling, en klopt de rest vanzelf.

De dataset is ook geen tabel met kale cijfers. Er staan 51 unieke inleidende teksten in en 153 praktische tips, aangevuld met handgeschreven FAQ-items op de specs waar echt terugkerende vragen over bestaan en een gedeelde FAQ die per spec wordt opgebouwd. Geen sjabloonzinnen met een ingevulde platformnaam. Dat is het saaie deel van dit soort werk, en het deel dat het verschil maakt tussen een pagina die één keer scoort en een pagina die blijft staan. De verificatiedatum van de specs zit als aparte constante in lib/site.ts, gescheiden van de datum waarop de informatieve pagina's zijn bijgewerkt, zodat de sitemap niet de hele site met dezelfde stempel voorziet.

De site is statisch. De pagina's worden bij de build vooraf gerenderd via generateStaticParams of zijn een vaste route. Geen eigen server, geen database, geen CMS: er staan geen route-handlers en geen server-acties in het project. Het spec-pad staat op dynamicParams = false, dus de 51 geldige combinaties van platform en asset bestaan en de rest geeft netjes een 404. Onder de motorkap draait Next.js 16 met de App Router, React 19 en TypeScript in strict-modus, maar wat de bezoeker daarvan merkt is simpelweg dat de pagina er is voordat hij erom vroeg.

De tools werken op dezelfde manier. De resizer is een React-component die een afbeelding in een canvas tekent, de 2D-context gebruikt om te schalen volgens cover of contain, en het resultaat via canvas.toBlob terugkoppelt als download. De kwaliteit is instelbaar, en de hercodering is gedebounced zodat typen in het breedteveld niet bij elke toetsaanslag het hele beeld opnieuw laat coderen. De afbeelding die je erin laadt verlaat het tabblad niet: er is geen upload en geen tijdelijke opslag. Naast de resizer staan drie zusjes: een compressor om bestandsgrootte terug te brengen, een verhoudingsberekening die alleen rekent, en een downloader voor YouTube-thumbnails. Die laatste is de enige van de vier die het netwerk op gaat, en dat kan ook niet anders, want hij haalt de thumbnail bij YouTube zelf op.

Die keuze levert drie dingen tegelijk op die normaal tegen elkaar in werken. Snelheid, omdat er niets te wachten valt. Privacy, omdat je beeld nergens langskomt waar het bewaard kan worden. En betrouwbaarheid, omdat er geen dienst is die kan uitvallen. Het punt waar de site zelf iets verstuurt is het contactformulier, dat naar een extern endpoint post, en dat is wat een bezoeker op een contactpagina verwacht. Het is ook waarom er geen AI-features in zitten, wat een expliciete huisregel in de README is. Een resizer die je afbeelding naar een model stuurt zou de belangrijkste eigenschap van deze site kapotmaken.

Uit die ene dataset komen 84 statische pagina's: 51 spec-pagina's, 18 platform-hubs en vijftien informatieve en gereedschapspagina's. Ze dragen hun eigen titel, beschrijving, canonical en JSON-LD-graaf met WebApplication, FAQPage en BreadcrumbList, en ook dat komt uit de data in plaats van uit handwerk per pagina. Dat is niet alleen netter, het is de enige manier waarop dit vol te houden is: een platform dat morgen zijn bannerformaat wijzigt, mag geen aanleiding zijn om acht plekken langs te lopen. De embed-widgets zijn hier bewust de uitzondering, om een reden die verderop staat.

Daarbovenop genereren we 54 OG-afbeeldingen van 1200 bij 630 via next/og. Op de 51 spec-varianten worden de platformnaam, de afmetingen en de verhouding als beeld gerenderd, zodat wie een spec-pagina deelt het antwoord al in de preview meestuurt. De andere drie horen bij de homepage, de cheat sheet en de thumbnail-tool en tonen hun eigen boodschap. De overige pagina's vallen terug op de OG-afbeelding van de root, die een helper in lib/site.ts aanwezig houdt omdat Next het openGraph-object van de layout vervangt in plaats van samenvoegt. Zo'n detail kost een middag en is daarna nooit meer zichtbaar, behalve wanneer het ontbreekt.

Rond die kern liggen drie distributielagen. De cheat sheet zet alle specs in één tabel met een kopieerknop, als natuurlijk verwijsdoel. De gratis API bestaat uit 70 statische JSON-bestanden in public/api, gegenereerd voor elke build, zonder sleutel en zonder limiet, met een licentietekst die om een link vraagt in plaats van om geld. En er zijn 51 insluitbare widgets op /embed/w/, elk een resizer voorgeladen op één formaat, op noindex met follow zodat ze de site niet met zichzelf laten concurreren maar wel meetellen. Voor taalmodellen ligt er een llms.txt met de belangrijkste ingangen. Dat alles zou papieren theorie zijn zonder controle, dus schreven we twee eigen controlescripts. crawl.mjs bouwt de canonieke routeverzameling uit de data en zoekt weespagina's en kapotte interne links; check-schema.mjs opent de gegenereerde HTML, parseert de JSON-LD-blokken en valideert de vereiste velden per type. Allebei lezen ze de build-output, dus we draaien ze met de hand na een build. Alleen gen-api.mjs hangt als prebuild automatisch aan next build, zodat de API meebeweegt met de site. Die twee controles aan een pipeline hangen die een falende build ook echt tegenhoudt is de volgende stap, en eerlijk gezegd de belangrijkste die nog open staat.

PixelSpec is op 2 juli 2026 begonnen en staat op pixelspec.net. Het is een van de organische tool-sites die we in eigen beheer bouwen en onderhouden. Geen opdracht, geen briefing, geen budget dat ergens goedgekeurd moest worden. Dat maakt het een eerlijker portfoliostuk dan veel ander werk, omdat er niemand was om de moeilijke keuzes op af te schuiven. Er zat geen marketingafdeling die vroeg om een pop-up, en ook niemand die zei dat een eigen design-systeem te duur was.

De site is opgezet om te groeien zonder te verwateren. Een nieuw platform of een nieuwe asset is een toevoeging aan één bestand, waarna de pagina, de hub, de sitemap, de JSON-LD, de OG-afbeelding, de API-endpoints en de embed-widget vanzelf ontstaan. De advertentieruimte die er ooit kan komen is al voorbereid als component die niets rendert tot hij aanstaat, en dan met een vaste hoogte zodat er geen layoutverschuiving optreedt. Dat is een klein detail, maar het is het soort detail waarop een site die verder veel goed doet alsnog punten verliest.

Wat het voor een opdrachtgever laat zien is vooral dat deze onderdelen bij ons uit één hand komen. De positionering, het merk, de interface, de code en de vindbaarheid zijn hier niet vijf leveranciers die elkaar per e-mail bestanden sturen, maar vijf aspecten van dezelfde beslissing. Dat het antwoord bovenaan staat is tegelijk een merkkeuze, een ontwerpkeuze, een technische keuze en de reden dat de pagina gevonden wordt. Zo werken we ook aan het werk van anderen.