Scroll op een recente iPhone of MacBook door je LinkedIn timeline en je ziet het misschien voorbij komen: een bedrijfslogo of profielfoto waarvan het wit feller is dan het wit van de pagina eromheen. Feller dan het "maximale" wit van je scherm. Het lijkt wel alsof dit logo echt licht geeft!
Dat is geen designtruc. Het is HDR, High Dynamic Range, dezelfde techniek als achter HDR-video op Netflix en de foto's die je telefoon maakt, toegepast op een stilstaand logobestand. Een HDR-scherm kan kleine vlakken op wel 1.000 nits tonen. Browsers als Chrome en Safari tonen dat ook echt, ook op een pagina die verder nergens HDR is. Daarom lijkt een HDR-logo op LinkedIn zich niets aan te trekken van je helderheidsinstellingen.
Wij wilden ons AdamoDigi logo natuurlijk ook zo tonen op LinkedIn. Wat we ontdekten: de voor de hand liggende manier, de manier waar de HDR-tools van Photoshop je naartoe leiden, overleeft de uploadverwerking van LinkedIn niet. De methode die wél werkt is een andere, en die vonden we eigenlijk nergens anders. Dus hebben we een live oplichtend logo byte voor byte gereverse-engineerd en delen we graag de volledige handleiding met je.
Het resultaat zie je op onze LinkedIn-pagina en op die van onze klant Mahala.ai. Open een van de twee op een HDR-scherm (elke recente iPhone, iPad of MacBook, of een goede OLED-telefoon) en je ziet het wit in het logo duidelijk boven het wit van de interface uitkomen.
Het jargon uitgelegd
- SDR en HDR. Standard Dynamic Range is wat je gewend bent: pixelwaarden die lopen van zwart tot een vaste witwaarde. High Dynamic Range rekt die bovenkant op, zodat een afbeelding ook helderheid kan beschrijven die ver boven normaal wit ligt.
- Nits. Hiermee meet je lichtsterkte. Normaal wit op een SDR-scherm ligt rond de 203 nits, het zogeheten graphics white uit de norm ITU BT.2408. Een modern HDR-scherm haalt op de lichtste plekken 1.000 tot 2.000 nits.
- Gain map. De benadering van HDR-foto's door Adobe en Google (Google noemt het Ultra HDR, gestandaardiseerd als ISO 21496-1). In het bestand zit een normale SDR-afbeelding plus een tweede, verborgen zwart-witafbeelding die HDR-schermen vertelt hoeveel ze elk gebied mogen opvoeren. Dit is het formaat dat Photoshop en Camera Raw exporteren.
- PQ. Voluit Perceptual Quantizer, de curve uit de norm SMPTE ST 2084 die ook HDR10-video gebruikt. PQ legt helderheid niet vast ten opzichte van het wit van jouw scherm, maar in absolute nits, tot 10.000 toe.
- ICC-profiel. Een klein blokje informatie in een afbeelding dat software vertelt hoe het de kleuren moet lezen. Dit onderdeel blijkt straks het belangrijkste van het verhaal.
Stap 1: het logo klaarzetten in Photoshop
- Open je logo in Photoshop.
- Maak een vierkant canvas: Afbeelding > Canvasgrootte, breedte en hoogte gelijk. LinkedIn adviseert 400 bij 400 pixels voor een bedrijfslogo, maar elk vierkant formaat werkt, want LinkedIn schaalt het vanzelf naar het juiste formaat.
- Zet je logo op een achtergrond zonder transparantie en voeg alle lagen samen: Laag > Eén laag maken. Het effect heeft een JPEG nodig, en dat formaat kan geen transparantie aan. Een effen achtergrond werkt het beste, want een verloop conflicteert met de gloed.
- Zorg dat de delen die moeten oplichten echt wit zijn, of bijna wit. Controleer het met de pipet: je wilt waarden rond RGB 255, 255, 255. Alleen het bijna-witte bereik wordt opgevoerd, dus gebroken wit en grijstinten lichten minder op.
- Sla dit op als je master in SDR (Bestand > Een kopie opslaan, JPEG of PNG, maximale kwaliteit).
Stap 2: de HDR-export uit Photoshop die iedereen als eerste probeert (en waarom we hem toch laten zien)
Camera Raw in Photoshop kan echt met HDR omgaan. Dit is dus de route die je logischerwijs neemt, en daarom laten we hem eerst zien:
- Open je platgeslagen logo in Camera Raw. Dat kan via Bridge, of via Bestand > Openen als je in de Camera Raw-voorkeuren hebt aangegeven dat JPEG- en TIFF-bestanden daarin geopend moeten worden.
- Zet HDR-bewerking aan met de HDR-knop onderin het deelvenster Standaard. Wil je dat Camera Raw dat voortaan automatisch doet, ga dan naar Voorkeuren voor Camera Raw > Raw-standaardinstellingen en zet "HDR-bewerking standaard inschakelen voor HDR-foto's" aan.
- Verhoog de belichting van de witte delen tot in het uitgebreide bereik. Ongeveer +2 stops geeft een mooie gloed; elke stop erbij verdubbelt de helderheid.
- Klik op Opslaan en kies JPEG. Zet onder Kleurruimte het vinkje HDR-uitvoer aan, kies Display P3 en zet de kwaliteit tussen 90 en 100.
Wat je nu hebt is een HDR-JPEG met gain map. Open hem op een HDR-scherm in Finder of Voorvertoning en hij gloeit precies zoals je verwacht. Zelfs de preview die LinkedIn tijdens het uploaden laat zien gloeit. Maar dan, wanneer je hem opgeslagen hebt en LinkedIn de afbeelding heeft verwerkt, is de gloed verdwenen.
Stap 3: waarom je HDR-logo zijn gloed verliest na het uploaden
Wat ging hier nu mis? Het kostte ons even tijd om dat uit te vinden. De export was namelijk elke keer goed. Dus hebben we het omgedraaid: we haalden een logo dat op LinkedIn wél oplicht rechtstreeks van hun CDN en legden dat met ExifTool naast onze eigen export.
In ons bestand zat de HDR-informatie op twee plekken. De eerste was een tweede, verborgen afbeelding in het bestand, opgeslagen als MPF (Multi-Picture Format); dat is de gain map zelf. De tweede was een stukje XMP-metadata, de hdrgm-namespace, dat beschrijft hoe een scherm die gain map moet toepassen.
LinkedIn codeert elk logo dat je uploadt opnieuw. Daarbij gooit het MPF-segmenten en XMP-metadata weg. De gain map komt er dus niet doorheen, en daar gaat het mis.
Het oplichtende logo dat de molen van LinkedIn al door was, zat compleet anders in elkaar: een gewone progressieve JPEG, één laag, 8 bits. Geen gain map, geen XMP. De HDR zat op precies één plek: in een ingebed ICC-profiel met de naam "Rec2020 Gamut with PQ Transfer".
Dat profiel vertelt de browser dat hij de pixelwaarden moet lezen volgens de PQ-curve, in het kleurbereik Rec. 2020. De pixels zelf zijn ook zo opgeslagen. Wit betekent daardoor niet meer "zo licht als jouw scherm kan", maar een vast aantal nits: 800, 1.500, soms 3.000. En omdat een ICC-profiel juist het onderdeel is dat LinkedIn bij het hercoderen laat staan, blijft de gloed intact.
Kort gezegd: LinkedIn gooit HDR-metadata weg, maar laat kleurbeheer met rust. Je moet de HDR dus meesmokkelen in het kleurbeheer.
Stap 4: het HDR-formaat dat LinkedIn wel doorlaat
De laatste stap is een omzetting van kleurruimte die je in geen enkel exportvenster van Photoshop vindt. Je neemt het SDR-logo, maakt alleen de bijna-witte delen ongeveer +2 stops lichter, zet de pixels om van hun eigen kleurbereik (sRGB of Display P3) naar Rec. 2020, slaat ze op volgens de PQ-curve met vaste lichtwaarden (de achtergrond op normale helderheid, het wit op ongeveer 800 nits) en bewaart het geheel als progressieve JPEG met het Rec2020 PQ ICC-profiel erin.
Met de hand is dat een pagina vol rekenwerk. Dus hebben we het geautomatiseerd.
We hebben de hele omzetting verpakt in een gratis Claude-skill: linkedin-hdr-logo. Gebruik je Claude, in de desktop-app met Cowork of in Claude Code, dan zet je het skill-bestand erin, geef je je vierkante logo uit stap 1 mee en zeg je: laat de witten gloeien voor LinkedIn. Claude doet de omzetting en geeft je de JPEG terug. Standaard staat de boost op +2 stops. Vraag om +3 als je de stevigere gloed wilt die je bijvoorbeeld bij Metaview ziet, en houd +3,9 (ongeveer 3.000 nits) aan als bovengrens; daarboven ziet het uitgevreten uit.
Download de skill gratis op onze GitHub: github.com/Adamodigi/linkedin-hdr-logo
Hoe sterk je het effect laat zijn is natuurlijk een kwestie van smaak. Wij vinden het mooi als het subtiel is, dus hebben we gekozen voor +2. Maar je kunt dit zelf bepalen. Op een scherm zonder HDR ziet je logo er trouwens gewoon normaal uit. Niemand ziet dat er een effect in zit.
Stap 5: controleren en uploaden
- Open de omgezette JPEG op een HDR-scherm, in Voorvertoning of Finder. Het wit hoort duidelijk lichter te zijn dan het venster eromheen. Op Windows zie je hetzelfde in Chrome of Edge met HDR aan.
- Sla het bestand hierna niet meer op in een ander programma. Bij het opslaan gaat het ICC-profiel er vaak uit, en daarmee verdwijnt het hele effect.
- Upload het als bedrijfslogo op LinkedIn, gewoon zoals je dat altijd doet.
- Bekijk je pagina op een HDR-apparaat. Je logo licht nu op, en dat blijft zo.
Veelgestelde vragen
Waarom lijken sommige logo's op LinkedIn lichter dan mijn scherm aankan?
Dat zijn HDR-afbeeldingen. In het bestand staat dat het wit lichter weergegeven moet worden dan het gewone wit van de interface, en een HDR-scherm doet dat gewoon. De rest van de pagina blijft op normale helderheid, en daardoor lijkt het logo licht te geven.
Werkt dit ook bij een profielfoto op LinkedIn?
Het principe is hetzelfde: de HDR moet in het ICC-profiel zitten en niet in een gain map. Wij hebben het alleen getest op bedrijfslogo's, dus test je profielfoto op dezelfde manier. Upload hem en bekijk daarna het resultaat op een HDR-apparaat.
Waarom verliest mijn HDR-logo zijn gloed na het uploaden naar LinkedIn?
Omdat je waarschijnlijk een HDR-JPEG met gain map hebt geëxporteerd via Photoshop en Camera Raw. LinkedIn gooit die gain map en de bijbehorende XMP-metadata weg bij het hercoderen. Zet het bestand om zodat de HDR in een Rec2020 PQ ICC-profiel zit, zoals hierboven beschreven, en de gloed blijft staan.
Heb ik speciale software nodig?
Je hebt een beeldbewerker nodig om een vierkant logo zonder lagen te maken, bijvoorbeeld Photoshop, en daarna de omzetting naar PQ. Die omzetting kun je in geen enkel exportvenster aanzetten, en dat is precies wat onze gratis Claude skill voor je doet.
Wie ziet de gloed?
Iedereen met een HDR-scherm: recente iPhones, iPads, MacBooks en de betere Android-telefoons. Alle anderen zien een normaal logo, precies zoals het hoort. Er is dus geen scherm waarop dit misgaat.
AdamoDigi is een creatief digital agency. Wij bouwen merken die opvallen, soms letterlijk. Volg ons op LinkedIn.
