← Blog
5 min leestijd

Waarom je foto na het uploaden zijwaarts staat

Foto rechtop op je telefoon, zijwaarts in het uploadformulier? Wat de Exif-oriëntatievlag doet, hoe je gedraaide pixels van een tag onderscheidt.

  • exif orientation
  • photo rotation
  • product photography
  • image upload
  • jpeg
  • webp
  • marketplace listings
  • file metadata
Waarom je foto na het uploaden zijwaarts staat

Je fotografeert een product met je telefoon, draait het toestel, tikt op de ontspanner. Op het scherm staat hij rechtop. In het uploadformulier van de marktplaats komt hij op zijn kant aan — hetzelfde bestand, een kwartslag verkeerd.

Er is niets kapot aan je telefoon. Het beeld ligt heel goed mogelijk echt zijwaarts binnen in het bestand, en dat is al zo sinds je de foto maakte. Je telefoon toont hem je hoe dan ook rechtop. Het uploadformulier deed dat niet.

Je bestand verkeert in een van twee staten, en ze uit elkaar houden kost één controle.

De camera slaat het beeld op zoals de sensor het zag

Een beeldsensor is een vaste rechthoek die aan de telefoon vastzit; hij draait niet mee als jij draait. Maak een staande foto en hij legt nog steeds een liggend kader vast, met je onderwerp op zijn kant daarbinnen.

Close-up van een camerabody zonder objectief, met de open metalen objectiefvatting die breder is dan hoog

Veel camera's vermijden het herschrijven van miljoenen pixels en zetten in plaats daarvan een klein getal in de metadata dat betekent: "draai dit een kwartslag voordat je het toont". Andere draaien de pixels bij het opslaan en markeren het bestand als al rechtop — en daarom gedragen twee telefoons zich verschillend bij dezelfde opname. In een JPEG is dat getal Exif-tag 274, Orientation, en hij kan behalve draaiingen ook gespiegelde kaders beschrijven.

Sommige programma's respecteren de vlag, andere negeren hem

Moderne browsers lezen hem wél. De CSS-eigenschap image-orientation heeft from-image als initiële waarde; MDN zegt het onomwonden: "De EXIF-informatie in de afbeelding wordt gebruikt om de afbeelding passend te draaien." Dat werkt sinds april 2020 in alle browsers.

Alles wat geen browser is, kan de tag nog altijd negeren. De webstandaarden zijn het erover eens geworden dat de tag gerespecteerd moet worden, maar een hoop decoders aan de serverkant, miniatuurgeneratoren en beeldbibliotheken zijn geschreven vóór die convergentie en kijken helemaal nooit naar de tag — en niets verplicht ze daartoe.

De vraag is dus nooit "staat mijn foto zijwaarts", maar "heeft het ding dat hem toont de vlag gelezen". Je galerij doet dat. De miniatuurgenerator van een marktplaats misschien niet.

Draaien in je galerij herschrijft misschien alleen de vlag

Tik op de draaiknop en het resultaat hangt af van de app. Er kunnen twee heel verschillende dingen gebeuren.

Een hand die buiten een smartphone vasthoudt, met op het scherm een fotogalerij-app vol foto's

  • De app verandert de oriëntatiewaarde en laat de pixelgegevens ongemoeid. Meteen klaar, verliesvrij, onzichtbaar voor alles wat de vlag negeert: je foto staat nog steeds zijwaarts in het bestand.
  • De app hercodeert: hij decodeert de pixels, draait ze en schrijft een nieuw bestand weg met de vlag teruggezet. De draaiing is ingebakken en overleeft overal. Voor een PNG of een verliesvrije WebP kost dat niets; voor een JPEG kost het meestal één hercodeergeneratie — die het waard is om één keer te betalen en niet waard om te herhalen.

Welke route een app kiest, kun je niet aan de knop zien, en het is tussen versies van dezelfde app veranderd. Ga van niets uit; controleer het resultaat.

Erger is een tool die de pixels draait maar de oude metadata onveranderd meekopieert: de vlag zegt nog steeds "draaien", de pixels zijn dat al, en programma's die de vlag respecteren draaien de foto twee keer.

Zo bepaal je in welke staat je bestand verkeert

Je lost dit niet op door beter te kijken, alleen door iets te controleren dat geen voorbeeldweergave is.

Handen met een smartphone vol foto's, omhooggehouden voor een open laptop waarvan het scherm dezelfde soort fotogalerij in een browser toont

  • Vergelijk de vorm met de getallen. Meldt een foto die staand oogt in de bestandseigenschappen dat hij breder is dan hoog, dan zijn de pixels liggend en doet een vlag het werk. Sommige viewers corrigeren die getallen ook, dus een verschil bewijst meer dan een overeenkomst.
  • Lees de vlag zelf. Browsers, desktopviewers en de miniaturen van je bestandsbeheer respecteren de tag inmiddels vrijwel allemaal, dus dat ze het onderling eens zijn bewijst niets. Werk op een kopie, nooit op het origineel, en open die in een Exif-viewer om Orientation rechtstreeks te lezen. Alles anders dan 1, vaak getoond als "Normal", betekent dat een vlag het werk doet en de pixels niet rechtop staan.

Regel de oriëntatie voordat iets anders het bestand aanraakt

remover.bg accepteert PNG, JPEG en WebP tot 25 MB en geeft een nieuw bestand terug waarin de achtergrond weg is. Het is een achtergrondverwijderaar, geen fotobewerker: draaien hoort thuis in de fotobewerker van je telefoon of in je designtool, voordat je uploadt.

Die volgorde doet ertoe, omdat je een nieuw bestand aanmaakt. PNG en de WebP-container hebben allebei ergens plek voor Exif — Googles WebP-specificatie staat metadata toe "in 'EXIF' or 'XMP ' Chunks" — maar of de bewerker waarin je draaide daar iets van in zijn export wegschrijft, is de beslissing van die bewerker, niet die van jou. Bak de draaiing in de pixels, dan blijft er geen vlag over om kwijt te raken. Onze notities over WebP rechtstreeks exporteren behandelen dat formaat.

Een werkbare volgorde:

  1. Draai in een bewerker en exporteer een kopie, in plaats van in de galerij op draaien te tikken.
  2. Controleer de waarde van Orientation op die geëxporteerde kopie.
  3. Upload hem voor achtergrondverwijdering.
  4. Zet het vrijstaande beeld op een effen kleur of je eigen foto, met een slagschaduw als het op een oppervlak moet rusten.

Teams die volume door de HTTP-API duwen voor achtergrondverwijdering in batch doen er goed aan de oriëntatie eerst in de pipeline te normaliseren: één zijwaartse bron wordt één zijwaarts vrijstaand beeld, duizend keer achter elkaar. Oriëntatie valt buiten de achtergrondregels in onze gids voor Amazon-productafbeeldingen, maar een zijwaartse listing oogt slordig, hoeveel je verder ook goed hebt gedaan.

De gewoonte die het aanleren waard is

Vertrouw het bestand, niet de voorbeeldweergave. Draai via een export en lees Orientation één keer op de kopie; dan staat de foto rechtop in een browser, in een miniatuurgenerator en in de wachtrij van een drukker.

Lees verder