Facebook-foto’s Maattabel | Nieuwe lay-out voor Facebook

Medio 2020 begon Facebook met het uitrollen van een nieuwe desktoplay-out voor zijn site. Het is schoner, met meer witruimte en brengt het dichter bij de mobiele versie. Maar het is ook heel anders. Dus dit is een herziene versie van mijn onofficiële Facebook-gids voor afbeeldingsgrootte om rekening te houden met de nieuwste lay-out, die ze New Facebook noemen (de oude versie heet Classic Facebook) .1

Aanvankelijk was dit nieuwe layout is een opt-in update, en je kunt vanuit New Facebook terugschakelen naar de klassieke Facebook-layout. Maar het zal uiteindelijk voor iedereen uitrollen. Als je nog steeds de oude lay-out gebruikt (of Classic Facebook, zoals ze het noemen), kun je de vorige versie van de Facebook-maattabel hier vinden.

Tijdens de uitrol zien sommige gebruikers uw pagina met de nieuwe lay-out en sommige met de oude lay-out. Maar als u nieuwe inhoud uploadt, is het waarschijnlijk logischer om deze te optimaliseren voor de nieuwe lay-out.

Afbeeldingen zijn een belangrijk onderdeel van het gebruik van Facebook, maar als u op deze pagina hebt u ongetwijfeld zelf ontdekt dat het niet zo eenvoudig is om uit te zoeken welke afbeeldingsformaten u op Facebook kunt gebruiken. Het vereist wat ruzie om de gewenste resultaten te krijgen. Elk type afbeelding op een pagina, profiel en tijdlijn hebben hun eigen grootte en eigenaardigheden. En Facebook is er nooit zo goed in geweest om zijn helppagina’s gemakkelijk vindbaar te maken.

Dingen nog frustrerender houden is de op Facebook verandert dingen van tijd tot tijd, meestal zonder enige waarschuwing. Soms is het een kleine, incrementele aanpassing. Soms is het een hele herziening (zoals wanneer tijdlijnen werden geïntroduceerd en opnieuw wanneer ze werden gewijzigd van twee kolommen in één kolom). Dus het is altijd een beetje een bewegend doelwit. En er lijkt altijd een nieuw systeem om de hoek te zijn.

Dus of je nu Facebook-pagina’s gebruikt voor socialemediamarketing of gewoon foto’s probeert te plaatsen voor vrienden en familie, hier is mijn 2020-versie van de onofficiële gids voor de grootte van Facebook-foto’s op de verschillende delen van de site.

Dit is een eerste poging om de weergaveformaten te deconstrueren terwijl de update wordt uitgerold. Ik zal proberen het bij te werken, aangezien sommige specificaties duidelijker worden. Als je ander weergavegedrag tegenkomt, laat het me dan weten zodat ik het kan onderzoeken en indien nodig kan updaten.

Formaat Facebook-omslagfoto

Aanbeveling: gebruik een afbeelding die ten minste 940 pixels breed is bij 352 pixels hoog. Maar als je een betere kwaliteit wilt, gebruik dan een afbeelding van minimaal 1800 bij 704 pixels.

De Facebook-omslagfoto is de grote panoramische afbeeldingsruimte bovenaan de tijdlijn. Het wordt ook wel de bannerafbeelding of de headerfoto genoemd.

De weergave is responsief. Anders gezegd, de grootte waarop het wordt weergegeven, is afhankelijk van de grootte van het browservenster of apparaatscherm. U kunt dit effect zien als u de grootte van uw browservenster wijzigt terwijl u de pagina bekijkt.

Met de vorige lay-out was het een beetje ingewikkeld om uit te zoeken wat er correct zou worden weergegeven in de Facebook-omslagfoto, omdat niet elk deel van de afbeelding zou in alle formaten worden weergegeven. Er waren veilige zones en strips die werden bijgesneden op het bureaublad.

De nieuwe versie heeft dingen vereenvoudigd. De hele afbeelding wordt op een veel eenvoudigere manier weergegeven en vergroot of verkleind.

Dat gezegd hebbende, er zijn een aantal dingen om op te letten.

Ten eerste zijn ze teruggegaan naar een smalle band van gegradueerde arcering aan de onderkant. Het is een overlay, wat betekent dat het in een laag bovenop je afbeelding zit. U wilt dus geen belangrijke tekst of detail in die onderste strook opnemen.

Ten tweede neemt het de kleur van de buitenste pixels uit de afbeelding en gebruikt deze om een gearceerd kleurgedeelte op de blanco te creëren sectie achter de afbeelding. Hier is een voorbeeld van wat ik bedoel, waarbij het rood van de buitenrand van de afbeelding wordt genomen en toegepast op het witte gedeelte erachter. (Ik heb de profielfoto hier uitgesneden om dingen te vereenvoudigen.) Merken met een specifiek kleurenpalet zullen bijzondere aandacht willen besteden aan het opnemen van de gewenste kleuren aan de uiterste rand van de afbeelding.

Ten derde, de onderste hoeken worden enigszins afgerond (of randradius, om technisch te zijn). Het is echter niet erg agressief, dus het is onwaarschijnlijk dat het voor veel gebruikers problemen veroorzaakt.Maar als u een streeplijn rond uw afbeelding of een ander gedetailleerd kader gebruikt, kan dit problemen veroorzaken. Het wordt automatisch toegepast en er is geen manier om het uit te schakelen.

Ten vierde is de profielfoto nu weer over de omslagfoto heen. Hoewel het in deze versie slechts subtiel is, en alleen een strookje de omslagfoto verduistert.

Je Facebook-omslagfoto wijzigen

Als je net een nieuw Facebook-profiel of -pagina hebt aangemaakt en heb je nog geen omslagfoto, klik dan op de knop “Een omslag toevoegen” bovenaan de pagina waar de omslagfoto naartoe gaat.

Zodra je je foto hebt toegevoegd, kun je deze vervangen Als u bent aangemeld bij uw account en uw pagina bekijkt, klikt u rechtsonder op de Edit -knop.

Als u daarop klikt, wordt een vervolgkeuzelijst geopend -downmenu waaruit u de bron voor de nieuwe foto kunt kiezen. Dit is ook hetzelfde menu dat u kunt gebruiken als u een bestaande foto wilt verwijderen of verplaatsen of een video-omslag of diavoorstellingomslag wilt gebruiken.

Omslag Fototypes: enkele afbeeldingen

In termen van soorten afbeeldingen zijn panorama’s ideaal. Eenvoudige uitsnijdingen werken ook, hoewel de effectiviteit uiteraard zal variëren op basis van de afbeelding. En niets houdt u tegen om samen te stellen mult plaats foto’s in een collage in uw beeldbewerkingssoftware, sla het op als een enkel afbeeldingsbestand en upload dat. Zoals deze, bijvoorbeeld:

Omslagdiavoorstellingen: meerdere afbeeldingen

Tot voor kort was het slechts mogelijk om één foto te kiezen als uw statische omslagfoto. Maar er is een nieuwe functie toegevoegd: diavoorstellingen. U kunt nu maximaal 5 foto’s selecteren die roteren. Toegang tot deze functie via hetzelfde menu waarmee je de omslagfoto kunt toevoegen of wijzigen (dwz het camerapictogram linksboven in het omslagafbeeldingsgedeelte).

Wanneer je een diavoorstelling maakt, krijg je de optie om maximaal 5 afbeeldingen te selecteren die zullen worden gebruikt. Gebruik de filmstrip bovenaan om de afbeeldingen te kiezen uit bestaande afbeeldingen of om nieuwe te uploaden. U kunt vervolgens op de miniatuur klikken en een voorbeeld krijgen van hoe deze eruit zal zien in de grotere ruimte onder de miniaturen. U kunt in dat gedeelte klikken en slepen om de afbeelding in de viewport te verplaatsen.

U kunt ook een dynamisch gegenereerde versie hebben waarmee Facebook de foto’s kan kiezen op basis van wat goed presteert en op basis van de activiteit op uw pagina . U kunt deze functie in- of uitschakelen met de schakelaar rechtsboven in het bewerkingsscherm van de diavoorstelling.

Als u de omslag van de diavoorstelling gebruikt, kunnen uw bezoekers door de diavoorstelling navigeren met behulp van de pijlen aan elke kant (de vorige lay-out had positie-indicatoren onderaan, maar ze zijn verdwenen in de nieuwe versie).

Er zijn een paar dingen die ik vreemd vind aan de manier waarop de diavoorstellingen momenteel aan bezoekers worden getoond. De eerste is dat de diavoorstelling niet automatisch vooruitgaat. Om dus meer dan één afbeelding in de diavoorstelling te zien, moeten uw bezoekers weten dat ze handmatig door moeten gaan met de pijltjestoetsen aan de zijkant van de afbeelding. Ik vermoed dat slechts een heel klein percentage dat zal doen. Het tweede ding is dat als je de optie voor het kiezen van de afbeeldingen door Facebook uitschakelt, de afbeeldingen elke keer in dezelfde volgorde worden weergegeven in plaats van willekeurig. Het resultaat van beide dingen is dat, althans in de huidige implementatie, de overgrote meerderheid van de bezoekers van uw pagina waarschijnlijk alleen de eerste afbeelding te zien krijgt. De derde eigenaardigheid – althans voor mij – is om rekening te houden met de nieuwe gearceerde kleuraccentuering in het achtergrondgedeelte. Omdat die is afgeleid van de weergegeven profielafbeelding, verandert deze samen met de profielafbeelding. Dat is niet per se een slechte zaak, maar het is de moeite waard om te weten.

Covervideo’s

Je kunt nu ook videobestanden gebruiken voor je bannergedeelte. Ze moeten tussen de 20 en 90 seconden lang zijn en minimaal 820 bij 312 pixels meten. De aanbevolen grootte is 820 x 462.

Als je hiervoor een videoclip opneemt met een camera waarmee je de videoresolutie kunt kiezen, is de 720p-modus een goede plek om te beginnen, want die meet 1280 door 720, die comfortabel genoeg resolutie heeft.

Ik heb een meer gedetailleerde gids over Facebook-video-covers afzonderlijk.

Facebook-profielfoto

Ik heb een meer gedetailleerd bericht op Facebook-profielfoto afzonderlijk, maar hier is de essentie.

Weergavetype	Afmetingen
Desktop / laptop webbrowser	132 pixels
Smartphones	128 pixels
Feature-telefoons	36 pixels

De Facebook-profielfoto staat nu onderaan links van de omslagfoto, enigszins overlappend met de onderkant van de omslagfoto. Het is iets verkleind ten opzichte van de vorige versies, tot een cirkel met een diameter van 132 pixels.

Er zit een dunne witte lijn omheen die automatisch wordt toegepast. Je kunt dat niet verwijderen of controleren.

Het goede nieuws is dat je geen circulaire hoeft te uploaden beeld, iets dat een beetje lastig zou zijn om te creëren. In plaats daarvan kunt u elke normale rechthoekige of vierkante afbeelding uploaden. Welke vorm de afbeelding u ook uploadt, deze wordt bij het weergeven in een cirkel bijgesneden.

Weergaveformaten Facebook-profielfoto’s

Desktop- / laptopwebbrowser. In een normale paginaweergave, zoals wanneer iemand uw profiel bekijkt, wordt dit in de webbrowser van een desktop weergegeven als een cirkel met een diameter van 132 pixels.

Telefoons. De grootte van de profielfoto op mobiele telefoons verschilt per type telefoon. Op moderne smartphones wordt het weergegeven als een cirkel met een diameter van 128 pixels. Op oudere telefoons wordt het weergegeven met een diameter van 36 pixels.

Wanneer je een foto selecteert om een profielfoto toe te voegen, krijg je de mogelijkheid om het focusgebied te verplaatsen (ervan uitgaande dat het niet vierkant is) en in- en uitzoomen (zolang deze de minimale resolutie overschrijdt).

De profielafbeelding die naast je naam verschijnt bij opmerkingen en berichten in de tijdlijn is dezelfde afbeelding en is nog steeds een cirkel, maar het is automatisch verkleind tot een diameter van 40 pixels.

Vereiste grootte voor Facebook-profielfoto

Omdat het zo klein wordt weergegeven, is het onwaarschijnlijk dat je een probleem tegenkomt met de afbeeldingsformaten. Zolang je afbeelding ten minste 132 pixels op zijn kortste formaat heeft (wat vrij klein is), zou je klaar moeten zijn om te gaan.

Thumbnails voor gedeelde links

De miniaturen voor gedeelde links worden weergegeven in een webbrowser met een breedte van 500 pixels en een hoogte van 261 pixels.

Een tijdje was het mogelijk om een andere gedeelde linkafbeelding te kiezen, maar die functie is verwijderd. Voorlopig is er in ieder geval een oplossing als je de links deelt met een beheerservice voor sociale media zoals Buffer, maar je kunt geen andere afbeelding kiezen om te gebruiken vanuit Facebook.

Als u links vanaf uw eigen site deelt, is het mogelijk om aan te geven welke afbeelding u als miniatuurafbeelding wilt gebruiken, maar dat is iets dat u op uw site moet instellen en valt buiten het bestek van dit bericht. Maar als u op zoek bent naar welke termen Google hierover moet kennen, probeert u de eigenschap ‘og: image’ in de Open Graph-metadata van de pagina in te stellen. Hier is de documentatie van Facebook en als u een CMS zoals WordPress voor uw site zijn er plug-ins die het voor u kunnen afhandelen.

Wat u nog steeds kunt doen, is meer thumbnails toevoegen naast het origineel (niet aanwezig). Wanneer u een link gaat delen , gebruik het onderste gedeelte van de pop-up om meer afbeeldingen toe te voegen. Maar je kunt de originele afbeelding niet meer deselecteren zoals vroeger.

Foto’s op de tijdlijn

De grootte en lay-outs van miniaturen op de tijdlijn variëren afhankelijk van het aantal afbeeldingen dat u in hetzelfde bericht deelt en de oriëntatie van specifieke afbeeldingen.

Hier ziet u hoe verschillende combinaties worden weergegeven. Alle afbeeldingen krijgen een 1 pixel wit lijn langs de rand.

Enkele foto op de tijdlijn

Wanneer u een afbeelding uploadt naar de tijdlijn, wordt automatisch een miniatuur gegenereerd om binnen een doos die 500px breed en maximaal 750px hoog is. Dus als je de maximale beschikbare ruimte wilt gebruiken, upload dan een afbeelding in staande richting (verticaal) in de verhouding 3: 2. Dit is een voorbeeld van het gebruik van de maximaal beschikbare ruimte:

Als u een liggende (horizontale) afbeelding uploadt, wordt deze geschaald tot 500 px breed en behoudt deze zijn vorm. Het volledige gebied van de afbeelding wordt weergegeven zonder dat de afbeelding wordt bijgesneden.

Dit is een andere rechthoek in liggende stand, maar heeft een veel smallere beeldverhouding, zoals een banner of panorama. De breedte is weer 500px en de afbeelding wordt geschaald zodat het volledige afbeeldingsgebied wordt weergegeven.

Als u dezelfde afbeelding 90 graden gedraaid uploadt, zodat deze hoog is in plaats van breed, wordt deze maximaal bijgesneden. beschikbaar gebied van 500px bij 750px.

En als je een vierkant uploadt, wordt de hele afbeelding weergegeven met een breedte van 500px.

Meerdere afbeeldingen tegelijk posten op de tijdlijn van een pagina

Je kunt meerdere foto’s tegelijk uploaden naar de tijdlijn. Hoe ze worden weergegeven, hangt af van het aantal afbeeldingen dat u uploadt en de oriëntatie van wat ik de primaire afbeelding zal noemen.

De primaire afbeelding is wat ik de afbeelding noem die als eerste wordt weergegeven bij het uploaden popup, en het wordt ook groter weergegeven in sommige lay-outs. Voor zover ik weet, is er geen officiële naam voor, maar ik ga door en gebruik “primaire afbeelding”. Dus dat is waar ik naar verwijs in de sectie hieronder.

Naast het eerst weergeven, heeft de primaire afbeelding nog een andere belangrijke rol. Deze bepaalt de lay-out die je krijgt. Als je 3 afbeeldingen uploadt met een vierkante primaire afbeelding afbeelding krijg je een andere lay-out dan wanneer je 3 afbeeldingen uploadt met een rechthoekige primaire afbeelding.

De gemakkelijkste manier om te selecteren welke afbeelding als de primaire afbeelding dient, is door deze naar links in het uploadvenster te slepen.

Hier is een voorbeeld van wat ik bedoel. In deze upload ik twee afbeeldingen, een oranje vierkant en een groene verticale rechthoek. Als het oranje vierkantje in de eerste positie in het uploaddialoogvenster staat, zoals dit:

het plaatst als volgt:

Het uploaden van exact dezelfde twee afbeeldingen maar deze omkeren, zodat de verticale rechthoek is de eerste, als volgt:

wordt als volgt weergegeven:

Hetzelfde principe is van toepassing als u twee, drie of vier afbeeldingen uploadt – de lay-out zal altijd zijn de primaire afbeelding.

2 afbeeldingen met horizontale (liggende) primaire afbeelding

De volledige breedte wordt 500px. De bovenste afbeelding is 250 px hoog; de onderkant is 249px hoog. Er zit een 2px witte lijn tussen.

2 afbeeldingen met verticale (staande) primaire afbeelding

2 afbeeldingen met vierkante primaire afbeelding

3 afbeeldingen met horizontale (liggende ) Primaire afbeelding

Omdat de lay-out is afgeleid van de primaire afbeelding, kunt u de oriëntaties van de niet-primaire afbeeldingen mixen en matchen – ze zullen nog steeds hetzelfde weergeven.

3 afbeeldingen met een verticale (staande) primaire afbeelding

3 afbeeldingen met een vierkante primaire afbeelding

4 afbeeldingen met een horizontale (liggende) primaire afbeelding

U kunt mixen en komen overeen met de oriëntaties van de niet-primaire afbeeldingen, ze zullen nog steeds hetzelfde worden weergegeven.

4 afbeeldingen met een verticale (staande) primaire afbeelding

4 afbeeldingen met een vierkante primaire afbeelding

5 of meer afbeeldingen met een horizontale (staande) primaire afbeelding

De eerste vijf afbeeldingen worden weergegeven in een soort mozaïekpatroon, zoals dit. Als u meer dan vijf afbeeldingen toevoegt, krijgt u een kleine knopoverlay plus symbool om de andere weer te geven.

5 of meer afbeeldingen met een vierkante of verticale (staande) primaire afbeelding

Je krijgt dezelfde weergave, of de primaire afbeelding nu een vierkant of een verticale rechthoek is.

Foto’s over de volledige breedte op de tijdlijn van Facebook

Ja, ze waren cool. De afbeelding omvatte beide kolommen. Maar Facebook heeft ze halverwege 2014 afgeschaft in hun herontwerp. Je updates worden nu alleen in een enkele kolom weergegeven en er is geen manier om foto’s breder te maken dan die kolom.

Event Header Images

Het maakt niet uit welke vorm je uploadt als een header-afbeelding voor een evenementpost wordt deze bijgesneden tot een beeldverhouding van 16: 9. Upload voor de beste resultaten een afbeelding van 1920 bij 1080 pixels. Maar iets om op te letten is dat het in de weergave van het hoofdevenement behoorlijk verkleind is, dus gebruik geen lettertypen die te klein zijn (mensen kunnen op de afbeelding klikken om een grotere versie te openen, maar niet iedereen gaat het doen dat).

Wanneer het wordt weergegeven op de hoofdevenementpagina, wordt het geschaald naar 500 bij 262 pixels, zoals dit:

Problemen met Facebook-beeldkwaliteit

Iets wat zich ervan bewust is dat Facebook sommige afbeeldingen behoorlijk agressief comprimeert wanneer u ze uploadt en weergeeft.

Het is logisch – natuurlijk willen ze het laden van pagina’s versnellen en de bandbreedte verminderen door zoveel mogelijk compressie toe te passen als ze kunnen wegkomen. . Ik ben niet de enige die zou wensen dat ze minder agressief zouden zijn met hun compressie, maar hoe opvallend het is, hangt af van of zaken als het kleurengamma in je afbeelding en de hoeveelheid detail in je foto.

In de bovenstaande voorbeelden is de JPG-compressie veel meer merkbaar in de montageversie dan in de Sydney Harbour Bridge-versie. Ik heb de instellingen voor kwaliteit en verscherping voor elk van de originelen hetzelfde ingesteld voordat ze werden geüpload. Sommige gebruikers hebben gemeld dat afbeeldingen met veel rood en oranje de effecten van de compressie meer lijken te laten zien dan afbeeldingen met blauw en groen, maar het hangt af van de daadwerkelijke afbeelding.

Het lijkt ook af te hangen van wat soort afbeelding die u weergeeft. Fotogalerijafbeeldingen lijken minder compressie te hebben toegepast bij de weergave dan ontwerpelementen zoals de omslagfoto en de profielfoto.

Er zijn een aantal dingen die u kunt doen bij het voorbereiden van de afbeeldingen voordat u ze uploadt, waardoor de kans dat je afbeelding zal er waardeloos uitzien.

Upload afbeeldingen met een bestandsgrootte van 99 KB of minder. Facebook zou afbeeldingen minder dan dat onaangeroerd moeten laten, waardoor je controle hebt over hoe de compressie wordt toegepast.

Upload afbeeldingen waarop nog niet veel compressie is toegepast. Probeer voor JPG’s bijvoorbeeld de kwaliteitsinstelling op 80 of hoger te houden. Facebook gaat het toch weer comprimeren. Als u software gebruikt die rekening houdt met de kleurruimte (zoals Lightroom of Photoshop), gebruikt u sRGB-kleurruimte. En het uploaden van afbeeldingen die al verkleind zijn tot dicht bij of op de beoogde weergavegrootte en niet overdreven verscherpt, lijkt goed te werken.

Als geen van deze werkt, bekijk dan mijn bericht over hoe je scherpe tekst kunt krijgen op Facebook-afbeeldingen.

Wazige tekst, logo’s of watermerken op afbeeldingen krijgen?

Als je tekst, een logo of watermerk opneemt en merkt dat het wazig en onduidelijk wordt vanwege de JPG-artefacten, heb ik een apart bericht waarin wordt uitgelegd hoe je dit kunt oplossen: scherpe tekst op Facebook-afbeeldingen.

Afbeeldingsmetagegevens op Facebook

Hoewel ze niet specifiek gerelateerd zijn aan afbeeldingsformaten, is het de moeite waard om te weten dat Facebook alle metagegevens uit je afbeeldingen verwijdert. Dat omvat alle GPS, cameratype en andere gegevens die uw camera mogelijk insluit, evenals alles zoals trefwoorden of copyrightinformatie die u mogelijk hebt toegevoegd. (Een uitzondering is als u zich in Duitsland bevindt).

Cheatsheet voor Facebook-foto’s

	Breedte	Hoogte	Aantekeningen
Omslagfoto / Omslagdiavoorstelling	820px	360px
Profielfoto in koptekst	172px	172px	Moet minimaal 180px bij 180px zijn
Profielfoto op tijdlijn	40px	40px	Zelfde afbeelding als hoofdprofielafbeelding, automatisch verkleind
Thumbnail van gedeelde link	500px	261px	Alleen voor enkele thumbnails. Meerdere miniaturen worden bijgesneden.
Geüploade tijdlijn Fotominiaturen	500px max	750px max	Zie uitzonderingen hierboven voor meerdere afbeeldingen.
Event Header Image	500px	262px	16: 9 beeldverhouding enkel en alleen. Upload voor de beste resultaten een afbeelding van 1920 x 1080 px.